Skip to main content

Sign in with Google

Today we implement sign in with google using client side. Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account—the same account they already use with Gmail, Play, Google+, and other Google services. Setup Involved in the Google Sign-In

  1. Sign In With Google Setup
  2. OAuth Consent Screen
  3. Credentials
  4. Code Generator
  5. Add Script to HTML Page
  6. Login Function
  7. Sign Out Function
How sign in with google works?
  • The user clicks the sign-in button.
  • The Google Sign-In button opens a Google sign-in dialog.
  • The user signs in with their Google account.
  • The Google sign-in dialog closes.
  • The user is signed in to the application.
  • The sign in function return three thing id_token, access_token, profile.
  • id_token is used to verify the user.
  • access_token is used to access the google services.
  • profile is used to get the user information.
What if the user click signin button & using a plugin to send the fake email to server?

When user click on the sign in button. The google send a response in the network request that contains the id_token, access_token, profile. If the user is using a plugin to send the fake email to the server. The server will get the fake email and the user will be able to access the application. so that way we need to verify the user using the id_token that is provided by the google to verify the user is real or not from server.

  1. Go to Sign In With Google Setup and register a project.
  • Click on the Left Side bar Setup Option or a direct link to the Google APIs console Setup Page
  • Click on the + button to create a new project.
    • Fill in the project name and click on the Create button.
    • Click on the Configure Project button.
    • Click on the Web option.
    • Fill in the Project Name and click on the Next button.
    • Fill in the Authorized JavaScript origins and Authorized redirect URIs and click on the Create button.

Then, add the script to the HTML page

<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function loginFromGoogle(data) {
    Auth.loginFromGoogle(data)
}
</script>
  1. OAuth consent screen setup in Which Two User Types are there
    • Internal (Only for users in your organization)
    • External (For users outside your organization)
      info
    • For Internal Users, you don't need to verify the domain. Only the users in your organization can access the application.
    • For External Users, you need to verify the domain.But in local development, you can use the localhost domain. :::
    • Fill in the Application Details and click on the Save button.

Credentials​

  1. Create Credentials in Which Two User Types are there
    • OAuth Client ID
    • API Key
    • Click on the Create Credentials button.
    • Select the OAuth Client ID option.
    • Select the Web Application option.
    • Fill in the Name and Authorized JavaScript origins and click on the Create button.
    • Copy the Client ID and Client Secret.

Code Generator​

Let's add in the login form the Button that you can create with the Cpde Generator.

  • Code Generator is used to generate the configuration code, that help to integrate the Google Sign-In using client ID.
  • Fill in the Client ID and click on the Generate Code button.
  • Copy the generated code and paste it into the HTML page.
<div id="g_id_onload"
    data-client_id="YOUR ID HERE"
    data-context="signin"
    data-ux_mode="popup"
    data-callback="loginFromGoogle"
    data-auto_select="false"
    data-itp_support="false">
</div>

<div class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="outline"
    data-text="signin_with"
    data-size="medium"
    data-logo_alignment="left">
</div>