nodejs实现OAuth2模式第三方GitHub授权登录

什么是OAuth2
       OAuth(Open Authorization,开放授权)协议为用户资源提供一个安全、开放而又简单的标准,是目前最流行的授权机制, 用于授权第三方应用。
       OAuth的授权方式可以向第三方应用提供用户信息(比如头像、昵称等); 且不会使第三方触及到用户的用户名和密码,因此OAuth授权是安全的。

应用场景
第三方应用授权登录,例如:用支付宝或QQ账号授权登录优酷视频。

GitHub授权登录原理

  1. 网页登录认证,请求后台服务器
  2. 后台服务器重定向到GitHub认证
  3. GitHub服务器第三方认证
  4. GitHub服务器认证成功,回调带回认证状态code给后台服务器
  5. 后台 服务器用code想GitHub服务器申请令牌
  6. 申请成功,GitHub服务器向后台服务器返回认证令牌;后台服务器根据令牌获取GitHub用户信息
  7. 刷新页面
    在这里插入图片描述
    一、GitHub服务器配置
         跳转GitHub
  • 登录GitHub账户,点击设置里的Developer settings按钮,进入开发者配置
    在这里插入图片描述
  • 切换tab为OAuth Apps
    在这里插入图片描述
  • 点击New Oauth APP 配置授权页面,注册授权应用
    • Application name:应用名称
    • Homepage URL:应用首页地址
    • Application description:应用描述
    • Authorization callback URL:应用回调地址
      在这里插入图片描述
  • 注册完成,生成Client ID和Client Secret
    在这里插入图片描述

二、前端页面

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>OAuth</title>
</head>
<body>
  <div>
  	<!-- a标签跳转登录 -->
    <a href="/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 querystring = require('querystring')
const axios = require('axios')
const app = new Koa()
// 加载index.html
app.use(static(__dirname + '/'))

// GitHub登录参数配置;配置授权应用生成的Client ID和Client Secret
const config = {
  client_id: 'xxxxxxxxxxxxxxxxxx',
  client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}

// 登录接口
router.get('/github/login', async ctx => {
  // 重定向到GitHub认证接口,并配置参数
  let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id
  // 转发到授权服务器
  ctx.redirect(path)
})

// GitHub授权登录成功回调,地址必须与GitHub配置的回调地址一致
router.get('/github/callback', async ctx => {
  console.log('callback...')

  // 服务器认证成功,回调带回认证状态code
  const code = ctx.query.code
  const params = {
    client_id: config.client_id,
    client_secret: config.client_secret,
    code: code
  }

  // 申请令牌token
  let res = await axios.post('https://github.com/login/oauth/access_token', params)
  const access_token = querystring.parse(res.data).access_token

  // 根据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, () => {
  console.log('listening port at 3000...')
})

结果

  • 启动服务器node index.js
    在这里插入图片描述
  • 点击Login with github,跳转GitHub授权登录
    在这里插入图片描述
  • 登录成功回调,根据回调参数code获取用户信息
    在这里插入图片描述
发布了35 篇原创文章 · 获赞 2 · 访问量 352
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览