GitHub OAuth 第三方登录实战

一 参考

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

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 GitHub 第三方登录接入到你的应用程序中,你可以按照以下步骤进行操作: 1. 创建一个 GitHub 开发者帐户:在 GitHub 上创建一个帐户(如果你还没有)。然后登录到你的帐户并导航到开发者设置页面。 2. 创建一个新的 OAuth 应用程序:在开发者设置页面中,点击 "New OAuth App" 按钮创建一个新的应用程序。填写应用程序的名称、主页 URL(可以是你的应用程序网站)、回调 URL(GitHub 会将用户重定向到此 URL),并选择适当的权限范围。 3. 获取应用程序的客户端 ID 和客户端密钥:创建应用程序后,你将获得一个客户端 ID 和一个客户端密钥。这些信息将在后续步骤中使用。 4. 在你的应用程序中实现登录功能:根据你所使用的编程语言和框架,找到适当的库或插件来帮助你实现 GitHub 第三方登录功能。不同语言和框架可能有不同的实现方式,你可以参考 GitHub 的官方文档或搜索相关示例代码。 5. 配置登录回调处理:当用户使用 GitHub 登录成功后,GitHub 会将用户重定向到你在步骤 2 中设置的回调 URL。在你的应用程序中,需要处理这个回调请求,并从中提取授权码或访问令牌。使用这些令牌,你可以与 GitHub API 进行交互,获取用户的信息或执行其他操作。 6. 使用 GitHub API:一旦用户成功登录并授权你的应用程序,你可以使用 GitHub API 访问用户的存储库、个人信息等。根据你的需求,调用适当的 API 端点来获取所需的数据。 这些步骤涵盖了一个基本的 GitHub 第三方登录接入流程。具体实现方式可能因你所使用的编程语言和框架而有所不同,但上述步骤应该能够帮助你开始进行接入。记得在实际开发过程中查阅相关文档和示例代码,以确保正确地实现登录功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值