鉴权方案

304 阅读2分钟

一、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认证原理: