Facebook Social Login Configuration Guide


Facebook is the world’s largest social media network, with more than 2 billion active users each month.

Before You Begin

To use Facebook for social login you must:

  1. Obtain a Facebook developer account from https://developers.facebook.com.
  2. Do one of the following:
    • Open a previously-created Facebook app, and copy the app ID and app secret.
    • Create a new app and copy the app ID and app secret.
       
  3. Use the Janrain Dashboard and the Facebook app ID and app secret to configure Facebook as a social login provider.

In This Configuration Guide

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

Creating a Facebook App for Social Login

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

To configure a Facebook app for social login, complete the following procedure:

  1. Log on to Facebook for Developers.
  2. From the Facebook for Developers home page, click My Apps and then click Add a New App:

  1. In the Create a New App ID dialog box, enter the name of your new app in the Display Name field, enter your email address in the Contact Email field, and then click Create App ID:

  1. In the Security Check dialog box, type the Captcha text in the Enter the text you see above field and then click Submit:

  1. On the home page for your new app, expand Settings and then click Basic:

  1. From the Settings page, copy and save the application ID shown in the App ID box:

  1. Click the Show button located next to the App Secret field:

  1. In the Please Re-enter Your Password dialog box, in the Password field, enter your password for the Facebook for Developers site:

  1. Copy and save the application secret shown in the App Secret box:

  1. Click + Add Platform:

  1. In the Select Platform dialog box, click Website:

  1. In the Website section, type the URL for your website in the Site URL field, and then click Save Changes:

  1. After the changes have been saved, then, in the navigation pane, click Advanced:

  1. On the Advanced Settings page, select Allow API Access to App Settings and then click Save Changes:

  1. In the navigation pane, click Dashboard to return to the home page for your app. From your app’s home page, click the Facebook Login product:

  1. In the Use Quickstart dialog box, click Web:

  1. On the Quickstart page, in the Tell Us about Your Website, section type the URL for your web site in the Site URL field, click Save, and then click Continue:

  1. In the navigation pane, expand Facebook Login and then click Settings:

  1. In the Client OAuth Settings section, verify that the following settings are set to Yes:
    • Client OAuth Login
    • Web OAuth Login
    • Use Strict Mode for Redirect URIs

For example:

  1. In the Valid OAuth redirect URIs field, type the redirect URI for your website and then press ENTER:

  1. Your redirect URI will typically have the format https://engage-app-name.rpxnow.com/facebook/callback. For example, if your Engage app has the name greg-stemp, your redirect URI would be https://greg-stemp.rpxnow.com/facebook/callback. If you have questions about your redirect URI, contact your Janrain representative.
     
  2. If you have more than one redirect URI, type each URI in the Valid Oauth redirect URIs field. You can enter additional URIs by clicking in the Valid Oauth redirect URIs field, typing a URI, and then pressing ENTER. URIs can be removed from the list by clicking the Delete button (X) at the end of the URI:

  1. To verify that you have entered a valid URI, retype the URI in the Redirect URI to Check field and then click Check URI. You should see a message verifying that you have entered a publicly-accessible URI:

  1. Click Save Changes and then log off from the Facebook for Developers site.

Using an Existing Facebook App for Social Login

If you already have a Facebook app that can be used for social login, complete the following steps to retrieve the application’s app ID and app Secret:

  1. Log on to the Facebook for Developers site (https://developers.facebook.com).
  2. From the Facebook for Developers home page, click My Apps and then click the name of the app you want to use for social login:

  1. On the home page for your app, click Show to display your app secret:

  1. Copy the App ID and APP Secret, and then log off of Facebook for Developers.

Configuring Facebook as a Social Login Provider

To configure Facebook as a social login provider, make sure you have your Facebook app ID and app 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 Facebook.
  6. In the Facebook dialog box, click Next until you reach the screen requesting the App ID and App secret:

  1. Paste your Facebook app ID in the App ID field, paste your Facebook app secret in the App Secret field, and then click Save. Facebook 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 Facebook appears as a social login option on your web site.

Testing Facebook Social Login

To test Facebook 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 Facebook icon:

  1. In the Facebook window, logon using a valid Facebook account:

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

The returned profile information will vary depending on:

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

You can verify Facebook 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 Facebook. Profile information returned from Facebook is displayed onscreen. For example:

Fields not marked with an Off or an Ask label are automatically returned when a user logs on using a Facebook 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 if they give permission for that data to be returned:

For example, if you ask for a user’s email address during logon, he or she will see the following message before they log on:

The user can either click Continue to forward all the requested information, or can click Review the info you provide and select which fields (if any) will be forwarded during logon.

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

See Also

Assigning a Different Facebook App for Social Login

If you want to use a different Facebook app or if you need to need to change your existing app, you must update your Facebook 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 Facebook.
     
  2. Click the green Configured button to display the Facebook is currently enabled dialog box:

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

Although you can modify your Facebook 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 Facebook shows them.

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

Removing Facebook as a Social Login Provider

If you no longer want to use Facebook for social login, you can remove Facebook 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 Facebook icon.
  6. Scroll to the bottom of the page, select Save and Publish, and then click Publish. Facebook 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.