实现 Google 第三方授权登录

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

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

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

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

Google 的 OAuth 2.0 流程Google 的 OAuth 2.0 流程


配置 Google Cloud Platform

首先访问 Google Cloud Platform 控制台

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

开始创建 Google Cloud Platform 项目开始创建 Google Cloud Platform 项目


OAuth 同意屏幕

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

进入API和服务页面进入API和服务页面

设置 OAuth 同意屏幕流程(建议查看大图)设置 OAuth 同意屏幕流程(建议查看大图)


网域验证

设置网域验证设置网域验证

配置完成的样式配置完成的样式


凭据

设置凭据设置凭据


获取登录地址

大致的流程大致的流程

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,来建立对应的账号关系就可以了~

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》