Flutter中如何实现Instagram登录/注册？新手开发者技术咨询

Hey there! I get that figuring out Instagram login and fetching follower data in Flutter can be tricky—especially since Firebase didn't cut it for getting those specific user details. Let's walk through a reliable approach step by step.

1. First, Set Up Your Instagram Developer Account #

Before writing any code, you need to configure an app on the Instagram Developer Portal:

• Create a new app and grab your Client ID and Client Secret.
• Request the necessary permissions: To fetch follower data, you'll need instagram_basic (for creator/business accounts) plus user_profile to get basic user info. Note: Personal Instagram accounts can't access follower data via the Graph API—only creator or business accounts are supported here.
• Set a valid redirect URI (e.g., com.your.appname://instagram-callback) and make sure it's registered in your app settings.

2. Use the Right Flutter Packages #

Firebase Auth's Instagram integration only handles basic OAuth login, but it doesn't let you request custom permissions like follower access. Instead, use these packages for full control:
Add these to your pubspec.yaml:

dependencies:
  flutter_appauth: ^6.1.1 # Handles OAuth2 flow
  http: ^1.1.0 # For making API requests

3. Build the Instagram Login Flow #

Use flutter_appauth to initiate the OAuth authorization and exchange the code for an access token:

import 'package:flutter_appauth/flutter_appauth.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

final FlutterAppAuth _appAuth = FlutterAppAuth();

// Replace with your own values
const String _clientId = 'YOUR_INSTAGRAM_CLIENT_ID';
const String _clientSecret = 'YOUR_INSTAGRAM_CLIENT_SECRET';
const String _redirectUri = 'com.your.appname://instagram-callback';
const List<String> _scopes = ['user_profile', 'instagram_basic'];

Future<void> signInWithInstagram() async {
  try {
    // Initiate authorization request
    final AuthorizationResponse? authResponse = await _appAuth.authorize(
      AuthorizationRequest(
        _clientId,
        _redirectUri,
        authorizationEndpoint: 'https://api.instagram.com/oauth/authorize',
        tokenEndpoint: 'https://api.instagram.com/oauth/access_token',
        scopes: _scopes,
        promptValues: ['login'], // Force login prompt
      ),
    );

    if (authResponse?.authorizationCode != null) {
      // Exchange authorization code for access token
      final TokenResponse? tokenResponse = await _appAuth.token(
        TokenRequest(
          _clientId,
          _redirectUri,
          authorizationCode: authResponse!.authorizationCode,
          tokenEndpoint: 'https://api.instagram.com/oauth/access_token',
          clientSecret: _clientSecret,
        ),
      );

      if (tokenResponse?.accessToken != null) {
        final String accessToken = tokenResponse!.accessToken!;
        // Now use this token to fetch user data and followers
        await _fetchInstagramUserData(accessToken);
      }
    }
  } catch (e) {
    print('Login error: $e');
  }
}

4. Fetch User Data & Followers #

First, get the user's Instagram ID, then use it to fetch followers (only for creator/business accounts):

Future<void> _fetchInstagramUserData(String accessToken) async {
  final Uri userDataUri = Uri.parse(
    'https://graph.instagram.com/me?fields=id,username,account_type&access_token=$accessToken',
  );

  final http.Response response = await http.get(userDataUri);

  if (response.statusCode == 200) {
    final Map<String, dynamic> userData = jsonDecode(response.body);
    final String igUserId = userData['id'];
    final String accountType = userData['account_type'];

    // Check if account is eligible for follower data
    if (accountType == 'CREATOR' || accountType == 'BUSINESS') {
      await _fetchFollowers(igUserId, accessToken);
    } else {
      print('Follower data is not available for personal accounts.');
    }
  } else {
    print('Failed to fetch user data: ${response.body}');
  }
}

Future<void> _fetchFollowers(String igUserId, String accessToken) async {
  final Uri followersUri = Uri.parse(
    'https://graph.instagram.com/$igUserId/followers?fields=id,username&access_token=$accessToken',
  );

  final http.Response response = await http.get(followersUri);

  if (response.statusCode == 200) {
    final Map<String, dynamic> followersData = jsonDecode(response.body);
    final List<dynamic> followers = followersData['data'];
    print('Follower list: $followers');
    // Process or display followers here
  } else {
    print('Failed to fetch followers: ${response.body}');
  }
}

5. Key Notes to Keep in Mind #

• Permission Approval: You'll need to submit your app for review on the Instagram Developer Portal to get access to the instagram_basic permission. Be clear about why you need follower data in your submission.
• Token Expiry: Instagram access tokens expire—implement token refresh logic to avoid forcing users to log in repeatedly.
• Security: Never hardcode your Client Secret in the client-side app. For production, route the token exchange through your own backend server to keep the secret safe.

内容的提问来源于stack exchange，提问作者Arya Jayadi