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
- Go to the Credentials page.
- Click Create credentials and select OAuth client ID.
- Select the Web application type.
- Name your OAuth 2.0 client
- In the Authorized Javascript origins field, add the HTTP origin that hosts your application.
- Enter the redirect URI in case you want users to be redirected to a new path on the successful authentication with Google. The path will be appended with an authorization code by Google.
- Click on the create button.
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.
