Node.js实现GitHub第三方登录

之前在《Node.js+express+MySQL仿美团注册登录绑定第三方登录》这里做的是app的第三方登录，里面有app的流程。后来在使用阿里巴巴矢量图库-http://www.iconfont.cn/ 的时候看见了使用GitHub第三方登录，这个是Web端的，今天就自己动手实现了这个功能。

登录流程

上图就是基本的登录流程了。

GitHub设置

填写应用信息

1.首先登录你的GitHub，然后点击进入Settings；



2.选择OAuth Apps



3.注册应用信息



4.填写应用信息



这里主要是

Authorization callback URL

的填写；

这个应用回调地址就是上面登录流程授权之后返回的

redirect_uri

。

获取Client_id和Client_secret

上面填写应用信息中，其实就可以看见着连个了。



上面的

0 users

说明目前还没GitHub账号登录应用。

上面的GitHub设置的官方文档-Registering OAuth Apps。

看文档

在代码实现之前还是先看看文档。

About authorization options for OAuth Apps。

其实文档里面已经清晰的说明了授权登录的主要3个步骤：

1.web端重定向http://github.com/login/oauth/authorize；

2.根据code获取access_token；

3.根据access_token获取用户信息；

这里的第2步和第3步，建议在后端实现，为什么在后端实现了，因为第2不接口里面需要

Client_secret

这个参数。

代码实现

效果

在代码实现之前先看效果：

http://manage.hgdqdev.cn/



1.用户点击GitHub图标；

2.重定向到GitHub授权登录页面；

3.授权成功，向后端发送请求获取用户信息，显示用户名。

前端代码实现

前端代码这里基本就是上面的流程，具体代码可以去这里看，这个前端项目我已经开源了：https://github.com/zhuming3834/manage/blob/master/src/components/page/Login.vue

后端代码实现

前端把获取到的code发送个后端，后端获取到用户信息后返回给前端。

/*
*  github 第三方 登录
*/
var express = require('express');
var router = express.Router();
var request = require('request');
var githubConfig = {
// 客户ID
client_ID: '7***************6',
// 客户密匙
client_Secret: '4******************************f',
// 获取 access_token
// eg: https://github.com/login/oauth/access_token?client_id=7***************6&client_secret=4***************f&code=9dbc60118572de060db4&redirect_uri=http://manage.hgdqdev.cn/#/login access_token_url: 'https://github.com/login/oauth/access_token',
// 获取用户信息
// eg: https://api.github.com/user?access_token=86664b010dbb841a86d4ecc38dfeb8ac673b9430&scope=&token_type=bearer user_info_url: 'https://api.github.com/user?',
// 回调地址
redirect_uri: 'http://manage.hgdqdev.cn/#/login'
}
router.all('/api/github/user_info', function(req, res, next) {
var param = req.query || req.params;
var code = param.code || '';
if (code == '') {
res.end(JSON.stringify({
msg: '请传入正确的参数',
status: 103
}));
return;
}
request({
url: githubConfig.access_token_url,
form: {
client_id: githubConfig.client_ID,
client_secret: githubConfig.client_Secret,
code: code,
redirect_uri: githubConfig.redirect_uri
}},
function(error, response, body){
if (!error && response.statusCode == 200) {
var urlStr = githubConfig.user_info_url + body;
request({
url: urlStr,
headers: {
'User-Agent': 'zhuming3834'
}
},
function(error, response, resbody){
if (!error) {
res.end(JSON.stringify({
msg: '获取成功',
status: 100,
data: JSON.parse(resbody)
}));
}else{
res.end(JSON.stringify({
msg: '获取用户信息失败',
status: 102
}));
}
}
)
}else{
res.end(JSON.stringify({
msg: '获取用户信息失败',
status: 101
}));
}
}
)
})

其实这里的代码没什么难度，主要是流程。但是在第2个请求的时候我设置了一个：

headers: {
'User-Agent': 'zhuming3834'
}

为什么呢？其实也是踩坑过来了。如果不设置会报错导致请求不成功，报错信息：

Request forbidden by administrative rules. Please make sure your request has a User-Agent header (http://developer.github.com/v3/#user-agent-required). Check https://developer.github.com for other possible causes.\n'

其实也就是HTTP请求的403错误，但是这个请求在浏览器端是没有任何问题了。为什么呢？

这里还是看官方的说明：User Agent Required。



这里其实告诉了我们解决办法，就是把

User-Agent

设置成你的GitHub的用户名或者应用名，这里我设置的是GitHub的用户名。

最后

最后我们发现第三方登录的流程其实都差不多，差别就是不同的平台，和自己应用的业务会有点不一样。所以呢，在做之前先要理清思路，仔细看文档。