一、oAuth验证(第三方验证登录)
以github为例阐述此方法。
1、首先需要在github网站注册oAuth App的相关信息,用以获取
Client ID和Client Secret,如下图所示:
注册网址是:github.com/settings/ap…
在这个网站填写登记表。完成后可获取Client ID和Client Secret信息。
2、后端实现时使用koa框架。
第一步,前往 github.com/login/oauth… 页面,获取授权。这时需要带着client_id。
第二步,当授权完成时,会重定向到你登记表中填写的路径。
此时会携带code,可以通过 const code = ctx.query.code 解析code。
第三步,携带Client ID、Client Secret和code 调用接口 github.com/login/oauth… 获取令牌, 可通过 querestring.parse(result.data).access_token 解析出 access_token。
第四步,获取用户信息时,调用接口 api.github.com/user ,需携带access_token,如此便可获取用户信息。
完整后台如下:
const Koa = require('koa');
const router = require('koa-router')();
const static = require('koa-static')
const axios = require('axios')
const querestring = require('querystring')
const app = new Koa()
app.use(static(__dirname, "/"))
const config = {
client_id: '4a8c64a00ea8dd6c72b7',
client_secret: '5848e996855284b3c83013c7a213bd6e08e91933'
}
// 登录 第一步
router.get('/github/login', (ctx) => {
let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id;
ctx.redirect(path)
})
// 第二步 即配置接口,运行以下代码
router.get('/github/redirect', async (ctx) => {
const code = ctx.query.code
// console.log(code) //9a005384f3cca45b7046
const params = {
client_id: config.client_id,
client_secret: config.client_secret,
code: code
}
// 第三步 获取令牌
let result = await axios.post('https://github.com/login/oauth/access_token', params)
// console.log(result.data) //access_token=dc4ed15d8829d495dc0a3cca64f5eb89576ead74&scope=&token_type=bearer
const access_token = querestring.parse(result.data).access_token
console.log(access_token)
// 第四步 获取信息
let userInfo = await axios.get('https://api.github.com/user?access_token=' + access_token)
console.log(userInfo.data)
console.log(userInfo.data.avatar_url.substring(8))
ctx.body = `
<h1>你好 ${userInfo.data.login}</h1>
<h1>欢迎你 ${userInfo.data.name}</h1>
<img src=${userInfo.data.avatar_url} />`
})
app.use(router.routes())
app.use(router.allowedMethods())
app.listen(3000, () => console.log('运行于3000之上'))
前台如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>第三方授权示例</title>
</head>
<body>
<div id="app">
<h2>使用github登录</h2>
<a href="/github/login">login with github</a>
</div>
</body>
<script>
new Vue({
el: '#app'
})
</script>
</html>
oAuth认证原理: