12

I am trying to integrate the new Google Identity API in my project. I have a custom button lets say a div.

<div class="cust1" onclick="triggerGoogleSignIn">Sign in with Google</div>

Now I want Sign in to happen only on click of this button. I checked the documentation and tried g_id_signin class renderButton method.

But these methods are replacing my custom button look.

triggerGoogleSignIn(){
  ????
}

What method should I call?

Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86
Prabhu
  • 121
  • 1
  • 3

3 Answers3

5

In order to get an accesstoken for authorization during your Google API calls, you first authenticate through a OAuth2.0 flow using the following steps:

After loading the library,

<script src="https://accounts.google.com/gsi/client" async defer></script>

you initialize the client by calling :

const tokenClient = google.accounts.oauth2.initTokenClient({
  client_id: "YOUR_GOOGLE_CLIENT_ID",
  scope: "THE_REQUESTED_SCOPES",
  prompt: "SELECT_A_PROMPT_OPTION", // '' | 'none' | 'consent' | 'select_account'
  callback: handleCredentialResponse // your function to handle the response after login. 'access_token' will be returned as property on the response
});

In order to request a new access token, call requestAccessToken.

const overrideConfig = {
  prompt: "SELECT_A_PROMPT_OPTION", // '' | 'none' | 'consent' | 'select_account'
}
tokenClient.requestAccessToken(overrideConfig) // open the prompt, overrideConfig is optional

Types can be found here and installed by executing npm install --save-dev @types/google.accounts

If you need an id_token for authentication to sign in into your own application, you can opt for the Sign In With Google button.

If you want to render your own button and trigger the authentication flow through javascript, use the following steps:

Include the client library in your head tag

<script src="https://accounts.google.com/gsi/client" async defer></script>

After loading the library, you initialize with your client_id, and set a callback to handle the response after sign in.

function handleCredentialResponse(response) {
  var id_token = response.credential // validate and decode the JWT credential, using a JWT-decoding library
}

window.onload = function () {
  google.accounts.id.initialize({
    client_id: "YOUR_GOOGLE_CLIENT_ID",
    callback: handleCredentialResponse
  });
}

To sign in, just call the prompt.

google.accounts.id.prompt();

Types can be found here and installed by executing npm install --save-dev @types/google-one-tap

W.S.
  • 1,401
  • 1
  • 7
  • 9
  • 1
    As you said,on load i have initialised the google library and then on click of my custom button i called `google.accounts.id.prompt();` but the google sign in redirect/prompt never opened – Prabhu May 19 '22 at 13:08
  • Thanks for the reply as you said i have implemented in the above manner and got the access token in the response.One doubt i have is, in older google lib implementation we were passing access_token and id_token for validation in our backend api.Is there any way to get get id_token similar to access_token – Prabhu Jun 01 '22 at 14:56
  • I updated the answer with steps you need to follow to get an id_token. – W.S. Jun 01 '22 at 20:23
  • Thanks for the reply. i have followed the above steps but still iam not able to get the expected result. 1.I have a custom button,so if i use renderButton method over my custom button.My button is getting replaced with the google provided button. 2.So as you said, by calling method "requestAccessToken" on click of my custom button i was able to get my access token .Now in similar way,is there any other method which i can call to get the id_token too.since initialising and then rendering the button via "renderButton" is replacing my custom sign in button. – Prabhu Jun 02 '22 at 07:03
  • Don't use the `renderButton` function. Only initialize the client through `google.accounts.id.initialize(...)` and add a 'clickevent'-listener to your custom button in which you call the prompt `google.accounts.id.prompt();` – W.S. Jun 02 '22 at 07:09
  • As you said on triggering the prompt method i was able to see the "one tap" prompt modal.But if i want like redirect mode (where i select my account and gets redirected to my site) what should i do? – Prabhu Jun 02 '22 at 08:00
  • 1
    I guess, you talking about implementing your own OAuth 2.0 flow? Guidelines can be found here: https://developers.google.com/identity/protocols/oauth2/openid-connect#python – W.S. Jun 02 '22 at 08:17
  • This is confusing as heck from an implementation standpoint, where their original Sign in with Google was very straight-forward and a clean flow (allowing wide integrations). While this answer kind of sheds some light, I am not sure how long `google.accounts.oauth2.initTokenClient` will exist after march31st. – IncredibleHat Feb 21 '23 at 21:57
0

when the js of 'https://accounts.google.com/gsi/client' loaded success first step, you can set a client to got the result

    client = window.google.accounts.oauth2.initTokenClient({
      client_id: clientId,
      scope: 'https://www.googleapis.com/auth/contacts.readonly',
      callback: tokenResponse => handleCredentialResponse(tokenResponse),
    })

second step, when you click the button of your customise

client.requestAccessToken()

finally, you can got the result in the function of handleCredentialResponse

liubility
  • 31
  • 1
-1

According to documentation:

To support a clear separation of authentication and authorization moments, simultaneously signing a user in to your app and to their Google Account while also issuing an access token is no longer supported.

It looks like with Google Identity Services you can get JWT token within browser only with Sign In With Google

Sergey Oleynikov
  • 409
  • 5
  • 5