How to integrate instagram sign in flutter

Viewed 2745

I'm want to integrate sign in through instagram in my app

currently I'm using below code

Future<Token> getToken(String appId, String appSecret) async {
  Stream<String> onCode = await _server();
  String url =
      "https://api.instagram.com/oauth/authorize?client_id=$appId&redirect_uri=http://localhost:8585&"
      "response_type=code&scope=basic";
  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  flutterWebviewPlugin.launch(url);
  final String code = await onCode.first;
  final http.Response response = await http.post(
      "https://api.instagram.com/oauth/access_token",
      body: {"client_id": appId, "redirect_uri": "http://localhost:8585", "client_secret": appSecret,
        "code": code, "grant_type": "authorization_code"});
  flutterWebviewPlugin.close();
  return new Token.fromMap(json.decode(response.body));
}

Future<Stream<String>> _server() async {
  final StreamController<String> onCode = new StreamController();
  HttpServer server =
  await HttpServer.bind(InternetAddress.loopbackIPv4, 8585);
  server.listen((HttpRequest request) async {
    final String code = request.uri.queryParameters["code"];
    request.response
      ..statusCode = 200
      ..headers.set("Content-Type", ContentType.html.mimeType)
      ..write("<html><h1>You can now close this window</h1></html>");
    await request.response.close();
    await server.close(force: true);
    onCode.add(code);
    await onCode.close();
  });
  return onCode.stream;
}

I'm able to login trough above code in Instagram

but i'm getting below error after sign in

enter image description here

Also i have added support for localhost:8585 in my info.plist file

<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost:8585</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

1 Answers

Upon seeing your code, I believe you are following this blog posts implementation. Upon checking, it uses the "Instagram Legacy API permission ("Basic Permission")". AFAIK and as mentioned in the comment section that it was disabled last June, 2020.

Here is the full text about this:

Update

The remaining Instagram Legacy API permission ("Basic Permission") was disabled on June 29, 2020. As of June 29, third-party apps no longer have access to the Legacy API. To avoid disruption of service to your app and business, developers previously using the Legacy API should instead rely on Instagram Basic Display API and Instagram Graph API. Please request approval for required permissions through the App Review process.

Legacy API user identifier available on Basic Display API until September 30, 2020.
To assist with migration, we have temporarily made the unique user identifier from the Legacy API - ig_id - available on Basic Display API. However, the ig_id field will be deprecated on Basic Display API on September 30, 2020, so please ensure you are using other fields (e.g. the Facebook "id" field) or your own unique identifier for your users. See our developer documentation here to learn more.

User Token Generator
If you're only using the Legacy API to generate tokens in order to display your Instagram Feed on a personal website, you can use the Instagram Basic Display API's User Token Generator to continue generating tokens. The User Token Generator does not require App Review, but it will only work for your owned Instagram accounts (i.e. accounts for which you know the login credentials). Refer to the developer documentation here to learn more. If you're using the Legacy API to display multiple accounts on your website, then you must apply for permissions to Instagram Basic Display API via App Review. If you're using the Legacy API for any other use case, you must apply for permissions on the Instagram Graph API platform via App Review.

More Tips
For more guidance on getting through our App Review process, please see this blog post. For more tips and tools, check out our App Review Rejection Results Guide, Common App Review Rejection Reasons and Developer Tools page. We also encourage you to leverage the Facebook Developer Community Forum - it's a tremendously helpful resource for communicating and connecting with developers across the world.

Check out this YouTube tutorial for the new guide on how to get Instagram access token.

Related