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

目录

一、飞书的配置：

二、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, NextAp