JavaScript - 实施最新的 Google 登录

Question

I'm looking at the google docs:我在看谷歌文档：

https://developers.google.com/identity/gsi/web/reference/js-reference?hl=de https://developers.google.com/identity/gsi/web/reference/js-reference?hl=de

but they are useless as always what google provides, this is what I tried so far:但它们一如既往地提供谷歌提供的东西是无用的，这是我到目前为止尝试过的：

var startApp = function() {
    window.onload = function () {
        google.accounts.id.initialize({
          client_id: googleSignInClientId,
          callback: handleCredentialResponse
        });
        google.accounts.id.prompt();
        google.accounts.id.renderButton(document.getElementById("button_google_login"), {
            theme: 'outline',
            size: 'large',
            click_listener: onClickHandler
          });
      };
};

function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

var initGoogleDone = false;
function initGoogle(){
    if(!initGoogleDone){
        initGoogleDone = true;
        startApp(); 
    }
}

function open_signin() {
    initGoogle();
    $('#lightbox').fadeIn('fast');
}

When I click on button_google_login , nothing happens, and I don't know how exactly to use the callback: handleCredentialResponse since there are no examples当我点击button_google_login时，没有任何反应，而且我不知道如何使用回调： handleCredentialResponse ，因为没有示例

Answer 1

I just tested this and requests authorization and outputs the Id token jwt in the console.我刚刚对此进行了测试并请求授权并在控制台中输出 Id 令牌 jwt。

Just make sure if you are testing with localhost that you have added只要确保您是否正在使用已添加的本地主机进行测试

http://localhost

In JavaScript origin without the port.在 JavaScript 原点没有端口。

<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
    function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
        var tokens = response.credential.split(".");
        var payload = JSON.parse(atob(tokens[1]));  
        console.log(`user id ${payload.sub}`)
        console.log(`user name ${payload.name}`)
        console.log(`user picture ${payload.picture}`)
    }
    window.onload = function () {
        google.accounts.id.initialize({
            client_id: "[REDACTED]",
            callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
    }
</script>
<div id="buttonDiv"></div>

</body>
</html>

what is a JWT什么是 JWT

The response.credential field is the ID token as a base64 encoded JSON Web Token (JWT) string. response.credential 字段是作为 base64 编码的 ID 令牌 JSON Web 令牌 (JWT) 字符串。

A JWT or Json web token is the response from the signin process JWT 或 Json web 令牌是登录过程的响应

If you take this value and place it in https://jwt.io/ you can see the claims that are being returned by the authorization server.如果您获取此值并将其放在https://jwt.io/中，您可以看到授权服务器返回的声明。

This claim set defines the user who has signed in to your application and gives you some interesting information about them.此声明集定义了已登录到您的应用程序的用户，并为您提供了一些有关他们的有趣信息。

{
  "iss": "https://accounts.google.com",
  "nbf": 1674833031,
  "aud": "[Audience your client id]",
  "sub": "117200475532672775346",
  "email": "[REDACTED]",
  "email_verified": true,
  "azp": "[REDACTED]",
  "name": "Linda Lawton",
  "picture": "https://lh3.googleusercontent.com/a/AEdFTp46WTOIbHj5Nl1VJRFf4Izj9YrX61i75F16H1qSA1Q=s96-c",
  "given_name": "Linda",
  "family_name": "Lawton",
  "iat": 1674833331,
  "exp": 1674836931,
  "jti": "3aaf07a28c84796145ce49c490e14dffe3328779"
}

This is standard with all authencation servers.这是所有身份验证服务器的标准配置。

The JWT is in three parts, header, payload and signature. JWT分为三部分，header、payload和signature。 they are joined by a.他们加入了一个。

My code splits the jwt by the.我的代码将 jwt 拆分为。

var tokens = response.credential.split(".");

Then parses the payload然后解析payload

var payload = JSON.parse(atob(tokens[1]));

Resulting in导致

 console.log(`user id ${payload.sub}`)
 console.log(`user name ${payload.name}`)
 console.log(`user picture ${payload.picture}`)

JavaScript - 实施最新的 Google 登录

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-27 13:54:18

what is a JWT什么是 JWT

JavaScript - 实施最新的 Google 登录

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-27 13:54:18

what is a JWT什么是 JWT

解决方案1
0 已采纳 2023-01-27 13:54:18