一、飞书的配置：

二、Node层的接口开发

三、前端相关的开发

四、服务器端鉴权以及客户端的鉴权

背景：公司后台运营项目采用飞书扫码登录方式，扫码登录完之后获取飞书的信息，然后前端通过这些对应的信息生产token，之后在请求后端接口时讲token通过header传参，并进行鉴权

项目的技术框架是基于Refine+ant-design框架去开发的

一、飞书的配置：

1、首先打开飞书开放平台，然后创建一个应用，

2、然后进行安全设置，重定向URL是在页面用户扫码之后跳转的地址，不配置的话我们在调飞书接口获取飞书用户的信息时就会400

3、接着我们可以去到【权限管理】对获取信息的权限进行一些配置，例如我想获取用户id和邮箱，默认是不返回这两个信息的，那我就需要自己去配置，有些配置需要审核权限，那我们就需要进行发版（发版在【应用发布】-【版本管理与发布】），发版的审核会流到对应企业的管理员那里，审核通过后就能获取到对应的信息了。

4、配置完这些信息之后，我们再来看飞书扫码对应的文档开发文档 - 飞书开放平台进行开发

二、Node层的接口开发

1、总体流程：前端获取到code之后，将code传给后端，后端调用飞书服务器来获取可用于访问用户信息的 access_token，当后端获取到access_token之后，通过 access_token 来调用飞书服务器来获取用户信息。（注意：在飞书文档里面有强调，不要把access_token传递给客户端，因此后端可以将获取access_token以及获取用户信息的接口合为一个接口给前端调用，入参为code和redirect_uri，出参为用户相关的信息以及将用户相关的信息转成token,然后在后续需要权限校验的接口通过header传递token进行验证）

2、相关代码的开发

