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

2024-09-08 03:20
文章标签 javascript 实现 登录 vue vue3 js 第三方 frontend node github oauth

本文主要是介绍Node.js和vue3实现GitHub OAuth第三方登录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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_idclient_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_idclient_id: 'Ov23li3ZcThmL87YHUBL',
}// 请求后端登录
function reqLogin(code) {console.log('3.将获取到的code发送给后端进行登录');if (loading.value) returnloading.value = trueaxios.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_idclient_id: 'Ov23li3ZcThmL87YHUBL',// 替换为你的 client_secretclient_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_idclient_id: 'Ov23li3ZcThmL87YHUBL',// 替换为你的 client_secretclient_secret: 'e021cb59a650476e62be3ee72fc9686e2c86c1d3',
}// github登录
app.post('/api/github/login', async (req, res) => {// 1、校验必填参数if (!req.body.code) {throw new Error('必填参数不能为空！')}// 2、获取 Access tokenconst 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、验证后端传来的codeif (!code || code.length !== 20) {throw new Error('code参数不正确！');}// 2、向github发送post请求，成功的话会，response.data里面有一个access_tokenconst 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-apiconst 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. 示例代码中，没有做任何的错误处理，实际应用中，需要做错误处理。

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

这篇关于Node.js和vue3实现GitHub OAuth第三方登录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1146966。

相关文章

C# string转unicode字符的实现

C# string转unicode字符的实现

《C#string转unicode字符的实现》本文主要介绍了C#string转unicode字符的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录1. 获取字符串中每个字符的 Unicode 值示例代码：输出：2. 将 Unicode 值格式化
阅读更多...
python安装whl包并解决依赖关系的实现

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件？二、我们为什么需要使用whl文件来安装python库？三、我们应该去哪儿下
阅读更多...
Python脚本实现图片文件批量命名

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Java中将异步调用转为同步的五种实现方法

Java中将异步调用转为同步的五种实现方法

《Java中将异步调用转为同步的五种实现方法》本文介绍了将异步调用转为同步阻塞模式的五种方法：wait/notify、ReentrantLock+Condition、Future、CountDownL... 目录异步与同步的核心区别方法一：使用wait/notify + synchronized代码示例关键
阅读更多...
MobaXterm远程登录工具功能与应用小结

MobaXterm远程登录工具功能与应用小结

《MobaXterm远程登录工具功能与应用小结》MobaXterm是一款功能强大的远程终端软件,主要支持SSH登录,拥有多种远程协议,实现跨平台访问,它包括多会话管理、本地命令行执行、图形化界面集成和... 目录1. 远程终端软件概述1.1 远程终端软件的定义与用途1.2 远程终端软件的关键特性2. 支持的
阅读更多...
Nginx实现动态封禁IP的步骤指南

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配
阅读更多...
Java中实现订单超时自动取消功能(最新推荐)

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue（1）定义实现Delayed接口的实体类 （
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...
将java程序打包成可执行文件的实现方式

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法：手动打包（将编译后的代码及JRE运行环境一起打包）,使用第三方打包工具（如Launch4j）和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2