实现 Google 第三方授权登录

这篇文章距离上次修改已过1107天，其中的内容可能已经有所变动。

最近做项目要实现Google的第三方登录，这简单的记录一下。

目前Google的第三方登录有很多方案，且官方提供SDK方便接入。但是我这个项目同时要实现网页和客户端。所以选择了 Google OAuth 2.0 的方案。

当然，也可以《实现 Facebook 第三方授权登录》

Google 的 OAuth 2.0 流程

配置 Google Cloud Platform

首先访问 Google Cloud Platform 控制台

地址：https://console.cloud.google.com/projectselector2/home

开始创建 Google Cloud Platform 项目

OAuth 同意屏幕

在左边的侧边栏中选择 API和服务

进入API和服务页面

注意：测试账户只能添加不能删除且限制100个

设置 OAuth 同意屏幕流程（建议查看大图）

网域验证

设置网域验证

配置完成的样式

凭据

客户端ID用户用户登录，密钥用于服务器验证Token是否有效以及获取用户信息

设置凭据

获取登录地址

大致的流程

Google的文档其实写的很清楚了：传送门

生成临时的用户ID主要是为了识别触发OAuth登录的用户。这里最好还是后端服务器生成。

主要说的是如何生成Google的登录链接，下面是一个生成好的登录链接。

https://accounts.google.com/o/oauth2/v2/auth
?scope=https://www.googleapis.com/auth/userinfo.email
&include_granted_scopes=true
&response_type=token
&state=3EAB37D9D5310BFE
&redirect_uri=https://www.idzd.top/oauth
&client_id=858244192640-2t7giod7t0rmbc36tel1fl50ppqn7s8e.apps.googleusercontent.com

一个生成好的登录链接

参数	说明
scope (必须)	需要用户给予的权限，这里只要了用户的邮箱
include_granted_scopes	增量授权，即获得用户以前给予的所有权限
response_type (必须)	返回的授权码类型，这里用的token
state	用来维护授权请求和授权服务器的响应之间的状态的任何字符串值
redirect_uri (必须)	确定用户完成授权流程后API服务器将用户重定向到的位置
client_id (必须)	应用程序的客户端ID

验证Token

好的，我们已经成功登录了，现在得到了一个回调地址

https://www.idzd.top/404
#state=3EAB37D9D5310BFE
&access_token=ya29.a0AfH6SMB3rFcyq-d8NW3IlCriJvdpPY9Qy29TtMSnuwZ9wVXgGpfDCNBqZvnoKrrcDipoP9A234KtdKpDdXbyzOVp_1PbLbyIMjO5Hx5c_vm0A9PWDTIfXfmwVsugPlUp8VcRCNHnsXVwds2GT
&token_type=Bearer
&expires_in=3598
&scope=email%20openid%20https://www.googleapis.com/auth/userinfo.email
&authuser=0
&prompt=none

回调地址

其中 access_token 和 state 是关键，

为了严谨，前台会比对 state 的值和生成登录地址时返回的值是否一致，来验证会话的一致性。但是一般前台页面很难安全的保存这个信息。

好的，现在把 access_token 和 state 发回给后端，让他验证token是否有效吧~

后端GET这个地址，获取用户的邮箱：

https://www.googleapis.com/oauth2/v2/userinfo
?access_token=ya29.a0AfH6SMB3rFcyq-d8NW3IlCriJvdpPCNBqZvnoKrrcDipoP9A234KtdKpDdXbyzOVp_1PbLbyIMjO5Hx5c_vm0A9PWDTIfXfmwVsugPlUp8VcRCNHnsXVwds2GT

通过令牌可以获取用户的信息，比如邮箱，昵称，头像等等

{
  "id": "XXXXXXXXXXXXXXXXX",
  "email": "dingzd1995@gmail.com",
  "verified_email": true,
  "picture": "https://lh3.googleusercontent.com/a-/AOh14GjW7-O4rqIeKtGB_rorN6KIDYd6fRzaEaPYPoKV=s96-c"
}

OK，到这步，就直接根据邮箱和id，来建立对应的账号关系就可以了~