CAS单点登录-第三方登录[QQ、微信、CSDN、GitHub]（十四）

置顶 于 2017-10-20 23:45:42 发布
阅读量2.1w 收藏 50
点赞数 9
分类专栏： cas 文章标签： SSO 单点登录 第三方登录 QQ登录 微信登陆
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010475041/article/details/78300586
版权

CAS单点登录-第三方登录[QQ、微信、CSDN、GitHub]（十四）

注: 目前博文使用cas版本为5.1.5，由于5.2.x与5.1.x构建模式有差异，所以部分配置会有些偏差。

本章内容

  • 简答介绍OAuth2
  • 微信登陆
  • CSDN登陆
  • GitHub登陆
  • QQ登陆

#介绍
很多朋友问我，怎么集成QQ、微信、CSDN、GitHub、微博等等第三方登录，所以我也只要简单列一下如何集成第三方登录，当然这次做的demo只做测试教程使用，上线还需要界面的调整以及第三方登录的审核。

目前用的第三方登录几乎都是采用授权的OAuth2协议（有必要了解）

简单来说就是，客户端请求第三方服务，用户在第三方服务登录成功，第三方服务给客户端token，最后客户端采用token可以获取第三方提供的接口

这里写图片描述

#实战

添加依赖

<dependency>
     <groupId>org.apereo.cas</groupId>
     <artifactId>cas-server-support-pac4j-webflow</artifactId>
     <version>${cas.version}</version>
 </dependency>

做了相关配置，会有Pac4j相关的debug信息：

这里写图片描述

CSDN授权登陆

创建应用

登录csdn并且创建应用，我要打开具体地址
这里写图片描述

创建应用具体如下：

这里写图片描述

接口信息

我要查看CSDN官方文档

授权接口

这里写图片描述

由上图可知：

  1. 授权路径为：http://api.csdn.net/oauth2/authorize
  2. appid参数名为：client_id（有些开放平台为app_id、appId等等刚好cas配置的appid的参数名为client_id，若不是需要做调整）
access_token接口

这里写图片描述

由上图可知：

  1. token路径为：http://api.csdn.net/oauth2/access_token
  2. secret参数名为：client_secret（有些开放平台为secret等等刚好cas配置的secret的参数名为client_secret，若不是需要做调整）
用户信息接口

我要查看API文档

这里写图片描述

非常的明显，用户信息接口为：http://api.csdn.net/user/getinfo

该json数据为csdn用户数据的报文数据，具体文档点击

{
	"username":"u010475041",
	"job":"java程序员",
	"workyear":"",
	"website":"",
	"description":"喜欢研究新技术，对大数据处理、系统架构、高并发、支付金融类系统非常感兴趣。平时喜欢旅游、音乐。"
	}

到此CSDN的授权登录所具备的信息基本获取了

SSO配置

application.properties

#CSDN OAuth Login
#appid
cas.authn.pac4j.oauth2[0].id=1100557
#分配秘钥
cas.authn.pac4j.oauth2[0].secret=3687d9d2e9e44bc0b48847d541449c14
#授权接口
cas.authn.pac4j.oauth2[0].authUrl=http://api.csdn.net/oauth2/authorize
#token获取接口
cas.authn.pac4j.oauth2[0].tokenUrl=http://api.csdn.net/oauth2/access_token
#用户信息接口
cas.authn.pac4j.oauth2[0].profileUrl=http://api.csdn.net/user/getinfo
cas.authn.pac4j.oauth2[0].profileAttrs.id=username
cas.authn.pac4j.oauth2[0].clientName=CSDN

打开登录页结果如下：

这里写图片描述

看到如下，恭喜你~

列表内容

GitHub授权登录

而GitHub的授权登录就更为简单了，举一反三~
为什么说简单呢，因为cas为我们准备好了接口信息，不用我们去找了，也就是说，到github申请appid以及获取秘钥即可，哈哈哈哈~

创建应用

点击打开创建应用

这里写图片描述

当然啦，创建成功会给我们分配秘钥的

这里写图片描述

SSO配置

这些就不多说啦~

application.properties

#GitHub OAuth Login
cas.authn.pac4j.github.id=b5f93226ece4b6dcb71b
cas.authn.pac4j.github.secret=34a319d36e5d3bead3c242ffb5172d49511b48fe
cas.authn.pac4j.github.profileAttrs.id=id
cas.authn.pac4j.github.client-name=github

马上重启试试~

### SSO配置

再次恭喜你~
这里写图片描述

微信授权登录

重头戏，这个就稍微跟前面的有点不一样了~

创建应用

授权到测试公众号平台申请测试号，当然有正式的更好。。。

这里写图片描述

其实我们就是要这个效果。。。

我们登录了，测试平台就默认给我们创建了一个应用~

这里写图片描述

设置回调域名

这里写图片描述

这里写图片描述

接口信息

我要打开微信扫描登录文档

授权接口

