前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第三方登录(2)---GitHub登录

第三方登录(2)---GitHub登录

作者头像
创译科技
发布2019-06-02 21:08:45
1.7K0
发布2019-06-02 21:08:45
举报
文章被收录于专栏:Node开发

上一篇介绍了如何实现第三方QQ登录,其实都不涉及后端。在前端使用js就可以实现第三方QQ登录。然后如果有数据库操作可以发起ajax请求将登录得到的用户信息发给后端,在后端对用户信息进行保存。第三方登录(1)---qq登录 。今天,我要讲讲第二种第三方登录方式:GitHub登录。很多人已经都听过GitHub这个IT开源平台,而且其实如果我们网站用户主要面向于IT类的,这时候使用GitHub第三方登录就会极度简化用户注册操作。接下来说说如何实现GitHub第三方登录。我们先看看具体流程:

申请应用

首先我们需要登录GitHub,我们一样需要申请一个应用获取app_idapp_secret

1.注册OAuth Application

进入GitHub官网https://github.com/,点击右上角头像,选择setting。

进入setting后选择developer setting

选择new OAuth app

前面三个参数可以随意填写,第四个参数很重要,是回调URL,这个一定不能填写错,一般填写你网站首页地址,也就是我博客主页地址https://www.niyueling.cn,填写完成点击Register application

注册应用成功后,可以得到你应用的Client ID, Client Secret,然后到这里注册成功。

操作步骤

注册好应用后,其实就可以开始代码实现了。其实只需要三步就可以实现GitHub第三方登录了。

1.登录界面点击GitHub登录按钮重定向到https://github.com/login/oauth/authorize

2.前端获取到code传给后端获取access_token

3.根据access_token获取用户信息并返回给前端;

授权并获取code

首先,我们在登录界面login.html放置一个GitHub登录按钮,点击登录按钮重定向到https://github.com/login/oauth/authorize进行授权。这个url需要附带两个参数,一个为client_id,这个参数注册应用可以得到。另一个就是我们注册应用设置的回调地址。用户授权成功就会跳转到我们设定的回调地址。现在来看下代码:

可以看到我们在这里设置了一个a标签,点击a标签会重定向到GitHub授权界面。我们携带client_idredirect_uri参数,用户授权成功就会跳转到我们设置的回调界面并且携带code参数,这时我们的第一步操作就大功告成。现在我们来测试下看看能否成功获取到code

我们可以看到我们访问http://www.niyueling.cn显示一个GitHub登录图标。我们点击图标会重定向GitHub授权界面,其中会携带client_idredirect_uri参数,我们输入账号密码点击授权,就会回调到我们设置的回调界面,并且携带code参数。

我们可以看到,我们在授权界面成功登录后会回调到我们的回调界面,并附加code参数。我们需要取到urlcode,然后开始第二步操作。我这里测试所以简单的直接对页面加载时进行监听,取到url中的code参数

通过code获取access_token

官方文档对获取access_token接口的介绍

可以看到,我们通过code去获取access_token有三个必传参数。client_idclient_secret来源于我们申请应用成功可以获得。code我们上一步操作已经获得。因为涉及client_secret秘钥,所以我们需要把获取access_token参数放在后端趋势线,然后前端调用后端接口进行获取access_token。首先我们先来实现后端代码:后端需要发起post请求获取access_token接口,以json格式将三个必传参数传参。如果code未被使用,则接口会返回access_code.

可以看到在后端我发起了一个post请求,请求

https://github.com/login/oauth/access_token接口,同时携带三个参数,以json格式传输。我们可以看到调用后端接口能否成功获取到access_token.

可以看到我们将第一步取到的code以及两个秘钥参数窜给我们后端写的获取access_token接口,我们成功获取到access_token.现在前端发起ajax请求这个后端接口,将code值传给后端,获取到access_token.

前端在第一步获取到code之后,发起ajax请求后端获取access_token,并且打印access_token的值,我们在浏览器端测试看看是否有效果。

可以看到我们成功在前端获取到access_token,接下来最后一步操作:通过access_token获取用户GitHub账户个人信息。我们看看官方文档的接口介绍:

写的其实很清楚,直接发起get请求,然后将access_token附加在url后面,就可以取得用户的GitHub账户个人信息。我们一样在后端实现发起get请求获取用户数据

后端代码和获取access_token基本类似,在这里我就不详细说了。我们测试下能否取得用户个人信息。

可以看到我们成功获取到用户个人信息,最后前端发起ajax请求调用后端的获取用户信息接口

我们发起ajax请求后端获取用户数据的接口,然后获取到用户数据后直接在界面显示出来。我们可以测试下整体的效果:

可以看到我们已经成功获取到登录的GitHub账号的个人信息了。到这里实现GitHub第三方登录。其实整套逻辑其实前端只需要一个简单的登录界面,后端实现两个接口。就可以实现GitHub第三方登录。下一篇主要讲讲如何实现微博账号第三方登录。

谢谢观看,希望我的文章能够对你有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序猿周先森 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.注册OAuth Application
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档