手把手教github授权登录 nodejs koa第三方授权登录

可能在你开发的一个网站有这样的一个需求,实现GitHub第三方登录,废话不多说我们先看看具体流程：

1.第一步去注册一个github的账号并登录,注册的步骤就省略了,直接往下看

登录后点击头像的箭头,然后就会看到以下的一个下拉菜单,然后点击Settings

 

2.第二步点击 Developer settings

 

3.第三步 点击OAuth Apps

4.第四步点击 New OAuth App

5.第五步 填写完应用信息,前三个可以任意填写,后面的回调地址一定要慎重.

 

注册应用成功后，可以得到你应用的Client ID, Client Secret 如下, 这些信息要妥善保存:

git授权登录操作步骤

官方文档链接: https://developer.github.com/apps/

得到你应用的Client ID, Client Secret后，就可以开始代码实现了。GitHub授权登录相对于其它的第三方账号登录要简单的多。

三步文档: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow

只需三步即可实现:

1.登录界面点击GitHub登录按钮重定向到https://github.com/login/oauth/authorize；

2.前端获取到code传给后端获取access_token；

3.根据access_token获取用户信息并返回给前端；

一、第一步授权并获取code

首先，我们在登录界面 /login 放置一个GitHub登录按钮，点击登录按钮重定向到https://github.com/login/oauth/authorize进行授权。这个url需要附带两个参数，一个为client_id，这个参数注册应用可以得到。另一个就是我们注册应用设置的回调地址。用户授权成功就会跳转到我们设定的回调地址。现在来看下代码：

login.vue

<a href="https://github.com/login/oauth/authorize?client_id=你的clientID&redirect_uri=你的回调页面地址">github授权登录</a>

如果你觉得这样写麻烦的话,也可以用js进行操作.具体代码看百度.
接着往下看,当你的client_id和redirect_uri没问题的话,会得到以下的一个结果===> 回调地址后面有个code的参数,这个时候只需要用一个简单的js方法即可获取这个code了.code的有效期是一次性使用和10分钟,所以调试的时候需要注意,用了一次之后需要重新获取.

    /**
     * 获取url query的参数(?后面的参)
     * @param {*} variable 参数名称
     */
    getQueryVariable(variable) {
        const query = window.location.search.substring(1);
        const vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split('=');
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return null;
    },

 

二、第二步用刚刚获到的code来换取 access_token

官方文档对获取access_token接口,通过code去获取access_token有三个必传参数。client_id与client_secret来源于我们申请应用成功可以获得。code我们上一步操作已经获得。因为涉及client_secret秘钥，所以我们需要把获取access_token参数放在后端去实现，然后前端调用后端接口进行获取access_token。首先我们先来实现后端代码：后端需要发起post请求获取access_token接口，以json格式将三个必传参数传参。如果code未被使用，则接口会返回access_code.

用post模拟如下:

需要注意的是一定要设置请求头,否则返回的参数是string类型的..

请求头设置如下

const headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/json'
};

 

server.js实现如下:

作者使用了 nodejs 的一个请求库 superagent 

npm i superagent  --save

const http = require('superagent');


 /**
     * 获取code获取用户信息
     * @param {*} code
     * @description 后端操作,需要先用code换取 access_token ,然后再用access_token获取用户的基本信息
     */
    async getGithubAuth({ code }) {
        const headers = {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        };
        if (!code) return result.paramsLack();
        try {
            const clientId = `你的clientId `;
            const clientSecret = `你的clientSecret `;
            console.log({ client_id: clientId, client_secret: clientSecret, code });
            const response = await http.post(`https://github.com/login/oauth/access_token`)
                .send({ client_id: clientId, client_secret: clientSecret, code })
                .set(headers) //设置请求头
                .timeout(1000 * 10);
            console.log(response);
            if (response.status == 200) {
                const obj = response.text && JSON.parse(response.text);
                console.log(obj);
                return result.success(null, obj);
            }
            return result.failed(response.status, response.text);
        } catch (error) {
            console.error(error);
            return result.failed(error);
        }
    }

好了.到此为止我们已经可以拿到access_token了,接下来才是第三步了.正常情况下，我们都是获取了access_token然后直接去调用获取用户信息的接口，但是这里我们需要把步骤拆分一下，做的清晰易懂一些。

三、第三步根据access_token获取用户信息并返回给前端；

首先拿到刚刚获取的access_token，我们去postman测试一下：

虽然是能成功获取，但是你很快发现你的邮箱里来了一封邮件？

是的就是这样，看不懂英文的没关系，作者用百度帮您翻译一下

别的都不重要，重要的是邮件里的一个链接，也就是更新日志：

https://developer.github.com/changes/2020-02-10-deprecating-auth-through-query-param/

看不懂的再帮您翻译一下：

还是看不懂吗？没关系，我再帮您讲解一下，除去废话之外大概内容就是这样的： 如果您还在使用params的传参的形式去调用获取用户信息或者其它接口，会收到警告的邮件，大概是每3天一封。在2020年9月30日之前都能成功调用，只不过会有警告的邮件，但是9月30号更新之后将会无法使用，返回401的状态码。所以我们要做的就是如下：

请求的时候把刚刚获取到的access_token放在请求头的头部，以 token b5******************cef 的形式传过去，结果和params获取的是一样的。重点是：参数值为： token + 空格 + access_token 才行，必须这样。

const headers = {
  'Authorization': 'token  b54a78c661ec06d23cb4f29db1eb47b3470aacef
};

到现在差不多就完成了第三步了。下面这些接口也是可以通过刚刚获取的access_token去调用，请求方法和参数都是一样的

如果此文章对您有帮助，请给个赞吧！好了，快动手试试吧.有问题请留言或者@作者,谢谢支持o(￣︶￣)o~