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。

相关文章

windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...
C#实现获取电脑中的端口号和硬件信息

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候，发现软件中的端口号并不是普通的COM1，而是带有硬件信息的。那么如果我们使用C#编写软件时候，如
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2