Configure Login With Google

Description

Instructions on how to setup a Google Developers Console project to add Login with Google functionality to your application.

Discussion

Summary of Step 

In summary, the steps you must follow are:

  1. Either create a new Google Developers Console project or select an existing project.

  2. Configure the Google OAuth consent screen.

  3. Select the required scopes.

  4. Create OAuth client Id credentials.

  5. Set the Authorized Redirect URIs.

  6. Save the settings.

You will then get your Client ID and Secret which you will need to configure the UX component that you are using for Login.

Detailed Description of Steps 

Here is a detailed, step by step description (the actual screens in the Google Developer console may be different if Google had made changes since this document was written).

  1. 1. Go to the Google Developer console. (https://console.cloud.google.com/)

  2. Create a new project. Click the dropdown arrow. (You can select an existing project if you prefer).

    Google Cloud Platform Project
    Google Cloud Platform Project
  3. A list of all of your existing projects will be shown. Click the NEW PROJECT button to create a new project.

    New Project Button
    New Project Button
  4. Give your project a name and then Click the CREATE button.

    Name your project
    Name your project
  5. Make sure your new project is selected (if not, click the down arrow and select your new project), then select Home, Dashboard.

    images/googleLogin4.jpg
  6. Next, click APIs & Services.

    images/loginwithgoogle10.jpg
  7. Click the Key icon to display the menu and then select the OAuth consent screen menu.

    images/loginwithgoogle11.gif
  8. Select the type you want and then press the CREATE button.

    images/loginwithgoogle12.jpg
  9. Fill in the required fields. The App name is the name that will appear on the OAuth consent screen. You should pick a name that will be meaningful to your users.

    images/loginwithgoogle13.jpg
  10. You will also need to specify your email address:

    images/loginwithgoogle30.jpg
  11. Click the SAVE AND CONTINUE button to move onto the next step - defining Scopes. The breadcrumbs at the top of the screen will show you what step you are on.

    images/loginwithgoogle35.jpg
  12. Click the ADD OR REMOVE SCOPES button to set the scopes for the OAuth flow. The only scope need for login is email.

    images/googleLogin40.jpg
  13. Check the ../auth/userinfo.email scope, then scroll the page if necessary until you see the UPDATE button.

    images/googleLogin41.jpg
  14. Click the UPDATE button to to close the Scopes panel and then scroll the page if necessary until you see the SAVE AND CONTINUE button.

  15. Click the SAVE AND CONTINUE button as many times as needed until you see the BACK TO DASHBOARD button and then click the BACK TO DASHBOARD button to return to the Dashboard.

  16. Next, select the Credential menu item from the fly out menu on the left.

  17. On the Credential screen, click the CREATE CREDENTIALS button.

    images/googleLogin42.jpg
  18. Select OAuth Client ID as the type of credential you want.

  19. Next select the Application type. Select Web application.

    images/loginwithgoogle50.jpg
  20. You will be prompted for the Name. You can use the default name.

  21. Next, specify Authorized redirect URIs. Authorized redirect URIs are case sensitive.

    For testing your application using the LiveTest feature in Alpha Anywhere you can enter this value:

    http://localhost:<your port number>/__liveTest/__a5LoginWithGoogle.a5w

    If your server is configured to use port 80, you can enter this value:

    http://localhost/__liveTest/__a5LoginWithGoogle.a5w

    You will also need to enter a redirect URI for your published application. So for example, assume that your host name for your published application is:

    https://myApplication

    you would need to specify

    https://myApplication/__a5LoginWithGoogle.a5w

    as another redirect URI.

    images/loginwithgoogle71.jpg

    The Authorized redirect URIs are case-sensitive.

  22. Once you have entered the Authorized redirect URIs, click the CREATE button. You will then get a screen showing the Client ID and Secret.

  23. Copy the Client ID and Secret. You will need them to configure your Login UX component.

    images/loginwithgoogle81.jpg
  24. Next, open your Login UX component. Turn on the Allow login using Google property. Then click the smart field for Google settings and enter the Client ID and Secret.

    images/loginwithgoogle91.jpg

Videos 

Login using Google

When you configure a UX component as a Login Component you can enable Login with Google to allow users to login using the Google credentials.

2022-03-20

See Also