如何将令牌发送到 Google 登录上的 php 验证器？

Question

因此，我正在尝试在网站中实现 Google 登录，以添加更多安全性和登录方式，在此之前，唯一的登录方式是通过 8-9 位数字作为用户，然后通过4 位数字 PIN，现在，我正在尝试使用公司提供的电子邮件实施 Google 登录。

现在我的 Google 登录按钮工作正常，这就是我所拥有的：

<script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="xxxxxx.apps.googleusercontent.com"
         data-auto_select="false"
         data-itp_support="true"
         data-callback="handleCredentialResponse"
         data-auto_prompt="false"
         data-ux_mode="redirect"
         data-login_uri="http://localhost/verifier.php"
         redirect_uri="http://localhost/verifier.php"
         data-hd="xxx"
         data-locale="vi"
         data-callback="callbackfunction">
    </div>
        <div class="g_id_signin" data-type="standard" data-shape="pill"
            data-theme="outline"
            data-text="continue_with"
            data-size="large"
            data-locale="es-419"
            data-logo_alignment="left">      
        </div>
        <p id="account"></p>
  </body>
  <script>
    function handleCredentialResponse(response) {
      const responsePayload = decodeJwtResponse(response.credential);
      console.log('ID: '+responsePayload.sub); // Do not send to your backend! Use an ID token instead.
      console.log('Name: ' + responsePayload.name);
      console.log('Image URL: '+responsePayload.aud);
      console.log('Email: ' + responsePayload.email); // This is null if the 'email' scope is not present.
      var username = responsePayload.email;
      numerocontrol=numerocontrol.split('@')[0];
      console.log(username);
      document.getElementById('account').innerHTML='welcome '+ responsePayload.name+' /// '+username;
    }
    function decodeJwtResponse(token) {
        var base64Url = token.split(".")[1];
        var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        var jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );

        return JSON.parse(jsonPayload);
    }
  </script>

（脚本只是为了测试它是否正常工作，并正确获取电子邮件的用户名以及带有“帐户”ID 的 p，因为我需要在登录后仅显示已登录的用户）。

从这里开始，我不太确定接下来要做什么，我有点想到将 JWT 令牌发送到 verifier.php 以在服务器端进行验证，并在完成验证后重定向到主页，您可以在其中看到已登录的用户，但我不太确定如何执行此操作，或者需要添加什么，以及 verifier.php 中需要包含什么，截至目前只有这个但不工作：

<?php
require_once 'C:\xampp\htdocs\google-api-php-client--PHP8.0\vendor\autoload.php';
$CLIENT_ID= 'xxxxx.apps.googleusercontent.com'
$id_token: eyJhbGciOiJSUzI1NiIsImtpZCI6IjFhYWU4ZDdjOTIwNThiNWVlYTQ1Njg5NWJmODkwODQ1NzFlMzA2ZjMiLCJ0eXAiOiJKV1QifQ
// Get $id_token via HTTPS POST.

$client = new Google_Client(['client_id' => $CLIENT_ID]);  // Specify the CLIENT_ID of the app that accesses the backend
$payload = $client->verifyIdToken($id_token);
if ($payload) {
  $userid = $payload['sub'];
  // If request specified a G Suite domain:
  //$domain = $payload['hd'];
} else {
  // Invalid ID token
}

?>

在这里，我不太确定 $id_token 变量是什么，不确定它是否是常量或从哪里获取它，我在其他帖子中找到了它，但没有解释它是什么或从哪里获取它.

这会消除错误：

 Parse error: syntax error, unexpected variable "$id_token" in C:\xampp\htdocs\verifier.php on line 4

如果可能的话，我将非常感谢您的帮助和解释。我已经阅读了大量关于如何执行此操作的文档和帖子，但我还没有使其发挥作用，并且有些人不太理解。 而且，为了澄清一下，是的，我需要使用 PHP 和 Google 登录。

Answer 1

在您的代码示例中，您有

data-ux_mode="redirect"

和

data-login_uri="http://localhost/verifier.php"

。因此，

data-callback="handleCredentialResponse"

被忽略。更多信息这里。

基本上，在您的代码示例中，用户登录并表示同意。然后，Google 通过 HTTP

POST

方法请求向

http://localhost/verifier.php

返回 ID 令牌。您可以使用参数名称

POST

访问

credential

主体中的 ID 令牌。

设置

$id_token = $_POST['credential']

值类似于

$id_token

。

您可以在此处找到更多信息。