//api/auth/login/index.ts
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import { z } from 'zod';
import * as jose from 'jose';const JWT_SECRET = 'xxxxx';
// 用 code 换取 accessToken
const getAccessToken = async (code: string, redirect_uri: string) => {const options = {method: 'post',headers: { 'Content-Type': 'application/x-www-form-urlencoded' },params: {['client_id']: '管理后台获取',['client_secret']: '管理后台获取',['grant_type']: 'authorization_code',code,redirect_uri,},url: `https://passport.feishu.cn/suite/passport/oauth/token`,};return await axios(options).then(({ data }) => data);
};const getUserInfo = async (access_token: string) => {const options = {method: 'get',headers: { Authorization: `Bearer ${access_token}` },url: `https://passport.feishu.cn/suite/passport/oauth/userinfo`,};return await axios(options).then(({ data }) => data);
};export default async function login(req: NextApiRequest, res: NextApiResponse) {const { body, query } = req;const numberParser = z.object({ code: z.string(), redirect_uri: z.string() });numberParser.parse(query);const { code, redirect_uri } = query;if (code && redirect_uri) {const { access_token } = await getAccessToken(String(code),String(redirect_uri));const userInfo = await getUserInfo(access_token);const { open_id, union_id, user_id, mobile } = userInfo;const jwtToken = await new jose.SignJWT({open_id,union_id,user_id,mobile,})//获取到用户信息之后通过一些字段生成特定token.setProtectedHeader({ alg: 'HS256' }).setIssuedAt().setExpirationTime('1s').sign(new TextEncoder().encode(JWT_SECRET));if (userInfo) {return res.json({statusCode: 200,data: {userInfo,token: jwtToken,expiresTime: new Date().getTime() + 60 * 60 * 24 * 7 * 1000,},});}} else {return res.status(401).json({ message: '用户登录失败，请重试！' });}
}

三、前端相关的开发

1、二维码的获取

1）在_document.tsx文件中引入sdk

2、登录页相关代码（展示二维码，扫码成功逻辑）

//创建实例 当用户扫码成功后会触发handleMessage方法然后跳转到【goto】,然后又会携带code跳转到当前的登录页面
const goto = useRef('');
const redirectUri = useRef('');
const QRLoginObj = useRef(null);
useEffect(() => {window.addEventListener('message', handleMessage, false);return () => {// 移除 message 通知，防止再次重定向window.removeEventListener('message', handleMessage, false);};
}, []);useLayoutEffect(() => {redirectUri.current = `${window?.location?.origin}/login`;//重定向地址，需在管理后台进行配置goto.current = `https://passport.feishu.cn/suite/passport/oauth/authorize?
client_id=cli_a3d520b6047e5013&redirect_uri=${redirectUri.current}&response_type=code&state=STATE`;QRLoginObj.current = QRLogin({id: 'login_container',goto: goto.current,width: '250',height: '260',});
}, []);const handleMessage = (event: any) => {const loginTmpCode = event.data;const origin = event.origin; if( QRLoginObj?.current?.matchOrigin(origin) ) {// 若存在 code 则为已扫码或者已授权状态，不做重定向--坑点if (window.location.search.indexOf('code') !== -1) return;window.location.href = `${goto.current}&tmp_code=${loginTmpCode}`;}};return (<div id='login_container'></div>
)

3、获取用户信息相关代码

//当url携带code时则调用获取用户信息的接口
import { useApiUrl, useCustom } from '@pankod/refine-core';
import { useRouter } from 'next/router';
const { query } = router;const { data: loginData, refetch } = useCustom({url: `${apiUrl}/auth/login`,method: 'get',config: {query: {code: String(query?.code),redirect_uri: redirectUri.current || '',},},queryOptions: {enabled: false,},
});//通过接口获取用户信息
useEffect(()=>{if (query?.code) {refetch();}
},[query])

四、服务器端鉴权以及客户端的鉴权

1、服务器端的鉴权是通过中间件的方式实现的，相关代码如下：middleware.ts/前面我们使用new jose.SignJWT()生成token,于是校验权限的时候采用jose.jwtVerify()去校验token的有效性

import * as jose from 'jose';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server'const JWT_SECRET = 'XXXX';//跟生成token时统一，因此可以选择抽出来统一管理const noVerifyPath = ['/auth']export async function middleware(req: NextRequest) {const { pathname } = req.nextUrl;// 编写认证中间件const auth = async (authorization: string) => {// { Authorization: Bearer token}const token = authorization.replace('Bearer ', '');try {// 报错：token 被篡改或者为空，属于 401 错误：未认证错误。await jose.jwtVerify(token, new TextEncoder().encode(JWT_SECRET));} catch (err) {return NextResponse.redirect(new URL('/api/auth/login/unauthorized', req.url));}// 执行后续逻辑return NextResponse.next();}const isNeedVerify = noVerifyPath.some(path => pathname.indexOf(path) === -1);// 校验逻辑if (isNeedVerify) {/* 权限校验 */const authorization = req.headers.get('Authorization');if (authorization) {return await auth(authorization);} else {return NextResponse.redirect(new URL('/api/auth/login/unauthorized', req.url));}} else {return NextResponse.next();}}export const config = {// 需要中间件过滤的目录matcher: ['/api/:path*'],
}

2、客户端的鉴权是通过axios拦截器拦截相关接口返回的信息，如果返回的，则跳转到登录页，相关代码如下：

//主要代码const notAuthApi = []//不需要鉴权的api,例如登录
clientRequest.interceptors.response.use(async (response: any) => {//  状态码过滤const { config } = response;const { headers, url } = config;const code = +response?.data?.codeif (!notAuthApi.includes(String(url))) {if(code!==200){//TODO:业务处理}return Promise.resolve(response);} else {return Promise.resolve(response);}},(error: any) => {const { response } = error;if (response.status === 401) {// 登录失败 ｜｜ 登录过期，重定向处理window.open('/login', '_self');}return Promise.reject(error);}
);

Node（Next）+React实现飞书扫码登录+鉴权的详细开发过程相关推荐

Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
Nuxt - 实现微信扫码登录功能（SSR 服务端渲染项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Vue.js 版本的教程,请访问 Vue.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 0 ...
如何用企业微信、飞书等扫码登录 Office 365
鉴于企业微信.飞书.钉钉等移动社交应用的广泛使用,国内很多企业直接利用飞书.企业微信等平台建立了员工身份系统(账号源).在办公时,员工习惯扫码登录业务系统.但对于很多业务应用如微软系 Office 3 ...
Node.js实现二维码扫码登录
实现客户端扫码登录分为下列四步: 1. Web页面生成二维码生成的二维码中必须要包含一个用于唯一标识用户的数据,这个唯一标识是为了确保将客户端(手机)与web网页绑定,避免其他人登录了你的账号.在这 ...
用Android和node.js实现扫码登录
实现思路 step 1: 网页端提供二维码 step 2: 手机端登录,并保存token,手机扫码后向网页端发送token step 3: 网页端通过jstoken解析token,向后端服务器获取用户 ...
AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
spring boot 自动跳转登录页面_徒手撸一个扫码登录示例工程
徒手撸一个扫码登录示例工程不知道是不是微信的原因,现在出现扫码登录的场景越来越多了,作为一个有追求.有理想新四好码农,当然得紧跟时代的潮流,得徒手撸一个以儆效尤本篇示例工程,主要用到以下技术栈 q ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...
修改微信扫码登录，二维码样式
开工后的第一篇博客,记得在去年给自己定的计划是每月一篇博客,看来有点没有持之以恒,抱歉-,进入正题: 过完年来一直在赶项目进度,期间也遇到很多问题,很想把它分享出来,时间问题吧,没有及时写出来,今天遇 ...

Node（Next）+React实现飞书扫码登录+鉴权的详细开发过程

一、飞书的配置：

二、Node层的接口开发

三、前端相关的开发

四、服务器端鉴权以及客户端的鉴权

Node（Next）+React实现飞书扫码登录+鉴权的详细开发过程相关推荐

最新文章

热门文章