Node.js和vue3实现GitHub OAuth第三方登录

news2024/12/24 21:40:32

Node.js和vue3实现GitHub OAuth第三方登录

前言

第三方登入太常见了，微信，微博，QQ…总有一个你用过。

在开发中，我们希望用户可以通过GitHub账号登录我们的网站，这样用户就不需要注册账号，直接通过GitHub账号登录即可。

效果演示

在这里插入图片描述

注册配置 GitHub 应用

1.首先登录你的GitHub然后点击右上角的头像->点击进入Settings页面

在这里插入图片描述

2.在Settings页面中点击左侧边栏的 Developer settings

在这里插入图片描述

3.然后点击OAuth Apps，点击 Register a new application

一个用户或组织最多可以拥有100个OAuth应用。

在这里插入图片描述

4.填写应用信息

我这边使用了腾讯翻译插件，为了照顾英语不好的朋友观看理解。

在这里插入图片描述

这里主要是Authorization callback URL的填写；

这个应用回调地址就是上面登录流程授权之后返回的redirect_uri。

5.点击Generate new client secret生成Client Secret

在这里插入图片描述

6.将Client ID和Client Secret复制到配置文件，用于后面向GitHub发送请求传参。

注意： 只会出现一次Client secrets,自己保存好

在这里插入图片描述

前后端调用流程步骤：

  • 前端：用户点击按钮跳转到GitHub授权页面；
  • 前端：用户在授权页面同意授权后，GitHub将用户重定向到您的网站；
  • 前端：重定向的URL中包含一个授权码code，在该页面中获取授权码；
  • 前端：调用后端登录api，将获取到的code传给后端；
  • 后端：后端收到code后调用GitHub的token api，获取access_token；
  • 后端：获取到access_token后调用 user api，获取用户信息返回给前端；
  • 前端：拿到后端返回的用户信息后，将用户信息保存到本地，完成登录。

前端 Vue 实现

1.安装必要依赖

  • axios是一个HTTP客户端库，用于向服务端发送请求。
npm install axios

2.替换你的配置信息

// github配置信息
const config = {
  // 替换为你的回调地址
  redirect_uri: 'http://127.0.0.1:9090/pages/login/login',
  // 替换为你的 client_id
  client_id: 'Ov23li3ZcThmL87YHUBL',
}

3.代码示例

<template>
  <div class="user-box">
    <div v-if="userInfo.id" class="user-info">
      <img class="user-img" :src="userInfo.avatar_url" />
      <text class="user-name">用户昵称：{{ userInfo.name || userInfo.login }}</text>
      <text class="user-openid">nodeId{{ userInfo.node_id }}</text>
    </div>
    <div v-else class="user-empty">
      {{ loading ? '用户登录中...' : userInfo?.id ? '用户已登录' : '用户未登录' }}
    </div>
  </div>
  <button @click="oauth">发起GitHub授权</button>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
const loading = ref(false)
let userInfo = ref({})
// github配置信息
const config = {
  // 替换为你的回调地址
  redirect_uri: 'http://127.0.0.1:9090/pages/login/login',
  // 替换为你的 client_id
  client_id: 'Ov23li3ZcThmL87YHUBL',
}

// 请求后端登录
function reqLogin(code) {
  console.log('3.将获取到的code发送给后端进行登录');
  if (loading.value) return
  loading.value = true
  axios.post('http://127.0.0.1:3000/api/github/login', { code })
    .then(res => {
      // 前端拿到用户信息后，可以保存到数据库或者本地，或者直接跳转到个人中心页面。
      console.log('4.登录成功获取到用户信息', res.data);
      userInfo.value = res.data
    }).catch(err => {
      console.log('登录出错了！', err);
    }).finally(() => {
      console.log('finally');
      loading.value = false
    })
}

// 获取地址栏中的code 获取不到将返回 null
function getCode() {
  // 获取当前 URL 的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  // 从查询参数中获取 'code' 值
  const code = urlParams.get('code');
  if (code) {
    console.log('2.授权后，获取地址栏中的code');
  }
  return code
}

// 发起授权
function oauth() {
  console.log('1.点击授权按钮，跳转到GitHub授权页中');
  const url = `https://github.com/login/oauth/authorize?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`
  window.location.href = url
}

onMounted(() => {
  const code = getCode()
  if (code) reqLogin(code)
})
</script>

<style scoped lang="scss">
.user-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .user-img {
      width: 60px;
      height: 60px;
      border-radius: 99px;
      border: 1px solid black;
    }
  }

  .user-empty {
    // background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 6px;
  }
}
</style>

后端 Node.js 实现

1.安装必要依赖

  • express是一个Web应用框架，用于构建Web应用。
  • cors是一个中间件，用于处理跨域请求。
  • axios是一个HTTP客户端库，用于向服务端发送请求。
npm install express cors axios

2.替换你的配置信息

// github配置信息
const githubConfig = {
  // 替换为你的回调地址
  redirect_uri: 'http://127.0.0.1:9090/pages/login/login',
  // 替换为你的 client_id
  client_id: 'Ov23li3ZcThmL87YHUBL',
  // 替换为你的 client_secret
  client_secret: 'e021cb59a650476e62be3ee72fc9686e2c86c1d3',
}

3.代码示例

// Node.js和vue3实现GitHub OAuth第三方登录
const express = require('express'); // 导入 Express 模块
const cors = require('cors'); // 导入 CORS 模块，用于处理跨域请求
const axios = require('axios'); // 导入 Axios 模块，用于发起 HTTP 请求

const app = express(); // 创建 Express 应用实例
app.use(cors()); // 使用 CORS 中间件解决跨越请求
app.use(express.json()) // 解析 json 格式请求体
app.use(express.urlencoded({ extended: true })) // 解析传统表单请求体

// github配置信息
const githubConfig = {
  // 替换为你的回调地址
  redirect_uri: 'http://127.0.0.1:9090/pages/login/login',
  // 替换为你的 client_id
  client_id: 'Ov23li3ZcThmL87YHUBL',
  // 替换为你的 client_secret
  client_secret: 'e021cb59a650476e62be3ee72fc9686e2c86c1d3',
}

// github登录
app.post('/api/github/login', async (req, res) => {
  // 1、校验必填参数
  if (!req.body.code) {
    throw new Error('必填参数不能为空！')
  }
  // 2、获取 Access token
  const accessTokenInfo = await getAccessToken(req.body.code)
  // 3、获取用户信息
  const userInfo = await getUserInfo(accessTokenInfo.access_token)
  // 4、在这步你可以将用户信息存入数据库中等其他操作，这里我直接返回了
  res.status(200).send(userInfo)
})

// 获取 access_token
async function getAccessToken(code) {

  //官方文档： https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps

  // 1、验证后端传来的code
  if (!code || code.length !== 20) {
    throw new Error('code参数不正确！');
  }

  // 2、向github发送post请求，成功的话会，response.data里面有一个access_token
  const response = await axios({
    method: 'post',
    url: 'https://github.com/login/oauth/access_token',
    params: {
      redirect_uri: githubConfig.redirect_uri,
      client_id: githubConfig.client_id,
      client_secret: githubConfig.client_secret,
      code,
    },
    headers: { 'accept': 'application/json' },
  });

  if (!response.data?.access_token) {
    throw new Error('获取 access_token 失败！' + JSON.stringify(response.data))
  }

  // response.data:{
  //   "access_token":"gho_16C7e42F292c6912E7710c838347Ae178B4a",
  //   "scope":"repo,gist",
  //   "token_type":"bearer"
  // }

  return response.data
}


// 获取用户信息
async function getUserInfo(access_token) {
  //官方文档： https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#3-use-the-access-token-to-access-the-api
  const response = await axios({
    method: "get",
    url: 'https://api.github.com/user',
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });

  if (!response.data?.id) throw new Error('获取用户信息失败！')

  /**
  response.data = {
    "login": "China-quanda",
    "id": 36378336,
    "node_id": "MDQ6VXNlcjM2Mzc4MzM2",
    "avatar_url": "https://avatars.githubusercontent.com/u/36378336?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/China-quanda",
    "html_url": "https://github.com/China-quanda",
    "followers_url": "https://api.github.com/users/China-quanda/followers",
    "following_url": "https://api.github.com/users/China-quanda/following{/other_user}",
    "gists_url": "https://api.github.com/users/China-quanda/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/China-quanda/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/China-quanda/subscriptions",
    "organizations_url": "https://api.github.com/users/China-quanda/orgs",
    "repos_url": "https://api.github.com/users/China-quanda/repos",
    "events_url": "https://api.github.com/users/China-quanda/events{/privacy}",
    "received_events_url": "https://api.github.com/users/China-quanda/received_events",
    "type": "User",
    "site_admin": false,
    "name": "Quanda",
    "company": null,
    "blog": "",
    "location": "北京",
    "email": null,
    "hireable": null,
    "bio": null,
    "twitter_username": null,
    "notification_email": null,
    "public_repos": 6,
    "public_gists": 0,
    "followers": 0,
    "following": 2,
    "created_at": "2018-02-11T17:35:16Z",
    "updated_at": "2024-09-07T10:31:22Z"
  }
  */

  return response.data;
}

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://127.0.0.1:${PORT}`);
});

总结

  1. 首先，在github上注册一个应用，并配置好回调地址，获取client_id和client_secret。
  2. 在前端页面上，通过点击发起GitHub授权按钮，替换当前地址为 https://github.com/login/oauth/authorize，携带上我们前面获取的client_id和回调地址。
  3. github会返回一个code，这个code是临时的，我们通过这个code向github请求access_token，再通过access_token向github请求用户信息。
  4. 最后，将用户信息返回给前端，前端拿到用户信息后，可以保存到数据库或者本地，或者直接跳转到个人中心页面。
  5. 注意，这个项目只是演示如何实现github登录，实际应用中，需要做更多的处理，比如用户注册，用户信息保存等。
  6. 示例代码仅供参考，实际应用中，需要根据具体的业务需求进行修改。
  7. 示例代码中，没有做任何的错误处理，实际应用中，需要做错误处理。

我们发现第三方登录的流程其实都差不多，差别就是不同的平台，和自己应用的业务会有点不一样。所以呢，在做之前先要理清思路，仔细看文档。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2113334.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mysql树形结构返回是否叶子节点

mysql树形结构返回是否叶子节点

我们界面上展示树形结构的时候往往会用到懒加载&#xff0c;做懒加载需要知道哪个节点是叶子节点&#xff0c;这样叶子节点就不需要继续往下加载了&#xff0c;这种需求可以通过sql实现 先来看下表结构 方式一,通过sql语句直接获取leaf 什么是叶子节点&#xff1f;就是没有哪…
阅读更多...
海外云服务器安装 Redis 6.2.x （Ubuntu 18.04 记录篇三）

海外云服务器安装 Redis 6.2.x （Ubuntu 18.04 记录篇三）

本文已首发于 秋码记录 通过前两篇的实践&#xff0c;我们已然在海外云服务器/VPS安装了JDK和MariaDB数据库&#xff0c;一个能够运行Java项目的海外云服务器/VPS算是告一段落了。 然而&#xff0c;在这请求量与日俱增的情况下&#xff0c;MariaDB数据库显然是在超负债的工作…
阅读更多...
《黑暗之魂2:原罪学者》是什么类型的游戏 《黑暗之魂》可以在苹果Mac电脑上玩吗？

《黑暗之魂2:原罪学者》是什么类型的游戏 《黑暗之魂》可以在苹果Mac电脑上玩吗？

在宏大的世界观游戏中&#xff0c;《黑暗之魂2:原罪学者》脱颖而出&#xff0c;以其探索性和挑战性征服了全球玩家的心灵。下面我们来看看《黑暗之魂2:原罪学者》是什么类型的游戏&#xff0c;《黑暗之魂2:原罪学者》可以在苹果电脑玩吗的相关内容。 一、《黑暗之魂2:原罪学者》…
阅读更多...
[计算机网络]-计网学习笔记-计网知识点总结（附完整笔记）

