Instagram Social Login Configuration Guide


Instagram is a photo- and video-sharing services that has approximately 800 million users divided between Instagram Direct and Instagram Stories.

Before You Begin

To use Instagram for social login you must:

  1. Obtain an Instagram developer account from https://instagram.com/developer/register.
  2. Do one of the following:
    • Open a previously-created Instagram client, and copy the client ID and client secret.
    • Create a new Instagram client, and copy the client ID and client secret.
       
  3. Use the Janrain Engage Dashboard and the Instagram client ID and client secret to configure Instagram as a social login provider.

In This Configuration Guide

  • Creating an Instagram Client for Social Login
  • Using an Existing Instagram Client for Social Login
  • Configuring Instagram as a Social Login Provider
  • Testing Instagram Social Login
  • Assigning a Different Instagram Client for Social Login
  • Removing Instagram as a Social Login Provider

Creating an Instagram Client

This section walks you through the process of creating an Instagram client for social login. If you already have a client, see the Using an Existing Instagram Client for Social Login section of this documentation.

To configure an Instagram client, complete the following procedure:

  1. Log on to the Instagram Developers site (https://www.instagram.com/developer/register/).
  2. On the Developers Signup page, enter:
    • The URL of your website in the Your website field.
    • Your contact phone number in the Phone Number field.
    • A brief description of your app in the What do you want to build with the API field.
       
  3. Select I accept the API Terms of Use and Brand Guidelines and then click Sign up:

  1. On the Hello Developers page, click Register Your Application.
  2. On the Manage Clients page, click Register a New Client:

  1. On the Register New Client ID page, enter:
    • The name of your application in the Application Name field.
    • A brief description of your application in the Description field.
    • The name of your company in the Company Name field.
    • The URL of your website in the Website URL field.
    • Your Instagram callback URL in the Valid redirect URIs field. If you are using a standard Janrain domain, your redirect URL will look similar to this: https://greg-stemp.rpxnow.com/instagram/callback.
    • Your email address in the Contact email field.
       
  2. Type the words shown in the Recaptcha section in the Type the words above field and then click Register:

  1. On the Manage Clients page, click Manage:

  1. Copy the Client ID and the Client Secret. You can copy this information to a text editor, then close the text editor after you have configured Janrain social login:

  1. Log off from the Instagram Developers site.

Using an Existing Instagram Client for Social Login

If you already have an Instagram client that can be used for social login, complete the following steps to retrieve the client ID and client secret:

  1. Log on to the Instagram Developers site (https://www.instagram.com/developer).
  2. From the Developers site home page, click Manage Clients:

  1. From the Manage Clients page, locate the app you want to use to configure social login, and then click Manage:

  1. From the Manage Client page, copy the Client ID and Client Secret. You can copy this information to a text editor, then close the text editor after you have configured Janrain social login:

  1. Log off from the Instagram Developers site.

Configuring Instagram as a Social Login Provider

To configure Instagram as a social login provider, make sure you have your Instagram client ID and client secret, and then complete the following procedure:

  1. Log on to your Janrain Dashboard (https://dashboard.janrain.com).
  2. From the Dashboard home page, click the Manage Engage Dashboard icon.
  3. From the Engage Dashboard home page, in the Widgets and SDKs section, click Sign-Ins.
  4. From the Sign-in page, verify that Widget is selected and then expand Providers.
  5. From the list of Providers, click Instagram.
  6. In the Instagram dialog box, click Next until you reach the screen requesting the client ID and client secret:

  1. Paste your Instagram client ID in the Client ID field, paste your Instagram client secret in the Client Secret field, and then click Save. Instagram appears in your social login widget.
  2. When you are finished, select Save and Publish and then click Publish. It might take as long as one hour before Instagram appears as a social login option on your web site.

Testing Instagram Social Login

To test Instagram social login, complete the following procedure:

  1. Do one of the following:
    • If you have just published your widget settings, click the Test your widget link that appears after the widget has been saved.
    • If you previously published your widget settings then, from the Engage Dashboard Sign-in page, click Launch a test widget.
       
  2. From the Test page, click the Instagram icon:

  1. In the Log in – Instagram window, logon using a valid Instagram account:

  1. If login succeeds, information returned from the Instagram profile is displayed in the API response preview field:

The returned profile information will vary depending on:

  • The Instagram account used in the test.
  • The profile information you requested for Instagram.

You can verify Instagram profile fields by completing the following procedure:

  1. From the Engage Dashboard home page, click the Manage Providers icon:

  1. From the Configure Providers page, click Instagram.
  2. Profile information returned from Instagram is displayed onscreen. For example:

Fields not marked with an Off or an Ask label are automatically returned when a user logs on using an Instagram account.

For fields that are marked with a label, click Off to request that the information be returned. The Off label will change to Ask, meaning that, at logon time, the user will be asked whether he or she gives permission for that data to be returned:

For example, if you ask about commenting on photos, he or she will see the following message before they log on:

The user can either click Authorize to agree to the request, or can click Cancel to terminate logon.

On the Configure Providers page, click Ask to turn off the information request.

See Also


Assigning a Different Instagram Client for Social Logon

If you want to use a different Instagram client or if you need to change your existing client, you must update the Instagram provider configuration settings. To do that, complete the following procedure:

  1. From the Engage Dashboard home page, click the Manage Providers icon:

  1. From the Configure Providers page, click Instagram.
  2. Click the green Configured button to display the Instagram is currently enabled dialog box:

  1. To change the Instagram configuration, click Modify these settings.
  2. In the Instagram dialog box, change the Client ID and/or Client Secret as needed, and then click Save:

Although you can modify your Instagram settings, you cannot delete those settings. If you delete the settings and then try to save your changes, you’ll see the error message Please enter your Consumer Key and Secret exactly as Instagram shows them.

This means that you cannot “unconfigure” the provider: once configured, the Instagram icon will always be shown as green (i.e., configured) in the Janrain Dashboard.


Removing Instagram as a Social Login Provider

If you no longer want to use Instagram for social login, you can remove Instagram as a social login provider by completing the following procedure:

  1. Log on to your Janrain Dashboard (https://dashboard.janrain.com).
  2. From the Dashboard home page, click the Manage Engage Dashboard icon.
  3. From the Engage Dashboard home page, in the Widgets and SDKs section, click Sign-Ins.
  4. From the Sign-in page, verify that Widget is selected and then expand Providers.
  5. In the widget, click the X in the upper right corner of the Instagram icon.
  6. Scroll to the bottom of the page, select Save and Publish, and then click Publish. Instagram no longer appears in the sign-on widget.
Note. you must always have at least one social login provider in the widget. If you delete all the providers and then click Publish, you’ll see the error message Couldn’t save configuration: No providers.