使用Github授權登入個人網站步驟整理（備忘）
開發網站時懶得寫登入註冊那堆東西就會想到用Github授權登入，為啥會選擇Github呢？因為它不需要稽核呀，到Github上申請完就可以用了
如果用微博，QQ這種授權登入，首先也是要申請，但它們都要稽核，如果接入的是網站，那網站還要備案才能通過，稽核時間還很長
申請
地址：https://github.com/settings/developers
具體操作可以參見pybbs的文件：https://tomoya92.github.io/pybbs/#/zh-cn/oauth
整合
Github授權登入的流程如下
- 呼叫github的請求授權地址，要帶上申請的application的client_id
- github驗證client_id後，會回撥網站，返回一個code
- 拿著這個code請求github獲取access_token的地址
- 獲取access_token後，就可以呼叫github的使用者資訊介面了
請求Github授權
exports.github = async (ctx) => {
// 隨機一個state，這個引數是可選的，不過如果帶著的話，當github回撥時會原封不動的帶回來，這樣就可以驗證是不是正常流程請求的授權了
const state = str_util.random_str(4);
// 將state放到session裡，這樣在回撥裡可以獲取到，然後進行比對
ctx.session.state = state;
const client_id = 'xxxxxxxxxxxxxxxxxx';
const client_secret = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';
const callback_url = 'http://example.com/callback';
// 拼接好引數直接重寫向到github
await ctx.redirect(
`https://github.com/login/oauth/authorize` +
`?client_id=${client_id}` +
`&scope=user` +
`&state=${state}` +
`&redirect_uri=${callback_url}`
);
};
原鏈文接：https://tomoya92.github.io/2019/03/14/login-with-github-koa/
scope引數
說一下上面拼接的連結裡的一個引數scope
這個引數可取值有如下這些
- repo
- admin
- gist
- notifications
- user
它們分別有什麼許可權可以參見：https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/
其中admin
的許可權最大，它可以拿到Github使用者的所有Repository並且對它們進行CRUD以及使用使用者授權後拿到的access_token
對其它專案進行star
,fork
等操作，慎用！
回撥
有了這個重寫向，Github就會驗證引數裡的client_id等引數，如果都是正常的，github就會回撥申請application的時候填寫的callback地址，這時就需要在網站裡再寫一個回撥處理路由了，程式碼如下
const axios = require('axios');
exports.callback = async (ctx) => {
const code = ctx.request.query.code;
const state = ctx.request.query.state;
const _state = ctx.session.state;
// 比較state是否一致
if (state !== _state) {
ctx.throw(500, new Error('非法操作'));
} else {
// 獲取access_token
const fetch_access_token_resp = await axios.post('https://github.com/login/oauth/access_token', {
client_id: config.oauth.github.client_id,
client_secret: config.oauth.github.client_secret,
code: code,
redirect_uri: config.oauth.github.callback_url,
state: state
}, {
headers: {
Accept: 'application/json' // 設定headers裡的Accept為 application/json ，響應的結果就是json格式的
}
}
);
// fetch_access_token_resp.data 物件裡的資料長下面這個樣
// {"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"}
const access_token = fetch_access_token_resp.data.access_token;
// 使用access_token請求個人資訊介面，獲取使用者資訊
const github_user_info_resp = await axios.get(
`https://api.github.com/user?access_token=${access_token}`
);
// 到這一步就完成了，可以將使用者github上一些對網站有用的資料儲存下來，然後使用者就登入成功了
// github_user_info_resp.data 這裡獲取到的使用者的資訊json長啥樣？往下看
ctx.body = github_user_info_resp.data;
}
};
使用者個人資訊
github_user_info_resp.data 資料格式
鏈原文接：https://tomoya92.github.io/2019/03/14/login-with-github-koa/
{
"login": "tomoya92",
"id": 9217170,
"node_id": "MDQ6VXNlsjY1MTU1NzA=",
"avatar_url": "https://avatars2.githubusercontent.com/u/6915570?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/tomoya92",
"html_url": "https://github.com/tomoya92",
"followers_url": "https://api.github.com/users/tomoya92/followers",
"following_url": "https://api.github.com/users/tomoya92/following{/other_user}",
"gists_url": "https://api.github.com/users/tomoya92/gists{/gist_id}",
"starred_url": "https://api.github.com/users/tomoya92/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/tomoya92/subscriptions",
"organizations_url": "https://api.github.com/users/tomoya92/orgs",
"repos_url": "https://api.github.com/users/tomoya92/repos",
"events_url": "https://api.github.com/users/tomoya92/events{/privacy}",
"received_events_url": "https://api.github.com/users/tomoya92/received_events",
"type": "User",
"site_admin": false,
"name": "朋也",
"company": null,
"blog": "https://tomoya92.github.io",
"location": "Shanghai",
"email": "[email protected]",
"hireable": null,
"bio": "hello world",
"public_repos": 99,
"public_gists": 99,
"followers": 99,
"following": 99,
"created_at": "2014-03-11T06:26:21Z",
"updated_at": "2019-02-28T04:51:50Z",
"private_gists": 99,
"total_private_repos": 99,
"owned_private_repos": 99,
"disk_usage": 9999,
"collaborators": 0,
"two_factor_authentication": true,
"plan": {
"name": "free",
"space": 9999999,
"collaborators": 0,
"private_repos": 10000
}
}
內網穿透
github回撥的地址要保證外網能訪問通的，所以配置上開發專案的地址就不行了，可以使用ngrok或者frp工具來實現內網穿透
ngrok用法
# mac上安裝 brew install ngrok # 啟動代理 ngrok http 3000
frp用法可以參見我另一篇部落格利用frp內網穿透實現用自家電腦釋出網站(不用買伺服器了)
總結
每次整合的時候總會忘了github返回的資料格式長啥樣，這次總結一下，開發語言用的是koa，不過請求介面用什麼語言都是一樣的
寫部落格不易，轉載請保留原文連結，謝謝!
原文連結: