专栏首页Node开发第三方登录(2)---GitHub登录

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

上一篇介绍了如何实现第三方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第三方登录。下一篇主要讲讲如何实现微博账号第三方登录。

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

本文分享自微信公众号 - 程序猿周先森(zhanyue_org),作者:逆月翎

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单理解Token机制

    互联网发展到现在已经到了一个非常成熟的时代,所以不再是一个你写一个静态网站就可以进行疯狂盈利的时代了。现在对产品有着很多的要求,健壮性,安全性这...

    逆月翎
  • NodeJS require()源码解析

    最开始谈NodeJS的时候写过一篇文章谈了它与Java各自的优缺点。NodeJS最早的定位是什么样的呢?最早开发者Ryan Dahl是想提升自...

    逆月翎
  • 第三方登录(3)---微博登录

    我们在前面实现了使用QQ账号以及GitHub账号进行第三方登录。有兴趣的可以看看前两篇文章:

    逆月翎
  • 业界 | GitHub发布代码运行平台Actions及2018年度报告

    欧洲反垄断局表示,他们确定「二者合并后将继续面临来自其他同行的持续、激烈竞争。」当局也不担心微软会「破坏 GitHub 的开放性」,他们指出,如果微软对该平台的...

    机器之心
  • GitHub 发布了一款重量级产品,可直接运行代码!

    在昨日举行的GitHub Universe 2018开发者大会上,GitHub发布了一款重量级产品:GitHub Actions,可直接运行部分代码的产品,彻底...

    Java技术栈
  • GitHub 发布了官方 App,还打算冰封你的代码一千年

    官方 App 终于来了,在手机上就可以 Review 代码、处理 Issues、合并 PR 等常用操作。让你无论身处何处,都可以灵活地推进工作并与团队保持联系(...

    张凯强
  • GitHub重磅年度报告:JavaScript最热,中国开发者贡献稳居第二

    在昨日举行的GitHub Universe 2018开发者大会上,GitHub发布了一款重量级产品:GitHub Actions,可直接运行部分代码的产品,彻底...

    新智元
  • GitHub 2018年度报告 | 万万没想到你是这样的程序员

    最为全球最大的开源软件开发与管理社区,GitHub在每年十月都会推出“Octoverse”报告,想知道全球三千一百多万程序员们这一年来都做了些什么? 当前社区的...

    CDA数据分析师
  • NetAPP F3020存储自动重启修复方法

    最近修复了Netapp F3020,结果用着用着发现存储自动重启了,查看日志发现以下原因:

    木子-Lee
  • GitHub重磅更新!免费无限创建私有代码库

    之前的私有库是收费的,现在可以免费使用了!每个仓库最多可以有三个协作者,如果想要更多的协作者,就需要付费

    沈唁

扫码关注云+社区

领取腾讯云代金券