GitHub OAuth 第三方登录实战

最新推荐文章于 2024-05-03 08:00:00 发布

chengqiuming

最新推荐文章于 2024-05-03 08:00:00 发布

阅读量624

点赞数 1

分类专栏： Spring Security 文章标签： Spring Security

本文链接：https://blog.csdn.net/chengqiuming/article/details/103317778

版权

Spring Security 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

一参考

http://www.ruanyifeng.com/blog/2019/04/github-oauth.html

二流程场景

A 网站允许 GitHub 登录，整个流程如下。

1 A 网站让用户跳转到 GitHub。
2 GitHub 要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"
3 用户同意，GitHub 就会重定向回 A 网站，同时发回一个授权码。
4 A 网站使用授权码，向 GitHub 请求令牌。
5 GitHub 返回令牌.
6 A 网站使用令牌，向 GitHub 请求用户数据。

三 GitHub应用登记

1 登记网址

https://github.com/settings/applications/new

2 填写如下

3 提交后，github返回信息如下

记录下Client ID和Client Secret

Client ID：c************1

Client Secret：d**************d

四代码位置

https://github.com/cakin24/node-oauth-demo

五核心代码修改

1 index,js

// Fill in your client ID and client secret that you obtained
// while registering the application
// 主要是修改下面两行
const clientID = 'c**************1'
const clientSecret = 'd**********d'


const Koa = require('koa');
const path = require('path');
const serve = require('koa-static');
const route = require('koa-route');
const axios = require('axios');


const app = new Koa();


const main = serve(path.join(__dirname + '/public'));


const oauth = async ctx => {
  const requestToken = ctx.request.query.code;
  console.log('authorization code:', requestToken);


  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'
    }
  });


  const accessToken = tokenResponse.data.access_token;
  console.log(`access token: ${accessToken}`);


  const result = await axios({
    method: 'get',
    url: `https://api.github.com/user`,
    headers: {
      accept: 'application/json',
      Authorization: `token ${accessToken}`
    }
  });
  console.log(result.data);
  const name = result.data.name;


  ctx.response.redirect(`/welcome.html?name=${name}`);
};


app.use(main);
app.use(route.get('/oauth/redirect', oauth));


app.listen(8080);

2 public/index.html

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Node OAuth2 Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
        <a id="login">Login with GitHub</a>
<script>
  // 主要是修改这一行
  const client_id = 'c*************1';
  const authorize_uri = 'https://github.com/login/oauth/authorize';
  const redirect_uri = 'http://localhost:8080/oauth/redirect';
  const link = document.getElementById('login');
  link.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`;
</script>
</body>
</html>

六安装依赖

F:\Spring Security\node-oauth-demo-master>cnpm install

七启动服务

F:\Spring Security\node-oauth-demo-master>node index.js

八测试

1 浏览器输入： http://localhost:8080/

2 页面显示如下

3 点击该链接到Github

点击Authorize cakin24，程序会得到github返回的授权码code：5**************a，接着利用client_id、client_secret、code 向github请求access_token，返回access_token后，再利用https://api.github.com/user和token向github请求用户数据，这个过程都是下面代码自动完成的。

const oauth = async ctx => {
  const requestToken = ctx.request.query.code;
  console.log('authorization code:', requestToken);


  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'
    }
  });


  const accessToken = tokenResponse.data.access_token;
  console.log(`access token: ${accessToken}`);


  const result = await axios({
    method: 'get',
    url: `https://api.github.com/user`,
    headers: {
      accept: 'application/json',
      Authorization: `token ${accessToken}`
    }
  });
  console.log(result.data);
  const name = result.data.name;


  ctx.response.redirect(`/welcome.html?name=${name}`);
};

最终控制台输出下面信息，就是我们想得到的用户信息

authorization code: 5*********************a
access token: a********************3
{
  login: 'cakin24',
  id: 26600327,
  node_id: 'MDQ6VXNlcjI2NjAwMzI3',
  avatar_url: 'https://avatars1.githubusercontent.com/u/26600327?v=4',
  gravatar_id: '',
  url: 'https://api.github.com/users/cakin24',
  html_url: 'https://github.com/cakin24',
  followers_url: 'https://api.github.com/users/cakin24/followers',
  following_url: 'https://api.github.com/users/cakin24/following{/other_user}',
  gists_url: 'https://api.github.com/users/cakin24/gists{/gist_id}',
  starred_url: 'https://api.github.com/users/cakin24/starred{/owner}{/repo}',
  subscriptions_url: 'https://api.github.com/users/cakin24/subscriptions',
  organizations_url: 'https://api.github.com/users/cakin24/orgs',
  repos_url: 'https://api.github.com/users/cakin24/repos',
  events_url: 'https://api.github.com/users/cakin24/events{/privacy}',
  received_events_url: 'https://api.github.com/users/cakin24/received_events',
  type: 'User',
  site_admin: false,
  name: null,
  company: null,
  blog: '',
  location: null,
  email: null,
  hireable: null,
  bio: null,
  public_repos: 107,
  public_gists: 2,
  followers: 1,
  following: 3,
  created_at: '2017-03-22T13:10:10Z',
  updated_at: '2019-10-18T07:16:46Z'
}

chengqiuming

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
GitHub OAuth 第三方登录实战

一参考http://www.ruanyifeng.com/blog/2019/04/github-oauth.html二流程场景A 网站允许 GitHub 登录，整个流程如下。1 A 网站让用户跳转到 GitHub。2 GitHub 要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"3 用户同意，GitHub 就会重定向回 A 网站，同时发回一个授权码。...
复制链接

扫一扫