Guide

Google social login guide

Suggest Edits


📘

After a security audit uncovered a serious flaw in the Google+ code base, Google made the decision to slowly phase out the service. In turn, the ​Akamai​ Identity Cloud  updated its Google Sign-In IDP so that it no longer relies on Google+ scopes or APIs.


This configuration guide explains how to enable Google Sign-In as a social login identity provider. To do this, it is important that you follow the steps outlined in this guide, and largely ignore the instructions provided in the JavaScript SDK (widget). The user interface for the JavaScript SDK is outdated and will be replaced shortly. If you look at the JavaScript SDK you’ll see step-by-step instructions for configuring a Google app. For example, this screenshot explains how you must start by enabling the Google API and the Contacts API:

That information is no longer correct: you do not need to enable those two APIs. Follow the steps detailed in this configuration guide, and don’t worry about the instructions provided in the JavaScript SDK.


Before you begin

To use Google Sign-In for social login you must:

  1. Obtain a Google developer account from https://console.cloud.google.com.

  2. Do one of the following:

    • Open a previously-created Google app, and copy the app ID and app secret.
    • Create a new Google app and copy the client ID and client secret.

  3. Use the Social Login Dashboard and the Google+ client ID and client secret to configure Google Sign-In as a social login provider.


Create a Google Sign-in app

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

To create a Google Sign-in OAuth client, complete the following procedure:

  1. Log on to the Social Login Dashboard (https://dashboard.janrain.com) and then click the Manage Engage icon for your application.

  2. On your application’s home page, click the Manage Providers icon:

  3. On the Configure Providers page, click Google to display the Google configuration dialog box. Click Next until you see the screen that shows the JavaScript Origin and Redirect URI values for your domain:

  4. Make a note of these values or keep this screen displayed while you configure your Google Sign-in client.

  5. Type https://console.developers.google.com/apis/credentials in the address bar of your web browser and then press ENTER.

  6. Log on to the Google Developers Center.

  7. On the Google APIs page. click Create Credentials:

  8. In the dropdown list, select OAuth client ID:

  9. On the Create OAuth client ID page, click Application type and then click Web application:

  10. Type a name  for your new OAuth client in the Name field:

  11. In the Authorized JavaScript origins section, enter the JavaScript Origin URL you copied from the Social Login dashboard:

  12. In the Authorized redirect URIs section, enter the /googleplus/callback URI you copied from the Social Login dashboard:

  13. Click Create.

  14. In the OAuth client created dialog box, copy and store the client ID and the client secret. These values are required in order to configure Google as a social login provider:

  15. Click OK, and then log off from the Google Developers Center.


Use an existing Google Sign-in app for social login

If you already have a Google Sign-In OAuth client that can be used for social login, complete the following steps to retrieve the client’s client ID and client secret:

  1. Type https://console.developers.google.com/apis/credentials in the address bar of your web browser and then press ENTER.

  2. Log on to the Google Developers center:

  3. On the Google APIs home page, in the OAuth 2.0 Client IDs section, click the name of the OAuth client you want to use for social login:

  4. On the home page for your OAuth client, copy and store the client ID and client secret:

  5. Log off from the Google Developers Center.


Configure Google Sign-In as a social login provider

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

  1. Log on to your Social Login 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 Google:

  6. In the Google dialog box, click Next until you reach the screen requesting the Google Client ID and Client Secret:

  7. Enter your Google client ID in the Client ID field, enter your Google client secret in the Client Secret field, click Save, and then click Close. Google appears in your social login widget:

  8. When you are finished, select Save. Note that it might take as long as one hour before Google appears as a social login option on your web site.

If you are configuring Google for the first time, be sure that you skip the Configure**Providers**screen:

Much of the information shown on this screen (information previously available through Google+) is not provided by Google Sign-In; perhaps more important, requesting information that Google Sign-In does not provide can lead to problems when a user tries to log on with a Google account. We recommend that you do not enable any of the options on this screen. 

But what if you’ve already selected some of these options? For example:

In that case, we recommend that you deselect each of the selected values:

The Configure Providers screen will be updated in a subsequent release of the Social Login dashboard.


Test Google Sign-In social login

To test Google Sign-In 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 Google icon:

  3. In the sign-in window, enter your Google account email address in the Email or phone field and then click Next:

  4. Enter your Google account password in the Enter your password field and then click Next.

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

By default, your Google app returns information similar to the following:

{
  "stat": "ok",
  "profile": {
    "displayName": "Greg Stemp",
    "email": "greg.stemp@janrain.com",
    "googleUserId": "117224169092709847855",
    "identifier": "https://www.google.com/profiles/117224169092709847855",
    "name": {
     "familyName": "Stemp",
      "formatted": "Greg Stemp",
      "givenName": "Greg"
    },
    "photo": "https://lh6.googleusercontent.com/-FW0NohhRtPA/AAAAAAAAAAI/AAAAAAAAAAA/ACevoQPqePkQn1FaNn6Sr\_seAX\_q5yjoiQ/mo/photo.jpg&sz=400",
   "preferredUsername": "greg.stemp",
   "providerName": "Google",
   "providerSpecifier": "google",
    "provider\_id": "117224169092709847855",
   "verifiedEmail": true
  },
 "accessCredentials": {
    "accessToken": "ya29.GluuBsaoGkvwPl5wq3ttHGsqrF4-y2hOF3UB0pKGoszm3WMBGt5skhgTwlEWc0hjmhT7Rs4oXXUDmYKEI8amsFcVArWtjqgjqvaSfSqrhVTLw4HZnPIBX2McuY76",
    "clientId": "737258797307-t9s04713f9plcga91rau7qodmrpknl57.apps.googleusercontent.com",
    "expires": 1550000156,
   "refreshToken": "1/EQxGgmp4zh9ZTV1p6ooEtVQsygvQbmVT4DNu79DOVOcmXoJClWnH6C1QOKLmvzpK",
    "scopes": "openid",
    "type": "openidconnect",
    "uid": "117224169092709847855"
  }
}

Assign a different Google Sign-In app for social login

If you want to use a different Google Sign-In app or if you need to change your existing app, you must update the Google Sign-In provider configuration settings. To do that, complete the following procedure. When doing this, keep in mind that, even though the Dashboard UI says Google+, you are actually configuring Google Sign-In

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

  2. From the Configure Providers page, click Google+.

  3. Click the green Configured button to display the Google is currently enabled dialog box:

  4. To change the Google+ configuration, click Modify These Settings.

  5. In the Google dialog box, change the Client ID and/or Client Secret as needed, and then click Save:

  6. Click Close.

Although you can modify your Google Sign-In settings, you cannot delete those settings. If you delete the settings and then try to save your changes, you’ll see the following error message:

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


Remove Google Sign-In as a social login provider

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

  1. Log on to your Social Login 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 Google icon.

  6. Scroll to the bottom of the page, select Save and Publish, and then click Publish. Google no longer appears in the sign-on widget.


📘

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.

Updated almost 3 years ago