当前位置: 首页 > 后端技术 > Node.js

第三方登录实例-GitHub授权登录(node-koa)

时间:2023-04-03 22:50:48 Node.js

前言第三方登录太常见了,微信、微博、QQ……总有一款你用过。当然,如果你看了这篇文章,你应该已经使用github登录了。本次分享是在之前基于节点的登录实例(node-koa-mongoose)的基础上,增加了github账号的第三方授权登录功能.如果有一些代码,可以先看前面的。文章分享。本项目源码地址:https://github.com/linwalker/...第三方登录第三方登录主要基于OAuth2.0。OAuth协议为用户资源的授权提供了一个安全、开放、简单的标准。与以往授权方式不同的是,OAUTH授权将不允许第三方触及用户的账户信息(如用户名和密码),即第三方可以在不使用用户的用户名和密码的情况下申请访问用户的资源密码。授权,所以OAUTH安全----百度百科更详细的介绍可以看这篇文章了解OAuth2.0github授权登录的原理流程。说明1.获取代码第三方客户端向https://github.com/login/oauth/authorize发送get请求,参数为?client_id=XXXXXX,然后会跳转到GitHub登录页面,authorize之后,GitHub会返回https://redirect_url?code=XXXXXX给客户端。其中`client_id`和`redirect_url`是第三方在GitHub平台上预先配置好的。2.通过代码获取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,只需要发送GET到https://api.github.com/user?access_token=xxx请求,就可以获取到登录用户的基本信息。实现GitHub注册申请,首先要有一个GitHub账号,然后进入设置->OAuth申请->注册新申请。进来后会看到如下页面:依次填写应用名称、应用地址和授权返回地址,点击Registerapplication按钮,会生成一个clientId和clientSecret,用于发送稍后向GitHub请求参数。Github授权请求(获取代码)在页面添加GitHub登录跳转按钮,并在路由中转发跳转请求://innode-login/components/LoginTab.js添加跳转按钮后,添加相应的路由处理,在路由入口添加/github路径处理//innode-login/routes/index.jsconstgithub=require('./github');router.use('/github',github.routes(),github.allowedMethods());最后是具体的路由流程//在node-login/routes/github.jsconstconfig=require('../config');constrouter=require('koa-router')();constfetch=require('node-fetch');constrouters=router.get('/login',async(ctx)=>{vardataStr=(newDate()).valueOf();//重定向到认证接口,配置参数varpath="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和scopemodule.exports={'database':'mongodb://localhost:27017/node-login','client_id':'83b21756e93d6ce27075','client_secret':'d87c4163ece5695a9ded1e8bf2701c5ee2651f28','user]':;范围参数是可选的。就是你期望你的应用程序调用Github的什么信息,你可以填写多个,用逗号隔开,例如:scope=user,public_repo。state参数不是必需的,用于防止跨域伪造请求攻击。现在可以运行项目,点击小黑猫,跳转到授权登录页面(你还没有登录,需要输入账号密码),授权成功后返回返回地址。回调地址中的code为返回的授权码,通过授权码可以获取tokenaccess_token。授权回调处理(获取access_token)第一步授权请求https://github.com/login/oauth/authorize成功后,GitHub会给应用返回一个回调http://localhost:3003/github/oauth/callback?code=14de2c737aa02037132d&state=1496989988474。这个回调地址是在GitHub上注册应用时填写的回调地址。此外,还包括所需的代码参数。state是上次请求中包含的state参数,原样返回。现在我们要对这个返回请求进行处理://node-login/routes/github.jsconstconfig=require('../config');constrouter=require('koa-router')();constfetch=require('node-fetch');constrouters=router.get('/login',async(ctx)=>{...}).get('/oauth/callback',async(ctx)=>{constcode=ctx.query.code;letpath='https://github.com/login/oauth/access_token';constparams={client_id:config.client_id,client_secret:config.client_secret,code:code}控制台.log(code);awaitfetch(path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(params)}).then(res=>{returnres.text();}).then(body=>{ctx.body=body;}).catch(e=>{console.log(e);})})module.exports=路由器;GitHub返回返回地址时,先获取请求中的code参数,然后向https://github.com/login/oauth/access_token发送post请求,带client_id、client_secret、code参数,请求后返回成功后用access_token信息获取GitHub账号信息最后,带着获取到的access_token去请求https://api.github.com/user?access_token=xxx,返回之前scope中对应的账号信息。.get('/oauth/callback',async(ctx)=>{constcode=ctx.query.code;letpath='https://github.com/login/oauth/access_token';constparams={client_id:config.client_id,client_secret:config.client_secret,code:code}console.log(code);awaitfetch(path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(params)}).then(res=>{returnres.text();}).then(body=>{constargs=body.split('&');让arg=args[0].split('=');constaccess_token=arg[1];console.log(body);console.log(access_token);returnaccess_token;}).then(async(token)=>{consturl='https://api.github.com/user?access_token='+令牌;控制台.log(网址);awaitfetch(url).then(res=>{returnres.json();}).then(res=>{console.log(res);ctx.body=res;})}).catch(e=>{console.log(e);})})返回的用户信息如下:Summary用一张图进行总结