38.接入github第三方登录

大家好,这里是米洛,一个想和大家一起分享测试开发相关的技术,面试经验和成长经历的博主!

欢迎大家关注我的公众号: 测试开发坑货


背景知识

目前平台维系了自己的一套用户系统,但是有没有觉得每次有新用户都需要手动注册会比较麻烦?在企业中,如果大家所有系统都用一个账号去登录,会不会十分方便呢?

其实企业内部都会有这样的sso系统,实现一个账号共享所有平台。那我们有什么是比较通用的,大家都有的账号呢?

其实有许多,QQ/微信/支付宝这些基本大家都有。不过考虑到接入的难易程度,我这边选择了支持github账号接入。

如果不了解的话,可以搜索对应的关键词: 单点登录、SSO、OAuth

构思

单点登录其实还包括session等部分,但是因为我们只是想通过github拿到用户信息,并不需要它帮我们管理用户登录状态。所以我们接入的话,通过获取用户信息,整合到我们的pity_user表即可。

创建OAuth app

github官方文档: https://docs.github.com/v3/oauth/[1]

  • 进入settings
  • 选择Developer settings
  • 切换到OAuth app

可以看到,我这里申请了2个,一个是local(本地调试用),另一个是线上地址。

  • 点击New OAuth App

注册好了之后就可以查看了!

  • 获取ClientID和ClientSecrets

这2个值记得保存好,稍后会用到

详细接入流程

重定向到login页面

假设我们的首页是https://www.wqrf.com,我们访问首页的时候,由于未登录,会被重定向到登录页。

我们提供一个按钮或者链接叫: 用Github登录,当用户点击这个按钮的时候,我们就跳转到:

进入github认证页面

https://github.com/login/oauth/authorize?client_id=你申请的clientid

如果用户连github都没登录,那么这个页面会变成一个github的登录页,否则会变成一个授权页面,问你是不是要登录这个网站,见下图:

图是未登录github的情况
图是未登录github的情况

通过验证

登录后Github会根据你的clientId生成一个code,重定向到你的主页并带入code参数:

https://www.wqrf.com?code=Github生成的code

获取token

接着我们就通过code+clientid+secret去拿到github的token。

调用github接口

拿到了之后就可以大摇大摆地调用github的接口获取到用户信息了。

总结

等不及的可以看看具体的github使用文档,虽然是英文的,但是很详细。等得及的,可以看我下一篇实操

github最近打开都很慢,会影响登录效果。

参考资料

[1]

https://docs.github.com/v3/oauth/: https://docs.github.com/v3/oauth/