OAuth 第三方登录授权码(authorization code)方式的小例子
假如上面的网站A,可以通过GitHub账号登录;
下面以OAuth其中一种方式,授权码(authorization code)方式为例。
一、第三方登录的原理
所谓第三方登录,实质就是 OAuth 授权。
数据的所有者告诉系统,同意授权第三方应用进入系统,获取数据。系统从而产生一个短期的进入令牌(token),用来代替密码,供第三方应用使用。
用户想要登录 A 网站,A 网站让用户提供第三方网站的数据,证明自己的身份。获取第三方网站的身份数据,就需要 OAuth 授权。
这里利用OAuth authorization code的形式。
举例来说,A 网站允许 通过GitHub 登录,背后就是下面的流程。
- A 网站前端让用户带着client_id, response_type(如code授权码模式), redirect_uri, scope跳转到 GitHub。
- GitHub 要求用户登录,然后询问用户"A 网站要求获得 xx 权限,你是否同意?", 同意后会返回授权码code同时重定向URL
- 用户同意,GitHub 就会重定向回 A 网站的后端API URL,同时发回一个授权码,如
http://localhost:8080/oauth/redirect?
code=859310e7cecc9196f4af
- A 网站后端带着授权码code参数,向 GitHub发送请求,想获得令牌。
- GitHub 返回令牌,这里是一个字符串.
- A 网站使用令牌,请求GitHub API如
https://api.github.com/user
,请求的时候必须在 HTTP 头信息里面带上令牌Authorization: token 361507da,就可以
获得用户数据。
下面就是这个流程的代码实现。
二、应用登记
一个应用要求 OAuth 授权,必须先到对方网站登记,让对方知道是谁在请求。
所以,你要先去 GitHub 登记一下。当然,我已经登记过了,你使用我的登记信息也可以,但为了完整走一遍流程,还是建议大家自己登记。这是免费的。
访问这个网址,填写登记表。
应用的名称随便填,主页 URL 填写http://localhost:8080
,跳转网址填写 http://localhost:8080/oauth/redirect
。
提交表单以后,GitHub 应该会返回客户端 ID(client ID)和客户端密钥(client secret),这就是应用的身份识别码。
三、示例仓库
我写了一个代码仓库,请将它克隆到本地。
$ git clone git@github.com:ruanyf/node-oauth-demo.git
$ cd node-oauth-demo
两个配置项要改一下,写入上一步的身份识别码。
index.js
:改掉变量clientID
andclientSecret
public/index.html
:改掉变量client_id
然后,安装依赖。
$ npm install
启动服务。
$ node index.js
浏览器访问http://localhost:8080
,就可以看到这个示例了。
四、浏览器跳转 GitHub
示例的首页很简单,就是一个链接,让用户跳转到 GitHub。
跳转的 URL 如下。
https://github.com/login/oauth/authorize?
client_id=7e015d8ce32370079895&
redirect_uri=http://localhost:8080/oauth/redirect
这个 URL 指向 GitHub 的 OAuth 授权网址,带有两个参数:client_id
告诉 GitHub 谁在请求,redirect_uri
是稍后跳转回来的网址。
用户点击到了 GitHub,GitHub 会要求用户登录,确保是本人在操作。
五、授权码
登录后,GitHub 询问用户,该应用正在请求数据,你是否同意授权。
用户同意授权, GitHub 就会跳转到redirect_uri
指定的跳转网址,并且带上授权码,跳转回来的 URL 就是下面的样子。
http://localhost:8080/oauth/redirect?
code=859310e7cecc9196f4af
后端收到这个请求以后,就拿到了授权码(code
参数)。
六、后端实现
这里的关键是针对/oauth/redirect
的请求,编写一个路由,完成 OAuth 认证。
const oauth = async ctx => {
// ...
}; app.use(route.get('/oauth/redirect', oauth));
上面代码中,oauth
函数就是路由的处理函数。下面的代码都写在这个函数里面。
路由函数的第一件事,是从 URL 取出授权码。
const requestToken = ctx.request.query.code;
七、令牌
后端使用这个授权码,向 GitHub 请求令牌。
const tokenResponse = await axios({
method: 'post',
url: 'https://github.com/login/oauth/access_token?' +
`client_id=${clientID}&` +
`client_secret=${clientSecret}&` +
`code=${requestToken}`,
headers: {
accept: 'application/json'
}
});
上面代码中,GitHub 的令牌接口https://github.com/login/oauth/access_token
需要提供三个参数。
client_id
:客户端的 IDclient_secret
:客户端的密钥code
:授权码
作为回应,GitHub 会返回一段 JSON 数据,里面包含了令牌accessToken
。
const accessToken = tokenResponse.data.access_token;
八、API 数据
有了令牌以后,就可以向 API 请求数据了。
const result = await axios({
method: 'get',
url: `https://api.github.com/user`,
headers: {
accept: 'application/json',
Authorization: `token ${accessToken}`
}
});
上面代码中,GitHub API 的地址是https://api.github.com/user
,请求的时候必须在 HTTP 头信息里面带上令牌Authorization: token 361507da
。
然后,就可以拿到用户数据,得到用户的身份。
const name = result.data.name;
ctx.response.redirect(`/welcome.html?name=${name}`);
(完)
来源: http://www.ruanyifeng.com/blog/2019/04/github-oauth.html
OAuth 2.0 的四种方式: http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html
OAuth 2.0 的一个简单解释: http://www.ruanyifeng.com/blog/2019/04/oauth_design.html
理解OAuth 2.0: http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html
OAuth 第三方登录授权码(authorization code)方式的小例子的更多相关文章
- 单点登录 - OAuth 2.0 授权码模式(一)
OAuth 2.0定义了四种授权方式 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentials ...
- GitHub OAuth 第三方登录示例教程
这组 OAuth 系列教程,第一篇介绍了基本概念,第二篇介绍了获取令牌的四种方式,今天演示一个实例,如何通过 OAuth 获取 API 数据. 很多网站登录时,允许使用第三方网站的身份,这称为&quo ...
- Yii2 使用 QQ 和 Weibo 第三方登录源码
我们社区在 yii2-authclient 多次升级后,登录异常.一直想寻求一种通用的方法,尽量不重写 OAuth2, BaseOAuth 以及 OAuthToken 类, 所以本次直接在 initU ...
- .netcore第三方登录授权:10分钟急速接入
前言 很多对外应用的开发都考虑接入第三方登录来提高用户的体验感,避免用户进行繁琐的注册登录(登录后的完善资料必不可免). 而QQ.微信.支付宝.淘宝.微博等应用就是首选目标(无他,用户群体大,支持发开 ...
- OAuth 2.0 授权码请求
关于OAuth 2.0,请参见下面这两篇文章(墙裂推荐): <OAuth 2.0> <Spring Security OAuth 2.0> 纸上得来终觉浅,绝知此事要躬行.理论 ...
- 学习Spring Security OAuth认证(一)-授权码模式
一.环境 spring boot+spring security+idea+maven+mybatis 主要是spring security 二.依赖 <dependency> <g ...
- OAuth - 第三方登录的原理
第三方登录的原理 所谓第三方登录,实质就是 OAuth 授权.用户想要登录 A 网站,A 网站让用户提供第三方网站的数据,证明自己的身份.获取第三方网站的身份数据,就需要 OAuth 授权. 举例来说 ...
- apicloud 第三方登录授权、微信、扣扣、微博登录授权
授权登录.接入第三方的配置 例如:微信的登录授权. 首先在模块里面添加 wx 这个模块,然后在项目的配置文件里面进行配置. 配置的时候要现在微信开放平台 https://open.weixin.qq. ...
- ASP.NET 拼多多用户登录授权后使用code去换取access_token
一.拼多多开放平台 由于本人刚毕业进公司实习 遇到一些问题然后想通过博客来记录和分享给大家一起学习. 第一次写博客没什么经验不是写的很好 请大家多多关照 嘴下留情哈哈 谢谢! 好了 话不多说直接进入主 ...
随机推荐
- Unix/Linux小计
1. centos查看cpu信息 cat /proc/cpuinfo processor有几个就是有几个cpu,每一列是每个cpu的信息 每个processor中的cores是当前cpu中有几个核心. ...
- Docker快速搭建Zookeeper和kafka集群
使用Docker快速搭建Zookeeper和kafka集群 镜像选择 Zookeeper和Kafka集群分别运行在不同的容器中zookeeper官方镜像,版本3.4kafka采用wurstmeiste ...
- Haskell-chp01
-- 函数名首字母必须小写,可以包含 '来表示该函数严格求值版本(与惰性求值相对) doubleMe x = x + x doubleUs x y = doubleMe x + doubleMe y ...
- jquery插件实现瀑布流
jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- 解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
- STL源码剖析——序列式容器#5 heap
准确来讲,heap并不属于STL容器,但它是其中一个容器priority queue必不可少的一部分.顾名思义,priority queue就是优先级队列,允许用户以任何次序将任何元素加入容器内,但取 ...
- 1.0EnterpriseFrameWork 框架学习
1.先报其主页 :博主的框架是开源的 http://www.cnblogs.com/kakake/p/3938262.html . 2.学习的精髓是:该框架支持 ORM.SQL语句 和 存储过程 ,O ...
- C#写入Excel文件方式
由于在工作中经常要把数据库的统计数据导入Excel文件,进行IO磁盘操作,所以在这里记录下. 首先创建默认文件夹,并返回文件夹路径. private static string CPath(strin ...
- c#读取数据库bool值
数据库里bit这个布尔类型的字段,非常实用,但是在c#里读取时,许多人喜欢犯一些错误,导致运行报错. 实际中,有效的正确读取方法只有以下两种: int xxx= Convet.ToInt16(read ...
- docker mac 命令行登录报错处理 : Error saving credentials: error storing credentials - err: exit status 1
参考:https://blog.csdn.net/xufwind/article/details/88756557 比较新版本的docker命令行登录会出现以下错误: Error saving cre ...