Social Login – Customers (User) - Infosys Equinox Developer Portal

This page discusses how to integrate a Business’ storefront with Social Logins in Infosys Equinox.

Page Contents

Overview

Apart from the default login (email address and phone number), a Business can integrate Google or Facebook sign-ins so that its customers can login to the business storefront using these Social logins.

Integrating Google Sign-In into your storefront
Integrating Facebook Log-In into your storefront

Before You Begin

Before you can integrate Google Sign-In into your storefront, you need to create credentials, such as OAuth client ID and client secret key and integrate them by calling the Sign-in API. The client ID and secret key are required to authenticate your storefront with Google.

Create Google App and OAuth Client

To integrate Google Sign-In into your storefront,

Go to the https://console.developers.google.com/ site.
Click the CREATE button to create a new project.
On the New Project page, enter the project name, select your organization and location, and click the CREATE button.
Note: The project name will be auto-filled if you do not wish to enter a name for the project.

After creating the project, the Credentials tab is displayed to create credentials to access APIs.
Click the Create credentials button and then select OAuth client ID to create new credentials.
On the Create OAuth client ID screen, select the Web application option under the Application type, and complete the required fields.
Click the Create button. The OAuth client pop-up will display showing your client ID and client secret key.
Copy the client ID and client secret key by clicking on the copy icons separately.
Click OK to close the OAuth client pop-up window.
Click the OAuth consent screen tab.
In Support email, select the required email address or Google Group email address, which will be shown to users on the consent screen.
In Authorized domains, add your authorized domain list; for example:
Click the Save button. The Credentials tab is displayed.

Replace your copied client ID against the client_id in the HTML tags given below and embed it in your storefront’s login page.

<html>
<head>
	<title>Google Login</title>
	<script>
		window.registerGoogleSignIn = function()
		{
			gapi.load('auth2', function(){
					
			// Retrieve the singleton for the GoogleAuth library and set up the client.
			var auth2 = gapi.auth2.init({
			client_id: "1006472761653-m8d5knjajd4q29d77cot389fmjjq8v8n.apps.googleusercontent.com"
			// cookiepolicy: 'single_host_origin',
			// Request scopes in addition to 'profile' and 'email'
			 //scope: 'additional_scope'
		});
					
					auth2.attachClickHandler(document.getElementById('sk_tabSignInGOG_id'), {},
					function(googleUser) {
						var accessToken = (googleUser.hg && googleUser.hg.access_token ? googleUser.hg.access_token :(googleUser.Zi && googleUser.Zi.access_token ? googleUser.Zi.access_token : alert("Access_token missing")));
						alert("access token - " + accessToken);
					}, function(error) {
					  alert(JSON.stringify(error));
					});
				});
			}
		
		window.apiCbk = function(){
				registerGoogleSignIn(event);
			   
			};
</script>
<script src="client.js?onload=apiCbk"></script>
</head>
<body>
<p>Google Login</p>
<div id="sk_tabSignInGOG_id">Sign In</div
</body>
</html>

In the User microservice, update the google_login_keys collection property with your copied client ID and client secret key:
{"clientid":"1006472761653-m8d5knjajd4q29d77cot389fmjjq8v8n.apps.googleusercontent.com","clientsecret":"TEpOMbB-1y6YIyF5hbOzzCIg"}
Load the HTML page (see Step 13) in the web server where the storefront is deployed, and click Sign In.

The Choose an account pop-up opens:
Copy the accessToken from the authResponse or pop-up as shown below:
In the userAuth (login) call request, send accessToken with the following details:
- identity – Specify the accessToken that you copied from the authResponse. See Step 16.
- identityType – Specify “google”.
For example,

{ "identity": "ya29.GmLNBgWNbzdFAMy3qzfU4hYYP91Zd_pXyx3jhoT59v_h7gpO45PTapBgasK9b5ERrqXILbERXNTJdYRR34yf5NZryBOelztxctMo_oFxZ7oav0WXrApSQ0T_lR15NxJQTNqbig", "identityType": "google" }

Integrating Facebook Sign-In Into Your Storefront

Before You Begin

Before you can integrate Facebook Sign-In into your storefront, you need to create App ID and integrate them by calling the Sign-in API. The App ID is required to authenticate your storefront with Facebook.

Create Facebook App and OAuth Client

To integrate Facebook Sign-In into your storefront,

Go to the https://developers.facebook.com/ site.
At the top-right corner, click My Apps from the menu, and select Add New App.

The Create a New App ID opens.
To create a new App ID, enter the Display Name and Contact Email.
Click Create App ID.

The new App will be created and redirected to the Facebook App Dashboard.
In the left navigation panel, click Settings, and then Basic.
In the App Domains field, specify the domain name of your storefront.

Replace the App ID in the below sample html snippet and embed it in your storefront’s login page:

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      testAPI();
    } else {
      // The person is not logged into your app or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }

  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1268504086610939',
      cookie     : true,  // enable cookies to allow the server to access 
                          // the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v3.2' // The Graph API version to use for the call
    });

    // Now that we've initialized the JavaScript SDK, we call 
    // FB.getLoginStatus().  This function gets the state of the
    // person visiting this page and can return one of three states to
    // the callback you provide.  They can be:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. Not logged into Facebook and can't tell if they are logged into
    //    your app or not.
    //
    // These three cases are handled in the callback function.

    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });

  };

  // Load the SDK asynchronously
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }
  function logout(){
  FB.logout(function(response) {
   // Person is now logged out
  });
 }
</script>

<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

Load the HTML page (see Step 7) in the web server where the storefront is deployed.
Click Log In.
Copy the accessToken from the authResponse as shown below:
In the userAuth call request, send accessToken with the following details:
1. identity – Specify the accessToken that you copied from the authResponse. See Step 10.
2. identityType – Specify “facebook”.
For example,

{ "identity": "ya29.GmLEBngNJuovJwpVUxfmS-XuTt5UwJeHv0rFVE80bY2HVLrHxnPIK5qu8fZRcBwwNCy8Pn2jy-M2nqqv__o84je_eOH8LjGynG_cu9ue9KrLwJCglNl0tlZiS858BMXiI5hgow", "identityType": "facebook" }

The User microservice validates the accessToken and retrieves the user profile from Facebook.

Social Login – Customers (User)

Overview

Integrating Google Sign-In Into Your Storefront

Before You Begin

Create Google App and OAuth Client

Integrating Facebook Sign-In Into Your Storefront

Before You Begin

Create Facebook App and OAuth Client