一 参考
http://www.ruanyifeng.com/blog/2019/04/github-oauth.html
二 流程场景
A 网站允许 GitHub 登录,整个流程如下。
1 A 网站让用户跳转到 GitHub。
2 GitHub 要求用户登录,然后询问"A 网站要求获得 xx 权限,你是否同意?"
3 用户同意,GitHub 就会重定向回 A 网站,同时发回一个授权码。
4 A 网站使用授权码,向 GitHub 请求令牌。
5 GitHub 返回令牌.
6 A 网站使用令牌,向 GitHub 请求用户数据。
三 GitHub应用登记
1 登记网址
https://github.com/settings/applications/new
2 填写如下
3 提交后,github返回信息如下
记录下Client ID和Client Secret
Client ID:c************1
Client Secret:d**************d
四 代码位置
https://github.com/cakin24/node-oauth-demo
五 核心代码修改
1 index,js
// Fill in your client ID and client secret that you obtained
// while registering the application
// 主要是修改下面两行
const clientID = 'c**************1'
const clientSecret = 'd**********d'
const Koa = require('koa');
const path = require('path');
const serve = require('koa-static');
const route = require('koa-route');
const axios = require('axios');
const app = new Koa();
const main = serve(path.join(__dirname + '/public'));
const oauth = async ctx => {
const requestToken = ctx.request.query.code;
console.log('authorization code:', requestToken);
const tokenResponse = await axios({
method: 'post',
url: 'https://github.com/login/oauth/access_token?' +
`client_id=${clientID}&` +
`client_secret=${clientSecret}&` +
`code=${requestToken}`,
headers: {
accept: 'application/json'
}
});
const accessToken = tokenResponse.data.access_token;
console.log(`access token: ${accessToken}`);
const result = await axios({
method: 'get',
url: `https://api.github.com/user`,
headers: {
accept: 'application/json',
Authorization: `token ${accessToken}`
}
});
console.log(result.data);
const name = result.data.name;
ctx.response.redirect(`/welcome.html?name=${name}`);
};
app.use(main);
app.use(route.get('/oauth/redirect', oauth));
app.listen(8080);
2 public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Node OAuth2 Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a id="login">Login with GitHub</a>
<script>
// 主要是修改这一行
const client_id = 'c*************1';
const authorize_uri = 'https://github.com/login/oauth/authorize';
const redirect_uri = 'http://localhost:8080/oauth/redirect';
const link = document.getElementById('login');
link.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`;
</script>
</body>
</html>
六 安装依赖
F:\Spring Security\node-oauth-demo-master>cnpm install
七 启动服务
F:\Spring Security\node-oauth-demo-master>node index.js
八 测试
1 浏览器输入: http://localhost:8080/
2 页面显示如下
3 点击该链接到Github
点击Authorize cakin24,程序会得到github返回的授权码code:5**************a,接着利用client_id、client_secret、code 向github请求access_token,返回access_token后,再利用https://api.github.com/user和token向github请求用户数据,这个过程都是下面代码自动完成的。
const oauth = async ctx => {
const requestToken = ctx.request.query.code;
console.log('authorization code:', requestToken);
const tokenResponse = await axios({
method: 'post',
url: 'https://github.com/login/oauth/access_token?' +
`client_id=${clientID}&` +
`client_secret=${clientSecret}&` +
`code=${requestToken}`,
headers: {
accept: 'application/json'
}
});
const accessToken = tokenResponse.data.access_token;
console.log(`access token: ${accessToken}`);
const result = await axios({
method: 'get',
url: `https://api.github.com/user`,
headers: {
accept: 'application/json',
Authorization: `token ${accessToken}`
}
});
console.log(result.data);
const name = result.data.name;
ctx.response.redirect(`/welcome.html?name=${name}`);
};
最终控制台输出下面信息,就是我们想得到的用户信息
authorization code: 5*********************a
access token: a********************3
{
login: 'cakin24',
id: 26600327,
node_id: 'MDQ6VXNlcjI2NjAwMzI3',
avatar_url: 'https://avatars1.githubusercontent.com/u/26600327?v=4',
gravatar_id: '',
url: 'https://api.github.com/users/cakin24',
html_url: 'https://github.com/cakin24',
followers_url: 'https://api.github.com/users/cakin24/followers',
following_url: 'https://api.github.com/users/cakin24/following{/other_user}',
gists_url: 'https://api.github.com/users/cakin24/gists{/gist_id}',
starred_url: 'https://api.github.com/users/cakin24/starred{/owner}{/repo}',
subscriptions_url: 'https://api.github.com/users/cakin24/subscriptions',
organizations_url: 'https://api.github.com/users/cakin24/orgs',
repos_url: 'https://api.github.com/users/cakin24/repos',
events_url: 'https://api.github.com/users/cakin24/events{/privacy}',
received_events_url: 'https://api.github.com/users/cakin24/received_events',
type: 'User',
site_admin: false,
name: null,
company: null,
blog: '',
location: null,
email: null,
hireable: null,
bio: null,
public_repos: 107,
public_gists: 2,
followers: 1,
following: 3,
created_at: '2017-03-22T13:10:10Z',
updated_at: '2019-10-18T07:16:46Z'
}