OAuth 受权认证(第三方登陆)

时间 2019-11-15

标签 oauth 受权认证第三方登陆繁體版

原文原文链接

本章以第三方应用(GitHub)为例，来模拟实现获取第三方应用的权限用户资料html

基本的认证流程：
vue

执行步骤从上到下node

首先咱们须要新建一个文件，并安装依赖来写咱们的代码：
ios

接着咱们须要在index.html中生成一个模板，并引入须要使用到的script标签：git

固然，若是在项目中的话，确定不这样使用，在项目中都是先后端分离的，使用Vue模板进行书写，这里只是为了书写测试更加方便而已github

index.html代码：npm

<!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">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Index</title>
</head>

<body>
    <div id="app">
        <h1>使用github登陆</h1>
        <!-- 定义一个连接，当点击的时候，能够调用后台的接口 -->
        <a href="/github/login">login with github</a>
    </div>
</body>
<script>
    new Vue({
        el: "#app"
    })
</script>

</html>
复制代码

接着咱们须要在index.js文件中引入要使用到的依赖，并对index.html文件进行托管：axios

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用来托管静态资源，此处托管的是 index.html
app.use(static(__dirname + '/'))

//配置路由
app.use(router.routes()); // 启动路由
app.use(router.allowedMethods());

//监听3000端口
app.listen(3000)
复制代码

而后进入文件夹下，使用nodemon index.js把服务跑起来后端

测试：
api

而后咱们须要进入到网址：github.com/settings/ap… 来建立一个应用

以下：

而后会生成一个应用，并生成一个Client ID和Client Secret，这两个东西很是重要，咱们要在咱们后端定义一个变量来把他们存放起来

index.js文件新增代码：

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}
复制代码

接着当咱们点击网页上面的超连接的时候，咱们须要跳转到GitHub的认证页面https://github.com/login/oauth/authorize而且须要带上client_id

而后咱们须要认证，本身直接填入帐号密码，而后会让你填写code，会把code发给你的邮箱（注册github的邮箱），只需填上认证一下就OK了（这里我已经认证过了）

接着当咱们认证成功的时候，就会返回到上面你填写的那个页面，我填的是（http://127.0.0.1:3000/github/callback）

接下来在index.js中写代码进行测试：

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用来托管静态资源，此处托管的是 index.html
app.use(static(__dirname + '/'))

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}

router.get('/github/login', ctx => {
    //须要重定向到github的认证页面,须要带上client_id
    let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id
    ctx.redirect(path)

})

router.get('/github/callback', (ctx) => {
    //打印一句话进行测试
    console.log('callback...');
})

app.use(router.routes()); // 启动路由
app.use(router.allowedMethods());

app.listen(3000)
复制代码

测试：

而后咱们须要在/github/callback接口中来得到code，用code申请令牌，而后解析令牌，用令牌获取用户信息

下面使用的网址都是固定的网址，只是每一个人所带的参数不同

修改index.js代码以下：

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用来托管静态资源，此处托管的是 index.html
app.use(static(__dirname + '/'))

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}

router.get('/github/login', ctx => {
    //须要重定向到github的认证页面,须要带上client_id
    let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id
    ctx.redirect(path)

})

//当咱们的github认证成功的时候，会调用这个接口
router.get('/github/callback', async (ctx) => {
    //打印一句话进行测试
    // console.log('callback...');

    // 在认证成功的时候，咱们会收到code
    const code = ctx.query.code
    // console.log(code);  //072a58edf792558ae6a9

    //接下来咱们须要申请令牌，须要使用到三个参数
    const params = {
        client_id: config.client_id,    //上面定义的config中的参数
        client_secret: config.client_secret,    //上面定义的config中的参数
        code: code  //认证成功时，返回的code
    }
    //获取令牌
    let res = await axios.post("https://github.com/login/oauth/access_token", params)
    // console.log(res.data)

        
    //利用querystring把令牌进行解析，而后获取access_token
    const access_token = querystring.parse(res.data).access_token;
    // console.log(access_token) 

    //有了access_token后，就能够拿到用户信息了，须要带上access_token，固然在项目中，会在请求拦截那里带上这个token
    res = await axios.get("https://api.github.com/user?access_token=" + access_token)
    // console.log(res.data) // 获得一堆的用户信息

    //输出用户部分信息
    ctx.body = `
        <h1>hello ${res.data.login}</h1>
        <img src=${res.data.avatar_url} />
    `

})

app.use(router.routes()); // 启动路由
app.use(router.allowedMethods());

app.listen(3000)
复制代码

测试：

至此，就能够获取到用户信息，而后就可使用用户信息。

OAuth 受权认证(第三方登陆)

@_@