nodejs实现github第三方登录

最新推荐文章于 2023-10-17 15:56:50 发布

Selenium399

最新推荐文章于 2023-10-17 15:56:50 发布

阅读量686

点赞数

分类专栏： nodejs 文章标签： nodejs oauth github 第三方登录

本文链接：https://blog.csdn.net/qq_45453266/article/details/107858441

版权

nodejs 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

在这里插入图片描述

一、详细流程

在这里插入图片描述

二、具体流程

1.注册应用

①登录github，Settings=>Developer settings=>OAuth Apps=>Register a new application
在这里插入图片描述

在这里插入图片描述
②填写应用信息

③注册完成，得到Client ID和Client Secret
在这里插入图片描述

2.前端发起请求到github授权页面，授权成功拿到code重定向到配置的后端callback URL

<a href="https://github.com/login/oauth/authorize?client_id={你自己的cilent_id}&redirect_uri=http://localhost:3001/github" class="iconfont ali-icon-github"></a>

3.后端拿到code，带着code请求github，拿到token,再将token放在url上传递给前端

router.get('/github',controller.auth.githubLogin)

const axios = require('axios')
const querystring = require('querystring')

const config = {
    client_id: "你自己的client_id",
    client_secret: "你自己的client_secret"
}
class AuthController {
    async githubLogin(ctx) {
        const code = ctx.request.query.code
        const params = {
            client_id: config.client_id,
            client_secret: config.client_secret,
            code: code
        }
        let res = await axios.post('https://github.com/login/oauth/access_token', params)
        console.log(res)
        const token = querystring.parse(res.data).access_token
        ctx.cookies.set('token', token, {
            maxAge: ctx.config.jwt.expire * 1000,
        });
        res = { ...ctx.errCode.SUCCESS, data: { token } };
        ctx.redirect('http://172.25.78.33:8081/login/success?token='+token)
    }
}
module.exports = exports = new AuthController();

4.前端创建临时页面，保存url上的token，并跳转到登录成功页面

临时页面会跳转的很快，基本上看不到。

<template>
  <h1>登录成功跳转首页</h1>
</template>

<script>
import {setLoginedUser} from "@/http/axios";
export default {
  mounted() {
    setLoginedUser("github", this.$route.query.token);
    this.$message({
      message: "登录成功",
      type: "success",
    });
    this.$router.push("/home");
  },
};
</script>

<style>
</style>