当前位置: 首页 > news >正文

web 系统对接飞书三方登录完整步骤实战使用示例

下面我将详细说明Web系统对接飞书三方登录的完整步骤,并提供实战示例(基于Node.js/Express):

一、完整对接流程


  1. 注册飞书开放平台应用

    • 登录飞书开放平台
    • 创建企业自建应用 → 获取 App IDApp Secret
    • 配置安全域名和重定向URL(如 https://yourdomain.com/auth/feishu/callback
  2. OAuth2.0 授权流程

    sequenceDiagram
    用户->>你的应用: 点击"飞书登录"
    你的应用->>飞书服务器: 重定向到授权页
    飞书服务器->>用户: 显示授权页面
    用户->>飞书服务器: 同意授权
    飞书服务器->>你的应用: 重定向回Callback URL(携带code)
    你的应用->>飞书服务器: 用code换access_token
    飞书服务器->>你的应用: 返回access_token和用户信息
    你的应用->>用户: 创建本地会话,登录成功
    

二、实战代码示例(Node.js/Express)

1. 安装依赖
npm install express axios dotenv
2. 环境配置 (.env)
FEISHU_APP_ID = cli_xxxxxx
FEISHU_APP_SECRET = xxxxxxxxxxxxxx
REDIRECT_URI = https://yourdomain.com/auth/feishu/callback
3. 核心代码实现
const express = require('express');
const axios = require('axios');
const app = express();
require('dotenv').config();// 飞书登录入口
app.get('/login/feishu', (req, res) => {const authUrl = `https://open.feishu.cn/open-apis/authen/v1/index?` +`app_id=${process.env.FEISHU_APP_ID}` +`&redirect_uri=${encodeURIComponent(process.env.REDIRECT_URI)}` +`&state=YOUR_STATE_TOKEN`; // 可选防CSRF参数res.redirect(authUrl);
});// 飞书回调处理
app.get('/auth/feishu/callback', async (req, res) => {try {const { code } = req.query;// 1. 使用code换取access_tokenconst tokenRes = await axios.post('https://open.feishu.cn/open-apis/authen/v1/access_token',{grant_type: 'authorization_code',code},{headers: {'Content-Type': 'application/json; charset=utf-8','Authorization': `Bearer ${process.env.FEISHU_APP_ID}:${process.env.FEISHU_APP_SECRET}`}});const { access_token, expires_in, refresh_token } = tokenRes.data.data;// 2. 获取用户信息const userRes = await axios.get('https://open.feishu.cn/open-apis/authen/v1/user_info',{headers: { 'Authorization': `Bearer ${access_token}` }});const userData = userRes.data.data;console.log('飞书用户信息:', userData);/* 典型返回结构:{name: "张三",en_name: "John",avatar_url: "https://xxx",open_id: "ou_xxxxxx",union_id: "on_xxxxxx",email: "user@domain.com",mobile: "+8613812345678"}*/// 3. 本地化处理(示例)// - 检查union_id是否已注册// - 创建新用户或更新现有用户// - 生成本地会话res.send(`登录成功!欢迎 ${userData.name}`);} catch (error) {console.error('飞书登录失败:', error.response.data);res.status(500).send('登录失败');}
});app.listen(3000, () => console.log('Server running on port 3000'));

三、关键配置说明

  1. 飞书应用权限配置

    • 必须开启权限:获取用户 user ID获取用户手机号获取用户邮箱
    • 网页权限:读取用户基础信息
  2. 安全注意事项

    验证state参数
    HTTPS传输
    校验token有效期
    敏感数据加密存储
    用户绑定二次确认
  3. 常见错误处理

    错误码原因解决方案
    60011App ID无效检查.env配置
    10020无效授权码检查URL编码和重定向URI
    99991400权限不足检查开放平台权限配置

四、前端集成示例(React)

function LoginPage() {const feishuLogin = () => {// 替代方案:后端提供/auth/feishu接口做302跳转更安全window.location.href = `https://your-backend.com/login/feishu`;};return (<button onClick={feishuLogin} style={styles.feishuButton}><img src="feishu-logo.png" alt="飞书登录"/>飞书账号登录</button>);
}const styles = {feishuButton: {backgroundColor: '#00D6C6',padding: '10px 20px',borderRadius: '4px',color: 'white',display: 'flex',alignItems: 'center'}
};

五、调试技巧

  1. 使用飞书沙箱环境

    • 修改API端点:https://open-sandbox.feishu.cn/...
    • 测试账号需添加到应用可见范围
  2. 日志记录关键节点

    // 在关键步骤添加日志
    console.log('Received code:', code);
    console.log('Access token response:', tokenRes.data);
    
  3. Postman测试Token获取

    POST https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/
    Headers: Content-Type: application/json; charset=utf-8
    Body: {"app_id": "cli_xxx","app_secret": "xxxxx"
    }
    

完成上述步骤后,你的Web系统即可实现专业级的飞书三方登录功能。实际部署时需补充错误处理、会话管理、用户绑定等业务逻辑。

http://www.dtcms.com/a/272650.html

相关文章:

  • 低温冷启动 高温热启动
  • OpenCV 图像进阶处理:特征提取与车牌识别深度解析
  • 醋酸镨:闪亮的稀土宝藏,掀开科技应用新篇章
  • Spring IoC 如何注入一些简单的值(比如配置文件里的字符串、数字)?
  • 【文献阅读】Depth Anything: Unleashing the Power of Large-Scale Unlabeled Data
  • MyBatis 使用教程及插件开发
  • 自动驾驶环境感知:天气数据采集与融合技术实战
  • AI-Sphere-Butler项目语音切换数字人管家形象功能老是开发不成功。
  • Oracle 数据库管理与维护实战指南(用户权限、备份恢复、性能调优)
  • 深度学习与图像处理案例 │ 基于深度学习的自动驾驶小车
  • GitHub上优秀的开源播放器项目介绍及优劣对比
  • 申请注册苹果iOS企业级开发者证书需要公司拥有什么规模条件
  • Nacos的基本功能以及使用Feign进行微服务间的通信
  • 【网络编程】 TCP 协议栈的知识汇总
  • ZW3D 二次开发-创建圆柱体
  • Qt cannot find C:\WINDOWS\TEMP\cctVBBgu: Invalid argument
  • QT5使用cmakelists引入Qt5Xlsx库并使用
  • 达梦数据库不兼容 SQL_NO_CACHE 报错解决方案
  • C++交叉编译工具链制作以及QT交叉编译环境配置
  • 生产环境CI/CD流水线构建与优化实践指南
  • 医院多部门协同构建知识库-指南库-预测模型三维网络路径研究
  • 12大产品规划工具对比:功能、价格与适用场景
  • (LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
  • 2023 年 12 月青少年软编等考 C 语言七级真题解析
  • 2025年语言处理、大数据与人机交互国际会议(DHCI 2025)
  • QBoost 2025版:加速手机性能,提升使用体验
  • django中如何使用Django REST Framework
  • 基于SpringBoot旅游资源信息管理系统的设计与实现
  • 【Learning Notes】 Derak Callan‘s Business English P30~31
  • Redis数据库基础