ShapeR：基于改进NeRF的日常照片三维重建技术
2026/5/5 1:13:29
5分钟实战：用Flask+飞书JSSDK打造个性化工作台信息面板
当企业数字化进程加速，工作台作为员工日常办公的入口，其个性化体验越来越受重视。想象一下：员工打开飞书工作台，迎面看到的是带有自己头像和昵称的欢迎界面——这种微小但贴心的设计能显著提升使用体验。本文将带你用Python生态中最轻量的Flask框架，配合飞书JSSDK，快速实现这个功能。
1. 环境准备与飞书应用配置
在开始编码前，我们需要搭建基础开发环境并完成飞书应用的基础配置。这个阶段要特别注意凭证信息的正确性，这是后续所有功能的基础。
1.1 开发环境搭建
推荐使用Python 3.8+版本进行开发，首先创建项目目录并初始化虚拟环境：
mkdir feishu-userinfo && cd feishu-userinfo python -m venv venv source venv/bin/activate # Linux/Mac venv\Scripts\activate # Windows安装必要的依赖包，这里我们使用Flask作为后端框架：
pip install flask==2.0.2 python-dotenv requests pycryptodome提示：pycryptodome是加密库，用于生成飞书API所需的签名，务必确保安装成功
1.2 飞书应用创建
- 访问飞书开放平台，创建新应用
- 在"应用凭证"页面获取
App ID和App Secret - 在"安全设置"中添加可信域名（开发时可先用本地IP）
- 开启"网页应用"能力，填写回调地址
创建.env文件保存凭证信息：
APP_ID=cli_xxxxxxxxxxxxxx APP_SECRET=xxxxxxxxxxxxxxxxxxxxxxxx FEISHU_HOST=https://open.feishu.cn2. 后端服务搭建
后端需要处理两个核心功能：提供前端页面和生成JSSDK所需的鉴权参数。我们将使用Flask实现这两个功能。
2.1 Flask应用基础结构
创建server.py作为主入口文件：
from flask import Flask, render_template, jsonify, request from auth import Auth from dotenv import load_dotenv import os load_dotenv() # 加载环境变量 app = Flask(__name__, static_folder='public') # 初始化飞书鉴权模块 auth = Auth( os.getenv('FEISHU_HOST'), os.getenv('APP_ID'), os.getenv('APP_SECRET') ) @app.route('/') def home(): return render_template('index.html') if __name__ == '__main__': app.run(host='0.0.0.0', port=3000, debug=True)2.2 鉴权模块实现
创建auth.py处理飞书API交互：
import requests import hashlib from datetime import datetime class Auth: def __init__(self, feishu_host, app_id, app_secret): self.host = feishu_host self.app_id = app_id self.app_secret = app_secret self.token = None def get_jsapi_ticket(self): if not self.token: self._get_tenant_token() url = f"{self.host}/open-apis/jssdk/ticket/get" headers = {'Authorization': f'Bearer {self.token}'} response = requests.post(url, headers=headers) return response.json()['data']['ticket'] def _get_tenant_token(self): url = f"{self.host}/open-apis/auth/v3/tenant_access_token/internal" data = {'app_id': self.app_id, 'app_secret': self.app_secret} response = requests.post(url, json=data) self.token = response.json()['tenant_access_token']3. 前端交互实现
前端需要完成三个关键步骤：初始化JSSDK、获取用户信息和展示数据。我们将使用飞书提供的H5 SDK来实现这些功能。
3.1 基础HTML结构
创建templates/index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户信息展示</title> <link rel="stylesheet" href="/static/style.css"> <script src="https://lf1-cdn-tos.bytegoofy.com/goofy/lark/op/h5-js-sdk-1.5.16.js"></script> </head> <body> <div class="container"> <div id="avatar" class="avatar"></div> <div id="welcome" class="welcome"></div> <div id="username" class="username"></div> </div> <script src="/static/app.js"></script> </body> </html>3.2 JavaScript核心逻辑
创建public/app.js处理前端逻辑：
document.addEventListener('DOMContentLoaded', () => { const currentUrl = encodeURIComponent(window.location.href.split('#')[0]); // 获取鉴权配置 fetch(`/get_config?url=${currentUrl}`) .then(res => res.json()) .then(config => { window.h5sdk.config({ appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: ['getUserInfo'], onSuccess: () => { window.h5sdk.ready(() => { window.h5sdk.getUserInfo({ success: (res) => displayUser(res.userInfo), fail: console.error }); }); } }); }); }); function displayUser(user) { document.getElementById('avatar').innerHTML = `<img src="${user.avatarUrl}" alt="用户头像">`; document.getElementById('username').textContent = user.nickName; document.getElementById('welcome').textContent = navigator.language.startsWith('zh') ? '欢迎回来' : 'Welcome back'; }4. 前后端联调与部署
开发完成后，我们需要确保前后端能正常协同工作，并解决常见的部署问题。
4.1 本地调试技巧
启动服务后，常见的调试问题包括：
- 500错误：通常是因为环境变量未正确加载或依赖缺失
- 鉴权失败：检查时间戳是否同步，签名计算是否正确
- 用户信息获取失败：确认应用权限是否配置正确
调试时可使用以下命令检查服务：
curl http://localhost:3000/get_config?url=http://localhost:30004.2 部署注意事项
实际部署时需要关注：
- 将服务部署到HTTPS域名下（飞书要求）
- 在飞书后台更新可信域名
- 生产环境应关闭debug模式
- 考虑添加错误监控和日志记录
对于Python服务，可以使用Waitress或Gunicorn作为生产服务器：
pip install gunicorn gunicorn -w 4 -b :3000 server:app5. 功能扩展与优化建议
基础功能实现后，可以考虑以下增强功能：
- 多语言支持：根据用户系统语言显示不同文案
- 样式优化：使用CSS动画增强视觉效果
- 缓存机制：减少对飞书API的频繁调用
- 错误边界处理：优雅处理各种异常情况
一个改进后的用户信息展示示例：
function displayUser(user) { const now = new Date(); const hour = now.getHours(); let greeting = ''; if (hour < 6) greeting = '夜深了'; else if (hour < 12) greeting = '早上好'; else if (hour < 18) greeting = '下午好'; else greeting = '晚上好'; document.getElementById('greeting').textContent = greeting; // 其他展示逻辑... }在实际项目中，我发现飞书的头像URL有时会失效，建议添加默认头像的回退机制。另外，对于大型企业应用，可以考虑将用户信息缓存在服务端，减轻飞书API的压力。