[计算机网络]-计网学习笔记-计网知识点总结（附完整笔记）

本笔记是跟着 b站 湖科大教书匠 视频做的笔记&#xff0c;其中图片为视频中的 PPT&#xff0c;加上了自己的注释。 这是原视频链接。大家可以参照着笔记看原视频。视频中的 PPT 做的非常好。 【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】https://www.bilib…
阅读更多...
TOPSIS法详细讲解+Python代码实现

TOPSIS法详细讲解+Python代码实现

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
数据结构——双链表实现和注释浅解

数据结构——双链表实现和注释浅解

关于双链表的基础部分增删查改的实现和一点理解&#xff0c;写在注释里~ 前言 浅记 1. 哨兵位的节点不能被删除&#xff0c;节点的地址也不能发生改变&#xff0c;所以是传一级指针 2. 哨兵位并不存储有效数据&#xff0c;所以它并不是有效节点 3. 双向链表为空时&#xff…
阅读更多...
单点登录：cas单点登录实现原理浅析

单点登录：cas单点登录实现原理浅析

cas单点登录实现原理浅析 一晃几个月没写博客了&#xff0c;今年多灾多难的一年。 安能摧眉折腰事权贵&#xff0c;使我不得开心颜&#xff01; 财富是对认知的补偿&#xff0c;不是对勤奋的嘉奖。勤奋只能解决温饱&#xff0c;要挣到钱就得预知风口&#xff0c;或者有独到见解…
阅读更多...
探寻 IP 代理地址繁多之因

探寻 IP 代理地址繁多之因

在当今的网络天地里&#xff0c;IP 代理服务随处可见&#xff0c;且令人称奇的是&#xff0c;它们常常手握海量的 IP 地址可供挑选。那么&#xff0c;究竟是什么原因使得 IP 代理拥有如此众多的地址呢&#xff1f;现在&#xff0c;就让我们一同深入探究这个神秘现象背后的缘由。…
阅读更多...
Camunda调用子流程案例

Camunda调用子流程案例

调用子流程 调用子流程是指子流程在主流程的外面。子流程一般是多个流程可重用的流程&#xff0c;也可以独立调用子流程。 可以对比编程中的方法抽取。子流程运行时&#xff0c;主流程也是等待状态。子流程结束&#xff0c;主流程继续。 BPMN设计 主流程 全局配置 上传视频 处…
阅读更多...
并查集基础与简单扩展应用

并查集基础与简单扩展应用

并查集 基础题目路径压缩 扩展应用扩展题目1扩展题目2 并查集的结构是一棵树 并查集有两种功能&#xff0c;一种是判断两个元素是否在同一集合&#xff0c;第二种是合并两个集合 并查集的实现需要记录每个节点的父亲节点 判断两个元素是否在同一集合&#xff0c;即判断两个元…
阅读更多...
ARM编程模型、指令集、ARM汇编语言程序设计

ARM编程模型、指令集、ARM汇编语言程序设计

一、编程模型 1.1数据和指令类型 在之后的演示当中&#xff0c;我们大多数将采用ARM指令集 1.2处理器工作模式 1.3ARM寄存器 1.3.1分类 &#xff08;1&#xff09; 31 个通用寄存器&#xff0c;包括 PC&#xff08;程序计数器&#xff09;在内&#xff0c;都是 32 位的寄存器…
阅读更多...
实习项目|苍穹外卖|day7

实习项目|苍穹外卖|day7

缓存菜品 1.根据原型进行需求分析与设计&#xff08;接口文档&#xff09; 2.根据接口设计DTO&#xff08;redis数据类型选取&#xff09; 3.编码controller-》service-》mapper GetMapping("/list")ApiOperation("根据分类id查询菜品")public Result<…
阅读更多...
51单片机-第十三节-直流电机驱动（PWM）

