Integrate Google Signup and retrieve profile information from Google using OAuth2.0 for Web Applications - Digital Solutions, IT Services & Consulting - Payoda

Integrate Google Signup and retrieve profile information from Google using OAuth2.0 for Web Applications

Signing up into an application using Google has now become a preferable option for users as it avoids remembering passwords. It also ensures that users creating an account in the application use a valid email and the authentication part is taken care of by Google.

Let’s look into the steps which are required to integrate Google Signup.

Steps:

  • Create a project in Google developer console
  • Create oAuth client ID
  • Use the code snippet given below in your web application.

Create a project in Google developer console

Create a project in https://console.cloud.google.com/ by signing in using your email Id. You will have an option to create a project. Fill in the project name, organization name, and location and proceed to create a project.

Create oAuth client ID:

To use OAuth 2.0 to access Google API, we must create authorization credentials. Following are the steps to create credentials for the project, which can be used to access APIs that have been enabled for the created project in the Google developer console. Make sure to fill the OAuth Consent Screen before creating the Client ID

A client ID and client secret will be generated. Take a note of it. Client Secret will be needed only for server-side operations.

Code to integrate Google Signup:

Add the below to the signup HTML page.

Add the below javascript code to the script file included.

The profile information returned by Google can then be sent to the Backend API to create an account on the server-side.

Summary:

The profile information returned includes first name, last name, and email. We can request additional information(for example, the user’s phone number) by including additional scopes. The users will be asked for consent to share any additional information. If the user grants permission for the new scope, an authorization code is returned which can be exchanged for a token containing all scopes the user has granted.

Leave a Reply

Your email address will not be published. Required fields are marked *

18 − 5 =