How to implement continue with Instagram or Facebook login button for Instagram basic display API?

user_11961593 0
Viewed 4257

I'm going to make login with Instagram to my website.

The website would control Instagram media with user's Instagram account. The website visitors are consumers.(i.e. non-business or non-creator)

So I should use Instagram basic display API (can't use Instagram graph API because that needs users to be a business or creator.)

I've tried to implement "login with Instagram", but the developer guide says

Instagram Graph API cannot access Instagram consumer accounts (i.e., non-Business or non-Creator Instagram accounts). If you are building an app for consumer users, use the Instagram Basic Display API instead.

Instagram Basic Display is not an authentication solution. Data returned by the API cannot be used to authenticate your app users or log them into your app. If you need an authentication solution we recommend using Facebook Login instead.

So I made "login with Facebook" button, but the problem is that if I log in with Facebook with Instagram scopes, that asks me to create Instagram business account while logging in. Oops. I returned to the first position.:( What a loop? What's the solution? Did I understand the guide incorrectly?

instagram facebook-login facebook
2 Answers
user_116060460

Maybe you can use this approach

  1. You ask their username (with message: if you enter your username then you agree our policy)
  2. You can access their instagram data with this link https://www.instagram.com/{username}/?__a=1
  3. Login if username exist in your DB or Register if they are new user.

EDITED AFTER DISCUSSION IN COMMENT

No need to use library first you have to follow instruction from this link https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

FYI I Use Laravel to create this simple app https://youtu.be/Qhg9vfB68J8?t=9

and my controller look like this

public function redirectToInstagramProvider()
{
    $appId       = "1564152940449991"; // change this to your appId
    $secret      = "f9711d1d48797fa30d4b2055ae5734f9"; // change this to your secret
    $redirectUri = "https://newgli.test/login/instagram/callback"; // change this to your redirectUri

    $redirectUri = urlencode($redirectUri);
    return redirect()->to("https://api.instagram.com/oauth/authorize?app_id={$appId}&redirect_uri={$redirectUri}&scope=user_profile,user_media&response_type=code");
}

public function instagramProviderCallback(Request $request)
{
    $code = $request->code;
    if (empty($code)) {
        return redirect()->route('home')->with('error', 'Failed to login with Instagram.');
    }

    $appId       = "1564152940449991"; // change this to your appId
    $secret      = "f9711d1d48797fa30d4b2055ae5734f9"; // change this to your secret
    $redirectUri = "https://newgli.test/login/instagram/callback"; // change this to your redirectUri

    $client = new Client();

    // Get access token
    $response = $client->request('POST', 'https://api.instagram.com/oauth/access_token', [
        'form_params' => [
            'app_id'       => $appId,
            'app_secret'   => $secret,
            'grant_type'   => 'authorization_code',
            'redirect_uri' => $redirectUri,
            'code'         => $code,
        ],
    ]);

    if ($response->getStatusCode() != 200) {
        return redirect()->route('home')->with('error', 'Unauthorized login to Instagram.');
    }

    $content = $response->getBody()->getContents();
    $content = json_decode($content);

    $accessToken = $content->access_token;
    $userId      = $content->user_id;

    // Get user info
    $response = $client->request('GET', "https://graph.instagram.com/me?fields=id,username,account_type&access_token={$accessToken}");

    $content = $response->getBody()->getContents();
    $oAuth   = json_decode($content);
    dd($oAuth);
    // Get instagram user name
    $username = $oAuth->username;

    // do your code here
}

I know that code is not clean. You tweak the code to clean it. Maybe you can move your appId,Secret, redirectUrl to config file or .env file

user_134715010
Related