第三方登入例子-GitHub受权登入（node-koa）

2019年8月25日 252次阅读 来源: linwalker

媒介

第三方登入太常见了，微信，微博，QQ…总有一个你用过。固然看这篇文章的你，应当还用过github登入。这篇分享是在上一篇基于node的登入例子（node-koa-mongoose）的基本增添了github账号第三方受权登入功用，假如有些代码，这篇中美引见，你能够先去看下上一篇的分享。

本项目源码地点：https://github.com/linwalker/…

第三方登入

第三方登入重要基于OAuth 2.0。OAuth协定为用户资本的受权供应了一个平安的、开放而又浅易的规范。与以往的受权体式格局不同之处是OAUTH的受权不会使第三方触及到用户的帐号信息（如用户名与暗码），即第三方无需运用用户的用户名与暗码就能够要求取得该用户资本的受权，因而OAUTH是平安的 —- 百度百科

更细致的引见能够看这篇文章明白OAuth 2.0

github 受权登入

道理历程

先来大抵相识下第三方经由过程GitHub账号受权登入的历程，详细完成连系背面代码解说

  • 1.猎取code

    第三方客户端向`https://github.com/login/oauth/authorize`发送get要求，带上`?client_id=XXXXXX`参数，这时会跳转到GitHub登入页面，受权后GitHub会向客户端返回`https://redirect_url?code=XXXXXX`。个中`client_id`和`redirect_url`是第三方事前在GitHub平台上设置好的。

  • 2.经由过程code猎取access_token

    客户端处置惩罚`https://redirect_url?code=XXXXXX`要求，猎取code值，向`https://github.com/login/oauth/access_token`提议post要求，要求参数为`client_di`,`client_secret`和`code`。

  • 3.经由过程access_token猎取用户GitHub账号信息

第二步的要求会返回如许access_token=d0686dc49a22d64e77402db072b719f510f22421&scope=user&token_type=bearer的内容，拿到access_token只须要向https://api.github.com/user?access_token=xxx发送GET要求，即可猎取到登录用户的基本信息，

详细完成

GitHub注册运用

起首你要有一个GitHub账号，然后进入settings -> OAuth application -> Register a new application。进来后你会看到下面这个页面：

《第三方登入例子-GitHub受权登入（node-koa）》

顺次填好运用称号，运用地点和受权回掉地点后点击Register application按钮，会天生一个client Id和client Secret，用于背面向GitHub发送要求传参。

《第三方登入例子-GitHub受权登入（node-koa）》

Github受权要求（猎取code）

在页面中增添GitHub登入跳转按钮，并在路由中对跳转要求举行转发处置惩罚：

//在node-login/components/LoginTab.js

<a href="/github/login">
     <Icon type="github" style={{fontSize: 20, color: '#000'}}/>
</a>

《第三方登入例子-GitHub受权登入（node-koa）》

增添跳转按钮后，增添响应路由处置惩罚,路由入口中增添／github途径处置惩罚

//在node-login/routes/index.js

const github = require('./github');
router.use('/github', github.routes(), github.allowedMethods());

末了是详细的路由处置惩罚

//在node-login/routes/github.js
const config = require('../config');
const router = require('koa-router')();
const fetch = require('node-fetch');
const routers = router
    .get('/login', async (ctx) => {
        var dataStr = (new Date()).valueOf();
        //重定向到认证接口,并设置参数
        var path = "https://github.com/login/oauth/authorize";
        path += '?client_id=' + config.client_id;
        path += '&scope=' + config.scope;
        path += '&state=' + dataStr;
        //转发到受权服务器
        ctx.redirect(path);
    })
module.exports = routers;

在config中事前增添设置要求所需参数client_id，client_secret和scope。

module.exports = {
    'database': 'mongodb://localhost:27017/node-login',
    'client_id': '83b21756e93d6ce27075',
    'client_secret': 'd87c4163ece5695a9ded1e8bf2701c5ee2651f28',
    'scope': ['user'],
};

个中scope参数可选。就是你期待你的运用须要挪用Github哪些信息，能够填写多个，以逗号支解，比方：scope=user,public_repo。state参数非必须，用于防治跨域捏造要求进击。

如今能够运转一下项目，点击小黑猫，跳转到受权登入页面（没登入过，要输入账号暗码），受权胜利返回回掉地点。

《第三方登入例子-GitHub受权登入（node-koa）》

回掉地点中code就是返回的受权码，经由过程受权码再去猎取令牌access_token。

《第三方登入例子-GitHub受权登入（node-koa）》

受权回掉处置惩罚（猎取access_token）

在第一步受权要求https://github.com/login/oauth/authorize胜利后GitHub会给运用返回一个回掉http://localhost:3003/github/oauth/callback?code=14de2c737aa02037132d&state=1496989988474。这个回掉地点就是之前在GitHub注册运用时填入的回掉地点，别的还带了须要的code参数，state就是上一步要求中带的state参数，原样返回。

如今我们要对这个回掉要求举行处置惩罚：

//node-login/routes/github.js
const config = require('../config');
const router = require('koa-router')();
const fetch = require('node-fetch');
const routers = router
    .get('/login', async (ctx) => {
        ...
    })
    .get('/oauth/callback', async (ctx) => {
        const code = ctx.query.code;
        let path = 'https://github.com/login/oauth/access_token';
        const params = {
            client_id: config.client_id,
            client_secret: config.client_secret,
            code: code
        }
        console.log(code);
        await fetch(path, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        })
        .then(res => {
            return res.text();
        })
        .then(body => {
            ctx.body = body;
        })
       .catch(e => {
            console.log(e);
        })
    })
module.exports = routers;

GitHub返回回掉地点时，先拿到要求中的code参数，然后向https://github.com/login/oauth/access_token发送post要求并带上client_id,client_secret,code参数，要求胜利后会返回带有access_token的信息。

《第三方登入例子-GitHub受权登入（node-koa）》

猎取GitHub账号信息

末了带上猎取的access_token要求https://api.github.com/user?access_token=xxx,返回的就是之前scope中对应的账号信息。

.get('/oauth/callback', async (ctx) => {
        const code = ctx.query.code;
        let path = 'https://github.com/login/oauth/access_token';
        const params = {
            client_id: config.client_id,
            client_secret: config.client_secret,
            code: code
        }
        console.log(code);
        await fetch(path, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        })
        .then(res => {
            return res.text();
        })
        .then(body => {
            const args = body.split('&');
            let arg = args[0].split('=');
            const access_token = arg[1];
            console.log(body);
            console.log(access_token);
            return access_token;
        })
        .then(async(token) => {
            const url = ' https://api.github.com/user?access_token=' + token;
            console.log(url);
            await fetch(url)
                .then(res => {
                    return res.json();
                })
                .then(res => {
                    console.log(res);
                    ctx.body = res;
                })
        })
        .catch(e => {
            console.log(e);
        })
    })

返回的用户信息以下：

《第三方登入例子-GitHub受权登入（node-koa）》

总结

用一张图来总结

《第三方登入例子-GitHub受权登入（node-koa）》

    原文作者：linwalker
    原文地址: https://segmentfault.com/a/1190000009722474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