网站侧接入google一键登录

近期发现不少网站的google一键登录功能，交互UI简单明快，特地尝试一下。发现是一步验证。不是之前的两步验证(access_token+token的形式)

KH.

1915人浏览 · 2023-09-22 16:52:51

KH. · 2023-09-22 16:52:51 发布

前言：近期发现不少网站的google一键登录功能，交互UI简单明快，特地尝试一下。发现是一步验证。不是之前的两步验证(access_token+token的形式)

使用Google登录按钮

界面UI

google developers指南生成HTML代码，在启用了Google登录的产品登录界面替换现有谷歌登录按钮，代码如下：

<div id="g_id_onload"
    data-client_id="xxxxx.apps.googleusercontent.com" #google API凭据客户端ID
    data-context="signin"
    data-callback="handleCredentialResponse" #谷歌登录javascript回调>
</div>

<div class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="outline"
    data-text="signin_with"
    data-size="large"
    data-logo_alignment="left">
</div>
// google一键登录依赖的库文件大小：74.4KB
<script src="https://accounts.google.com/gsi/client" async defer></script>

参数补充说明:

data-context：更改一键登录上下文,可以更改context属性以创建不同的措辞集

signin	“使用Google登录”
signup	“注册Google”
use	“与Google一起使用”

各属性含义

属性	含义	效果
data-client_id	应用的客户端 ID，同配置的谷歌登录client_id	-
data-auto_prompt	展示登录按钮时，是否展示一键式登录提示框，谷歌官方的建议是不要同时使用。	-
data-context	用于更改一键提示中显示的标题和消息的文本
data-callback	处理返回的 ID 令牌的 JavaScript 函数，已实现，可全局调用	-
data-type	按钮类型：图标或标准按钮。
data-shape	按钮的形状。例如，矩形或圆形。
data-theme	按钮主题。例如，filled_blue 或 filled_black。
data-text	按钮文字。例如，“使用 Google 帐号登录”或“使用 Google 注册”。
data-size	按钮大小。例如，“小”或“大”。
data-logo_alignment	Google 徽标对齐方式：左对齐或居中。
data-width	按钮宽度（以像素为单位）。
data-locale	按钮文字以此属性中设置的语言呈现。

具体参考谷歌官网文档，解释得比较全面：https://developers.google.com/identity/gsi/web/reference/html-reference#element_with_class_g_id_signin

前端谷歌回调

*谷歌提供了页面重定向和js函数回调的方式响应登录，由于需要拼接GA分析参数，故而需要采用前端js回调。
*

// 新版谷歌登录callback函数 拼接GA分析参数
    function handleCredentialResponse(res) {
        
        $.ajax({
                type: "POST",
                url: "/user/login/new-google-callback",
                async: true,
                data: {
                    "JWT": res,
                },
                success(res) {
                    location.href = res.url;
                },
                erroe() {
                    location.href = '/user/login';
                }
            });
    };

后端处理

#基于php语言的代码示例
use Google_Client；

$CLIENT_ID = "你自己的google的客户端id";
$client = new Google_Client(['client_id' => $CLIENT_ID]);
$postData = $request->post();
$google_token = $postData['JWT'];
$google_userinfo = $client->verifyIdToken($google_token['credential']);

if ($google_userinfo) {
  $userid = $google_userinfo['sub'];
  $id = $google_userinfo['sub'];
  $google_sub_id = $google_userinfo['sub'];
  $full_name = !empty($google_userinfo['name']) ? $google_userinfo['name'] : '';
  $email = !empty($google_userinfo['email']) ? $google_userinfo['email'] : '';
  $avatar = !empty($google_userinfo['picture']) ? $google_userinfo['picture'] : '';
  // If request specified a G Suite domain:
  //$domain = $google_userinfo['hd'];
} else {
  // Invalid ID token
}