这里写图片描述

由上图得知：

  1. 授权路径为：https://open.weixin.qq.com/connect/qrconnect
  2. appid参数为：appidcas默认为client_id，需要做调整
  3. 网页授权登录scope=snsapi_login需要做调整
access_token接口

这里写图片描述

由上图得知：

  1. access_token路径为：https://api.weixin.qq.com/sns/oauth2/access_token
  2. appid参数为：appidcas默认为client_id，需要做调整
  3. secret参数为：secretcas默认为client_secret,需要做调整

经过源码com.github.scribejava.core.oauth.OAuth20Service#createAccessTokenRequest的分析
这里写图片描述

很可惜不符合pac4j的默认请求，那么有以下几个解决办法：

  1. 添加一个中转程序，把access_token路径让中转程序接管，中转程序请求到微信，再返回给sso程序即可（推荐）
  2. 修改cas以及pac4j源码，添加自己的部分逻辑（不推荐）
用户信息接口

这里写图片描述

由上图得知：

  1. 用户信息接口为https://api.weixin.qq.com/sns/userinfo

SSO配置

application.properties

#WeChat OAuth Login
cas.authn.pac4j.oauth2[1].id=wxac0f1c863937d067
#由于微信的不为clinet_id，为appid
cas.authn.pac4j.oauth2[1].customParams.appid=wxac0f1c863937d067
#微信scope登录为snsapi_login
cas.authn.pac4j.oauth2[1].customParams.scope=snsapi_login
cas.authn.pac4j.oauth2[1].secret=bfeedc350fe15f45315a0ab67643085e
cas.authn.pac4j.oauth2[1].authUrl=https://open.weixin.qq.com/connect/qrconnect
cas.authn.pac4j.oauth2[1].tokenUrl=https://api.weixin.qq.com/sns/oauth2/access_token
cas.authn.pac4j.oauth2[1].profileUrl=https://api.weixin.qq.com/sns/userinfo
cas.authn.pac4j.oauth2[1].clientName=WeChat

这里写图片描述

哎呀，对不起大家，

  • 获取不到能够成功测试的应用，非常抱歉
  • 没有测试到access_token，非常抱歉
  • 没有提取到用户信息，非常抱歉

QQ授权登录

申请成为开发者
接入文档

qq登录更奇葩，恐怕在cas中做的话就比较吃力了，除非cas开放了自定义OAuth2的配置定义

奇葩1: 开发者审核需要拍照上传。。。
奇葩2: 用户信息返回jsonp(解决办法，通过中转程序来做这个用户信息的适配)
奇葩3: access_token获取报文不是json

这里写图片描述

创建应用

这里写图片描述

SSO配置

#QQ OAuth Login
#QQ OAuth Login
cas.authn.pac4j.oauth2[2].id=101433938
cas.authn.pac4j.oauth2[2].secret=ad4fef7e3fb785a51026aaf78121eff0
cas.authn.pac4j.oauth2[2].authUrl=https://graph.qq.com/oauth2.0/authorize
#原路径
#cas.authn.pac4j.oauth2[2].tokenUrl=https://graph.qq.com/oauth2.0/token
#由于返回非json，做代理转发
cas.authn.pac4j.oauth2[2].tokenUrl=http://localhost:8808/token/qq
#原路径
#cas.authn.pac4j.oauth2[2].profileUrl=https://api.weixin.qq.com/sns/userinfo
#中转帮忙做这个jsonp的转发动作，具体看sso-client-demo/sso-client-proxy-demo模块
cas.authn.pac4j.oauth2[2].profileUrl=http://localhost:8808/user/qq
cas.authn.pac4j.oauth2[2].profileAttrs.id=openid
cas.authn.pac4j.oauth2[2].profileAttrs.client_id=client_id

这里写图片描述

这里写图片描述

温馨提示

OAuth2的参数标准：
这里写图片描述

测试成功：

  • CSDN授权登录
  • GitHub授权登录
  • QQ授权登录

启动模块

  1. sso-config-server
  2. cas-client-demo
  3. cas-proxy-demo
  4. sso-server

测试

测试时发访问http://localhost:8080/sample

注意要点

  1. 微信、QQ第三方登录与标准的OAuth2有些差异，需要进行调整
  2. 测试时需要启动以上所有模块，也可以采用根目录build.cmd run启动所有服务进行测试
  3. 以上仅仅做学习记录参考，在生产用程序需要更加严谨

下载代码尝试：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qYObMI3F-1611805635516)(https://img.shields.io/badge/downloads-v1.6.0_RC2-brightgreen.svg)] 其他版本可以到GitHub或者码云查看

发现一些意外的事情可以考虑翻翻前面的博客进行学习哦

作者联系方式

如果技术的交流或者疑问可以联系或者提出issue。

邮箱：huang.wenbin@foxmail.com

QQ: 756884434 (请注明：SSO-CSDN)

悟空_
关注
  • 9
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值