准备

登录github
选择右上角的setting
Developer settings -> OAuth Apps -> Register a new application
填入基本信息
点击绿色的按钮,可以看见 client_id 和 client secret

理清思路:

开始时,一个登录的连接,点击连接.后台监听登录(/login)路由,然后重定向到github授权的路由(此时需要带上上面生成的Client ID)
当重定向(302)到授权的路由时,如果Client ID正确,会返回在准备阶段填写的Authorization callback URL.以及一个code
本地后台监听 /github/callback, 获取code后,生成参数,重新访问 github的 https://github.com/login/oauth/access_token, 以获取token
如果 Client ID 和 Client Secret 正确, 访问github授权url时,会得到一个token
获得token即验证成功.

代码实现:

index.html

<html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"><a href="http://localhost:3000/github/login">login with github</a></div></body>
</html>

index.js

const koa = require("koa");
const router = require('koa-router')();
const static = require('koa-static');
const app = new koa();
const axios = require("axios");
const querystring = require("querystring");app.use(static(__dirname + '/'));
const config = {client_id: '9ffe8aeafb6a5b1469b9',client_secret: 'd25a747d52f74e98303f1bff0a8714fc8488c221'
}router.get('/github/login', async (ctx) => {var dataStr = (new Date()).valueOf();// 重定向到认证接口,并配置参数var path = "https://github.com/login/oauth/authorize";path += '?client_id=' + config.client_id;// 转发到授权服务器ctx.redirect(path);
})
router.get('/github/callback', async (ctx) => {const code = ctx.query.code;const params = {client_id: config.client_id,client_secret: config.client_secret,code: code}let res = await axios.post('https://github.com/login/oauth/access_token', params);const access_token = querystring.parse(res.data).access_token;res = await axios.get('https://api.github.com/user?access_token=' + access_token);ctx.body = `<h1>Hello ${res.data.login}</h1><img src='${res.data.avatar_url} alt=""' />`
})app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

操作:

vscode下打开html的快捷键, alt + b
点击链接
输入账号密码登录
成功!

koa --- 使用Github OAuth登录相关推荐

Spring Boot 接入 GitHub 第三方登录，只要两行配置！
点击上方好好学java ,选择星标公众号重磅资讯,干货,第一时间送达今日推荐:14 个 github 项目!个人原创100W +访问量博客:点击前往,查看更多本文地址:https://www ...
Spring Boot——基于OkHTTP的GitHub第三方登录DEMO
基本概念 OkHTTP:HTTP是现代应用程序网络的方式.这就是我们交换数据和媒体的方式.有效地执行HTTP可使您的内容加载更快并节省带宽. OkHttp是默认情况下有效的HTTP客户端: HTTP ...
java github关联登录_没错，用三方Github做授权登录就是这么简单！（OAuth2.0实战）...
全2册git版本控制管理(第2版)+ 99.8元包邮 (需用券) 去购买 > 本文收录在个人博客:www.chengxy-nds.top,技术资源共享. 上一篇<OAuth2.0 的四种 ...
OAuth2的运行机制(GitHub单点登录)
OAuth2的运行机制 1.OAuth2框架简介 2.OAuth2身份验证架构中的组件 3.使用OAuth2的实现选项 3.1 实现授权码授权类型 3.2 使用密码授权类型 3.3 实现客户端凭据授权 ...
Java实现GitHub第三方登录详解
GitHub第三方登录实现效果如下: 实现流程如下: 1.注册一个GitHub账号 2.注册一个授权的网站保存一个你的Client ID和Client Secret 3.准备一个页面,有一个链接跳转到 ...
如何支持github账号登录
转载自:http://www.cooklife.cn 有些时候我们需要自己的网站支持第三方账号的登录,这里来讲讲如何让自己的网站支持github账号的支持. 1.在github上面建立一个应用对应自己 ...
精通Spring Boot—— 第二十一篇：Spring Social OAuth 登录简介
2019独角兽企业重金招聘Python工程师标准>>> 1.什么是OAuth OAuth官网介绍是这样的: An open protocol to allow secure auth ...
github账户登录ArcGIS developer并申请API key
如果你也和我一样,在直接注册ArcGIS developer账号时遇到了网络问题无法进行下一步,可以采用本文的方法使用第三方账号(github)登录并更新为有权限的ArcGIS developer账号 ...
[UnexpectedValueException] Your github oauth token for github.com contains invalid characters
Composer 报错: [UnexpectedValueException] Your github oauth token for github.com contains invalid char ...

koa --- 使用Github OAuth登录

准备

理清思路:

代码实现:

操作:

koa --- 使用Github OAuth登录相关推荐

最新文章

热门文章