51单片机-第十三节-直流电机驱动（PWM）

一、直流电机介绍&#xff1a; 直流电机是一种将电能转换为机械能的装置。 一般的直流电机有两个电极&#xff0c;电极正接&#xff0c;电机正转&#xff0c;电极反接&#xff0c;电机反转。 直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&#xff08;转子&#…
阅读更多...
GB35114 USC安防平台 中星微国密摄像机配置 流程

GB35114 USC安防平台 中星微国密摄像机配置 流程

中星微国密摄像机配置介绍 如下以中星微VS-IPC8021S-Y-T4摄像机为例&#xff0c;需要先各自获取p10文件&#xff0c;并通过证书签发机构或者测试SM2证书签发获取证书。 网络配置如下: 摄像机的IP地址为192.168.1.108&#xff0c;国标ID为34020000001320000015 系统的IP地址…
阅读更多...
Robotframework框架基础

Robotframework框架基础

1.Robot Framework是开源的自动化测试框架&#xff0c;基于关键字驱动的测试方法2.它提供用于创建和执行自动化测试的工具和库&#xff0c;并支持使用不同的测试库和插件进行扩展 一.以下是Robot Framework框架的基础知识 1. 安装&#xff1a;通过pip安装Robot Framework和相…
阅读更多...
打造可视化数字大屏供应链管理平台详解：从食堂采购系统源码开始

打造可视化数字大屏供应链管理平台详解：从食堂采购系统源码开始

这篇文章将深入探讨直播美颜SDK与主播美颜工具的技术原理及其发展趋势&#xff0c;帮助开发者了解如何通过技术手段实现流畅、高效的实时美颜效果。 一、什么是直播美颜SDK&#xff1f; 直播美颜SDK是一种为开发者提供实时美颜功能的集成开发工具包。它通过对摄像头捕捉到的画…
阅读更多...
现代计算机中数字的表示与浮点数、定点数

现代计算机中数字的表示与浮点数、定点数

现代计算机中数字的表示与浮点数、定点数 导读&#xff1a;浮点数运算是一个非常有技术含量的话题&#xff0c;不太容易掌握。许多程序员都不清楚使用操作符比较float/double类型的话到底出现什么问题。这篇文章讲述了浮点数的来龙去脉&#xff0c;所有的软件开发人员都应该读…
阅读更多...
轻松搞定用户认证：微搭低代码平台打造完美登录体验01用户登录

轻松搞定用户认证：微搭低代码平台打造完美登录体验01用户登录

目录 1 创建数据源2 搭建后端API3 用户登录4 最终的代码总结 欢迎阅读我们的微搭低代码全栈开发课程&#xff0c;这是我们的第二篇。在第一篇中我们整体描述了小程序的功能结构&#xff0c;这一篇我们就进入实际的开发。 在开发小程序的时候&#xff0c;第一个需要考虑的就是用…
阅读更多...
数据结构基础讲解（一）——线性表之顺序表专项练习

数据结构基础讲解（一）——线性表之顺序表专项练习

本文数据结构讲解参考书目&#xff1a; 通过网盘分享的文件&#xff1a;数据结构 C语言版.pdf 链接: https://pan.baidu.com/s/159y_QTbXqpMhNCNP_Fls9g?pwdze8e 提取码: ze8e 目录 前言 一.线性表的定义 二.线性表的基本操作 三.线性表的顺序存储和表示 四.顺序表中基本操作…
阅读更多...
如何设置好看的电脑屏保？电脑屏保设置教程

如何设置好看的电脑屏保？电脑屏保设置教程

如何设置好看的电脑屏保&#xff1f;电脑屏保设置教程。大家好&#xff0c;今天小编给大家带来了好看的电脑屏保&#xff0c;教大家如何设置一个好看的电脑屏保。屏保软件很多&#xff0c;今天我们介绍一款比较有特殊的屁屏保软件&#xff1a;芝麻时钟&#xff08;芝麻时钟 桌面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023