Implement single sign-on with Facebook

Load https://developers.facebook.com/apps/ and select Create App.

In the Create an App screen, select Build Connected Experiences and select Continue.

Specify your app’s name in the App Display Name field and select Create App.

In your developer dashboard, click Settings  Basic.

Take note of the App ID and App Secret details for use later in this tutorial.

Complete all fields on the form using the following descriptions as a guide.

Click Dashboard and scroll down to the Add products to your app section.

Select Set Up on the Facebook Login tile to add Facebook Login as an option under the PRODUCTS menu.

Create the basic asset structure described in the figure above:

Open the URLs screen of the Web services site asset.

In the Web domains section set a domain with a _webservices sub-path. For example, https://example.com/_webservices.

Select Save

Load the Details screen of Facebook OAuth Token asset.

In the OAuth 2.0 settings section, configure the following settings:

In the Advanced settings section, make the following changes:

In the Access token section, set Token storage to Session.

Select Save to complete the OAuth 2.0 token configuration settings.

Load the Details screen of Facebook OAuth Token asset.

In the General settings section, configure the following settings:

In the User creation settings section, configure the following settings:

Activate the Allow linking to existing users, Automatic creation, and Disallow password log in options.

In the Populate user attributes section, configure the following attributes:

Find the Logged In bodycopy child asset of the OAuth Account Manager asset.

Open the Content tab and paste the following JavaScript code into the Code component.

<p><em>Login successful, please wait...</em></p>
<script>
    var windowSource;
    var sourceURL;
    //set the vars depending on the window source type
    if(window.opener){
        windowSource = window.opener;
        sourceURL = window.opener.location.href;
    }else{
        windowSource = window.parent;
        sourceURL = window.parent.location.href;
    }
    //get the current URL and remove the /_login if present
    sourceURL = sourceURL.replace('/_login','');
    //refresh the window opener or window parent and close this one
    windowSource.location.reload();
    window.close();
</script>

Select Save.

Create a Users folder asset as a child asset of the Configuration asset.

Create a user group named Social sign-in users beneath the Users folder asset.

Open the Create locations screen of the OAuth account manager asset.

In the Fixed create locations section, use the asset picker to select the Social sign-in users user group.

Select Save to set the destination for all user accounts created as part of social sign-in.

Open the URLs screen of the OAuth account manager asset.

Copy the Current URLs path. The path has a similar URL pattern to https://example.com/_webservices/logins/login-with-facebook.

Return to your Facebook app settings screen and select your Facebook Login product’s Settings screen.

Paste the Current URLs path into the Valid OAuth Redirects URIs field in your Facebook Login product.

Select Save changes to set the redirect URI for your sign-in product.

Click Paint Layouts  Default  Type Formats to locate the Default Formats paint layout bodycopy asset.

Open the Content screen and paste the following code directly below the %asset_contents% keyword.

%begin_globals_user_is_logged_in%
   <strong>Logged in as:</strong>
   %globals_user_attribute_first_name% %globals_user_attribute_last_name%
   <a href="?SQ_ACTION=logout">(Sign out)</a>
%else_globals%
   <a class="btn btn-primary" href="./?a=336" onclick="openWindow('./?a=336', 'External Login'); return false;">Sign in with Facebook</a> (1)
   <script>
      function openWindow(url, title, w=500, h=600) {
         // Get window reference
         var browserWindow = window.top;
         // Fixes dual-screen position
         var dualScreenLeft = browserWindow.screenLeft != undefined ? browserWindow.screenLeft : screen.left;
         var dualScreenTop = browserWindow.screenTop != undefined ? browserWindow.screenTop : screen.top;

         var width = browserWindow.innerWidth ? browserWindow.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
         var height = browserWindow.innerHeight ? browserWindow.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

         var left = ((width / 2) - (w / 2)) + dualScreenLeft;
         var top = ((height / 2) - (h / 2)) + dualScreenTop;
         var newWindow = browserWindow.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

         // Puts focus on the newWindow
         if (browserWindow.focus) {
               newWindow.focus();
         }
      }
   </script>
%end_globals%

Select Save to add the Facebook sign-in button to your website pages.

Select the Facebook Login product’s Settings screen.

Use the In development toggle to switch your app to Live Mode.

Select Switch Mode to switch your app over from In development to Live.

Open the Details screen of the Sign-in with Facebook OAuth Account Manager asset.

In the Return location section, set the Query string parameter field to returnurl and select Save.

Open the Content tab of the OAuth account manager Logged in bodycopy.

Delete the JavaScript you added in the Configure the OAuth account manager logged in bodycopy step and select Save.

Click Paint Layouts  Default  Type Formats to locate the Default Formats paint layout bodycopy asset.

Delete the popup JS code you added in Add the Facebook sign-in button to your site step and replace it with the following code.

%begin_globals_user_is_logged_in%
   <strong>Signed-in as:</strong>
   %globals_user_attribute_first_name% %globals_user_attribute_last_name%
   <a href="?SQ_ACTION=logout">(Sign out)</a>
%else_globals%
   <a class="btn btn-primary" href="./?a=366?returnurl=%frontend_asset_url%">Sign in with Facebook</a> (1)
%end_globals%

Select Save

Test the integration and note the differences in how the authentication flow works.