GitHub OAuth 第三方登录示例教程(转)

旅行者一号 發表於 2020-5-25 10:29:00

GitHub OAuth 第三方登录示例教程(转)

http://www.ruanyifeng.com/blog/2019/04/github-oauth.html
　　
这组 OAuth 系列教程，第一篇介绍了基本概念，第二篇介绍了获取令牌的四种方式，今天演示一个实例，如何通过 OAuth 获取 API 数据。
很多网站登录时，允许使用第三方网站的身份，这称为"第三方登录"。
<img src="https://img2020.cnblogs.com/blog/545911/202005/545911-20200525102458543-211837289.png">
 
 
 下面就以 GitHub 为例，写一个最简单的应用，演示第三方登录。
<h2>一、第三方登录的原理</h2>
　　
所谓第三方登录，实质就是 OAuth 授权。用户想要登录 A 网站，A 网站让用户提供第三方网站的数据，证明自己的身份。获取第三方网站的身份数据，就需要 OAuth 授权。
举例来说，A 网站允许 GitHub 登录，背后就是下面的流程。
<blockquote><ol start="1">
<li>A 网站让用户跳转到 GitHub。</li>
<li>GitHub 要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"</li>
<li>用户同意，GitHub 就会重定向回 A 网站，同时发回一个授权码。</li>
<li>A 网站使用授权码，向 GitHub 请求令牌。</li>
<li>GitHub 返回令牌.</li>
<li>A 网站使用令牌，向 GitHub 请求用户数据。</li>
</ol></blockquote>
下面就是这个流程的代码实现。
<h2>二、应用登记</h2>
一个应用要求 OAuth 授权，必须先到对方网站登记，让对方知道是谁在请求。
所以，你要先去 GitHub 登记一下。当然，我已经登记过了，你使用我的登记信息也可以，但为了完整走一遍流程，还是建议大家自己登记。这是免费的。
访问这个网址，填写登记表。
<img src="https://img2020.cnblogs.com/blog/545911/202005/545911-20200525102603869-1850732020.png">
 
 
 
应用的名称随便填，主页 URL 填写<code>http://localhost:8080</code>，跳转网址填写 <code>http://localhost:8080/oauth/redirect</code>。
提交表单以后，GitHub 应该会返回客户端 ID（client ID）和客户端密钥（client secret），这就是应用的身份识别码。
<h2>三、示例仓库</h2>
我写了一个代码仓库，请将它克隆到本地。
<blockquote>
<pre class=" language-bash"><code class=" language-bash">
$ git clone git@github.com:ruanyf/node-oauth-demo.git
$ cd node-oauth-demo
</code></pre>
</blockquote>
两个配置项要改一下，写入上一步的身份识别码。
<blockquote>
<ul>
<li><code>index.js</code>：改掉变量<code>clientID</code> and <code>clientSecret</code></li>
<li><code>public/index.html</code>：改掉变量<code>client_id</code></li>
</ul>
</blockquote>
然后，安装依赖。
<blockquote>
<pre class=" language-bash"><code class=" language-bash">
$ npm install
</code></pre>
</blockquote>
启动服务。
<blockquote>
<pre class=" language-bash"><code class=" language-bash">
$ node index.js
</code></pre>
</blockquote>
浏览器访问<code>http://localhost:8080</code>，就可以看到这个示例了。
<h2>四、浏览器跳转 GitHub</h2>
示例的首页很简单，就是一个链接，让用户跳转到 GitHub。
<img src="https://img2020.cnblogs.com/blog/545911/202005/545911-20200525102702577-80240375.png">
 
 
 
跳转的 URL 如下。
<blockquote>
<pre class=" language-markup"><code class=" language-markup">
https://github.com/login/oauth/authorize?
client_id=7e015d8ce32370079895&
redirect_uri=http://localhost:8080/oauth/redirect
</code></pre>
</blockquote>
这个 URL 指向 GitHub 的 OAuth 授权网址，带有两个参数：<code>client_id</code>告诉 GitHub 谁在请求，<code>redirect_uri</code>是稍后跳转回来的网址。
用户点击到了 GitHub，GitHub 会要求用户登录，确保是本人在操作。
<h2>五、授权码</h2>
登录后，GitHub 询问用户，该应用正在请求数据，你是否同意授权。
<img src="https://img2020.cnblogs.com/blog/545911/202005/545911-20200525102729255-2099634329.png">
 
 
 
用户同意授权， GitHub 就会跳转到<code>redirect_uri</code>指定的跳转网址，并且带上授权码，跳转回来的 URL 就是下面的样子。
<blockquote>
<pre class=" language-markup"><code class=" language-markup">
http://localhost:8080/oauth/redirect?
code=859310e7cecc9196f4af
</code></pre>
</blockquote>
后端收到这个请求以后，就拿到了授权码（<code>code</code>参数）。
<h2>六、后端实现</h2>
示例的后端采用 Koa 框架编写，具体语法请看教程。
这里的关键是针对<code>/oauth/redirect</code>的请求，编写一个路由，完成 OAuth 认证。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
const oauth = async ctx => {
 // ...
};

app.use(route.get('/oauth/redirect', oauth));
</code></pre>
</blockquote>
上面代码中，<code>oauth</code>函数就是路由的处理函数。下面的代码都写在这个函数里面。
路由函数的第一件事，是从 URL 取出授权码。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
const requestToken = ctx.request.query.code;</code></pre>
</blockquote>
<h2>七、令牌</h2>
后端使用这个授权码，向 GitHub 请求令牌。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
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'
}
});
</code></pre>
</blockquote>
上面代码中，GitHub 的令牌接口<code>https://github.com/login/oauth/access_token</code>需要提供三个参数。
<blockquote>
<ul>
<li><code>client_id</code>：客户端的 ID</li>
<li><code>client_secret</code>：客户端的密钥</li>
<li><code>code</code>：授权码</li>
</ul>
</blockquote>
作为回应，GitHub 会返回一段 JSON 数据，里面包含了令牌<code>accessToken</code>。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
const accessToken = tokenResponse.data.access_token;
</code></pre>
</blockquote>
<h2>八、API 数据</h2>
有了令牌以后，就可以向 API 请求数据了。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
const result = await axios({
method: 'get',
url: `https://api.github.com/user`,
headers: {
accept: 'application/json',
Authorization: `token ${accessToken}`
}
});
</code></pre>
</blockquote>
上面代码中，GitHub API 的地址是<code>https://api.github.com/user</code>，请求的时候必须在 HTTP 头信息里面带上令牌<code>Authorization: token 361507da</code>。
然后，就可以拿到用户数据，得到用户的身份。
<blockquote>
<pre class=" language-javascript"><code class=" language-javascript">
const name = result.data.name;
ctx.response.redirect(`/welcome.html?name=${name}`);</code></pre>
</blockquote>
  
来源：https://www.cnblogs.com/lzphu/p/12955429.html

頁: [1]

琼殿技术论坛's Archiver

GitHub OAuth 第三方登录示例教程(转)