谷歌app第三方（实现 Google 第三方授权登录）

最近做项目要实现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.xxx.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": "xxxx1921295@qq.com", "verified_email": true, "picture": "https://lh3.googleusercontent.com/a-/AOh14GjW7-O4rqIeKtGB_rorN6KIDYd6fRzaEaPYPoKV=s96-c" }

JSON

OK

   

   

   

   

  ，到这步     

     

     

     

     
，就直接根据邮箱和id  




  




  




  




  




，来建立对应的账号关系就可以了~