Google第三方登录实现(web前后端分离)

/ 0评 / 0

关于google第三方登录的实现,google官方有非常完善的文档,这里主要是整理,以一种最简单的,前后端分离的方式实现。

创建项目

创建项目填入Project Name就可以非常简单的完成项目的创建

创建OAuth Client ID

控制面板可以创建和查看App的相关信息
新创建的App需要在这里生成一个OAuth Client ID,如果App还没配置,创建的时候可能会提示配置OAuth consent screen,点击配置,在配置页面填写下Application name保存即可。

生成OAuth Client ID

创建的时候选择Web application,注意填写Authorized JavaScript origins,就是前端项目的域名,回调地址可以先不填。

生成OAuth Client ID

这样我们就有了需要的Client IDClient Secret

获取id_token

前端代码

修改meta中的YOUR_CLIENT_ID为申请的应用的Client ID,这样就可以获取到我们需要的id_token了,将id_token以请求参数传递给后端验证就可以完成整个登录流程了。如果需要的话,我们也可以直接在前端获取到access_token。下边代码会打印id_tokenaccess_token,可以在控制台查看。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <title>test google</title>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
<script>
    function onSignIn(googleUser) {
        console.log(googleUser.getAuthResponse().id_token);
        console.log(googleUser.getAuthResponse(true).access_token);
    }
</script>
</html>

后端代码(PHP)

后端提供接口,使用google提供的api验证id_token就可以了

先安装官方包

composer require google/apiclient
$client = new Google_Client(['client_id' => $CLIENT_ID]);
$payload = $client->verifyIdToken($id_token);
if ($payload) {
//验证成功
  $userid = $payload['sub'];
} else {
  //验证失败
}

其它语言实现可参考官方文档

这样就非常简单的完成了google第三方登录的流程。

如果还有其它不清楚的地方,可以查看官方文档的说明,相对来说,google的文档还是比较简单清晰的。

相关文章:
Facebook第三方登录
Twitter第三方登录

发表评论

电子邮件地址不会被公开。 必填项已用*标注