最新版本开发对接飞书网页应用免登录接口教程

本文介绍如何实现网页应用在飞书客户端内的免登操作,在用户打开网页应用时,弹出授权登录页面,授权通过后直接完成登录操作。通过本教程你可以了解到网页应用授权登录的完整流程。

免登流程

网页应用免登为网页应用提供了获取当前登录用户的飞书身份的能力,网页应用免登流程如下:

  • 步骤一:获取用户登录预授权码。
  • 步骤二:使用预授权码获取user_access_token。
  • 步骤三:获取用户信息并完成登录。
  • 步骤四:刷新已过期的user_access_token。

相关接口

准备工作

开始本教程操作之前,你需要完成以下准备工作。

注册成为飞书的开发者- 创建企业用户或加入飞书企业租户。

步骤一:创建你的应用

在本步骤,你将创建一个企业自建应用并开启网页应用能力。

操作步骤

1.登录飞书开发者后台。

2.在开发者后台首页,单击 创建企业自建应用,然后填写应用名称和应用描述,单击 创建。

3.在左侧导航栏单击进入 测试企业和人员 页面,单击 创建测试企业,填写 测试企业名称、手机号、验证码,单击 确认创建。

为了满足开发测试阶段频繁变更配置的需求,飞书开放平台提供了测试企业与人员功能。在开发阶段,推荐开发者使用测试版应用,此版本中涉及的权限和配置变更都会直接生效,无需管理员审核,客户端的测试也将在测试租户进行。在所有的开发测试完成之后,切换、手动同步到正式版应用,仅提交一次审核即可,大大加速了开发效率,也降低了对管理员的打扰。

4.在创建完成的测试企业操作栏,单击 关联应用,即可为当前应用自动生成测试版本。

5.左侧导航栏,单击应用名称右侧的切换图标并选择 切换至测试版本。

6.在测试应用中,单击添加应用能力,添加网页应用能力。

步骤二:启动你的服务

该步骤可以省略,保证你的网站服务正常即可!

步骤三:配置网页应用访问地址

在本步骤,你将在开发者后台配置网页应用的桌面端主页和移动端主页。

操作步骤

打开开发者后台,进入应用详情页。

在 网页应用 页面,修改 网页配置,桌面端主页 和 移动端主页 都填写为步骤二中获取的临时内网访问地址。例如,在本文中为http://10.4.143.108:3000 。

正式上线时,此处配置主页地址需为 公网地址 。为了快速体验接入流程,本示例中暂时先使用本地环境。

单击进入 安全设置 页面,添加 重定向 URL 和 H5可信域名 ,地址为服务端访问地址加斜杠,本文设置为 http://10.4.143.108:3000/。

说明:

  • 为了飞书客户端内网页应用的安全可信,仅可信域名内的 H5 可以调用 JSAPI 获取数据,因此需要为应用配置可信域名。
  • 重定向URL的末尾需要有斜杠(/)。

步骤四:开启API权限

在本步骤,你将在开发者后台配置开启需要调用API接口的权限。

操作步骤

打开开发者后台,进入应用详情页。

在 开发配置 栏目下,单击进入 权限管理 页面,开启对应的API权限和数据权限。

步骤四:发布应用

在本步骤,你将在完成以上步骤后,发布你应用才能生效。

操作步骤

在 应用发布 栏目下,单击进入 版本管理与发布 页面,创建一个新的发布版本即可。

相关推荐
小李科技10 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
QianhangQianping10 小时前
一块大屏的数据在浏览器里怎么变成画面:背景、子屏、前景三层结构
前端·低代码·架构·编辑器·数据可视化·大屏可视化
梦想很大很大10 小时前
让 Codex 自由发挥,给 nvm-desktop 换个 UI
前端·人工智能·设计
蓝莓味的口香糖10 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
shennv88810 小时前
接入大模型流式输出后,文字偶尔乱码?问题可能出在前端
前端
csj5010 小时前
前端基础之《React(16)—Modal组件封装》
前端·react.js
雨季mo浅忆10 小时前
Vue关于前端XSS漏洞修复方案
前端·xss
上火的金鱼妹10 小时前
关于多进程sse连接通知的实战
javascript·状态模式·sse
切糕师学AI10 小时前
el-select-v2 深度解析:用虚拟滚动解决海量数据下拉选择性能瓶颈
前端·vue.js·elementui·el-select-v2
徐小夕11 小时前
JitOffice:把办公、AI 与审批装进同一个平台
前端·vue.js·github