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

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

申请应用

首先我们需要登录GitHub,我们一样需要申请一个应用获取app_id和app_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_id和redirect_uri参数，用户授权成功就会跳转到我们设置的回调界面并且携带code参数，这时我们的第一步操作就大功告成。现在我们来测试下看看能否成功获取到code。

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

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

通过code获取access_token

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

可以看到，我们通过code去获取access_token有三个必传参数。client_id与client_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第三方登录。下一篇主要讲讲如何实现微博账号第三方登录。

谢谢观看，希望我的文章能够对你有所帮助。欢迎关注我的个人公众号：周先生自留地