Implement OAuth 2.0 for social login on the storefront

We can implement social login on our WebSphere Commerce storefront to enable users to log in to the store by using a social networking account, rather than using credentials dedicated to WebSphere Commerce. Social networking sites generally provide standard APIs or SDKs in multiple languages to enable log on to their website or applications via an access token. The interaction flows are based on OAuth 2.0 protocol.

For web applications, JavaScript SDK is the recommended method for integration. See:


Procedure

  1. Create a social networking application, then register the application details in your STORECONF table.

    1. Create a social networking app for WebSphere Commerce.

      By using the social networking open platform, create an application for WebSphere Commerce. Use the development guide that is specific to the social networking site that we are integrating with.

      After creating the application, a pair of clientId and clientSecret (or appId and appSecret) are granted. You might receive your clientId right away after the application is created. We can you look up the clientSecret in the application settings. You use these values when you register your application in your STORECONF table.

    2. Register your app in your STORECONF table. By using the IDs that you acquired as a result of the previous step, run the following SQL statements.

        insert into storeconf values(<store_id>, '<SNSName>.oauth.clientIdField', 'client_id', 0); insert into storeconf values(<store_id>, '<SNSName>.oauth.clientSecretField', 'client_secret', 0);
        insert into storeconf values(<store_id>, '<SNSName>_<clientIdField>', '<appId>', 0);
        insert into storeconf values(<store_id>, '<SNSName>_<clientSecretField>', '<appSecret>', 0);

      Where:

        store_id Is the WebSphere Commerce store ID. For example, 1001.
        SNSName Is the name of your social networking site. For example, Google or Facebook. We can use multiple SNS logins. The prefix of SNSName on each configuration is used to distinguish between different social networking sites in WebSphere Commerce.
        client_id Is the client ID for the application created with the social networking site.
        client_secret Is the client secret for the application created with the social networking site.
        clientIdField Is the clientIdfield for the application created with the social networking site.
        appId Is the appId for the application created with the social networking site.
        clientSecretField Is the clientSecretField for the application created with the social networking site.
        appSecret Is the appSecret for the application created with the social networking site.

      Note: Ensure that the value of the two configurations: SNSName.oauth.clientIdField and SNSName.oauth.clientSecretField match the naming of the SNS. Also, be sure to match the field names used in the API request defined by the social networking site. WebSphere Commerce composes API requests according to the field names that are configured here to interact with social networking sites in the scenarios where the two fields are required, for example, token verification.

  2. Following your social networking site implementation guide to enable the social login to the storefront. Completing this step includes:

    • Setting up the JavaScript SDK, specify an application ID from the previous step.

    • Adding the login button to the store.

    • Defining callback function to handle the login result.In the callback function after a successful login, call MyAccountDisplayJS.validateOauthToken() with the access token, user ID, or even other user profile information in the response to start server login process. For example: 

        function statusChangeCallback(response){
        if(response.status == 'connected'){
           var param = {id:response.authResponse.userID};
           MyAccountDisplayJS.validateOauthToken(response.authResponse.accessToken, 1, 'facebook', url, params) ;          
        }       
  }

      Note: The parameter URL must be the post logon URL. Before calling validateOauthToken, we can also call the social networking site's API to retrieve user profile information, and populate the response fields, like 'name' and 'email' to the parameters. Then, in the server login process, a user is created by using this information.

  3. Configure the WebSphere Commerce login process to use token verification and user profile mapping. The REST API POST /store/{storeId}/loginidentity/oauth_validate is invoked by the JavaScript and initiates the server login process. The login process can be broken down into the following step:

    • Verify the access token that is passed from store to the server.

      To avoid an attack on this social login API, token verification is mandatory in the login process. Different social networking sites use different verification mechanisms, but they all provide endpoints or client libraries for token validation. By default, the API calls a preconfigured token validation endpoint, compose the request according to a set of preconfigured fields, and check the HTTP status code in the response. If the status code is 200 and does not contain any errors, the validation is successful. If the social networking site we are integrating with provides a similar mechanism as the default behavior, you need to configure several fields in your STORECONF table. Run the following SQL statements.

        insert into storeconf values(<store_id>, '<SNSName>_provider_verifytoken_url', 'https://graph.SocialNetworkingSite.com/debug_token', 0);
        insert into storeconf values(<store_id>, '<SNSName>.oauth.verifiedTokenField', 'input_token', 0);

      Note: The verifiedTokenField is the field name that is appended to token verification endpoint.

      If you have more validation logic against the response, we can extend OAuthTokenValidationCmdImpl.validateResult() to add your validation logic.

      Some social networking sites provide a client library for token verification. In this case, we can write a new implementation for OAuthTokenValidationCmd to use their client library to perform the validation. And register the new command .impl in the CMDREG table.

    • Map the user profile information that you received from social networking site to WebSphere Commerce user profile.

      Note: This is only required if you used different field names for the user profile information. By default, mappings for the four fields (id, lastName, email, nickName) are already configured. If you use the default field names, we can skip this step.

      User profile information, including name, email, and so on, can be retrieved through the social networking site user profile API, which is wrapped in their JavaScript SDK.

      We can pass this profile information to the param map when you invoke MyAccountDisplayJS.validateOauthToken() as previously mentioned, and then they are passed to the login REST API. The API reads the user profile information from the API input, then maps them to the WebSphere Commerce user profile once the token validation is successful. A controller command called OpenUserRegisterCmd is used to map profiles between the social networking site and WebSphere Commerce. To ensure a correct mapping, configure the field names that are mapped to WebSphere Commerce user fields, such as logonId, lastName, email, nickName, and so on, in the command input. For example:

        1 insert into storeconf values(<store_id>, '<SNSName>.user.uniqueIdField', 'id', 0);
        2 insert into storeconf values(<store_id>, '<SNSName>.user.lastNameField', 'name', 0);
        3 insert into storeconf values(<store_id>, '<SNSName>.user.emailField', 'email', 0);
        4 insert into storeconf values(<store_id>, '<SNSName>.user.nickNameField', 'name', 0);

      • 1 When you map to logonId, the unique userIdField from the social networking site is mandatory.

      • 2 When you map to name, the unique lastNameField from the social networking site is mandatory.

      • 3 When you map to email, the unique emailField from the social networking site is mandatory.

      • 4 When you map to name, the unique nickNameField from the social networking site is optional.

      If, in your case, the user profile information has not been retrieved from the storefront, it can be retrieved from the server by using REST API. To achieve this, customize OpenUserRegisterCmd to invoke the social networking site's user profile API, then map the response to WebSphere Commerce.

      If the user profile information is retrieved during token validation, return them by extending OAuthTokenValidationCmd.getProfileMap(). By default, the returned map is passed to OpenUserRegisterCmd.setInputParameters().

    • Continue the login process like a registered shopper.

      According to the user profile information, particularly the logonId field, the user is determined as an existing user, or a new one. If the user is a new user, browse the storefront as a registered shopper.

      When the login process completes, the store redirects to the post logon URL, which is passed in MyAccountDisplayJS.validateOauthToken().