开发流程
文档 https://open.feishu.cn/document/client-docs/h5/introduction
- 创建并配置企业自建应用。
- （可选）鉴权调用 JSAPI。
- （可选）配置应用的免登流程。
- 发布并使用应用。
开放接口（H5 JSAPI）
开放平台提供了网页应用可以调用的 H5 JSAPI 。调用 JSAPI 依赖开放平台提供的工具包 JSSDK，使用时只需要在调用 JSAPI 的页面引入 JS 文件即可，引入方式如下代码所示。
<script
type= "text/javascript"
src= "https://lf1-cdn-tos.bytegoofy.com/goofy/lark/op/h5-js-sdk-1.5.23.js"
></script>
基本概念
https://open.feishu.cn/document/client-docs/h5/development-guide/basic-concepts
鉴权
当你调用开放平台客户端 API（JSAPI）时，飞书为了数据安全，需要先验证网页应用有权限访问的 JSAPI 范围，该过程称为鉴权。
免登
免登是指飞书用户在客户端内进入网页应用后，无需输入飞书用户名和密码，网页应用便可自动获取当前用户身份，进而登录系统的流程。
JSSDK
飞书客户端 JSSDK 是飞书面向客户端网页开发者（接入方）提供的网页开发工具包，仅可用在飞书客户端内。
access_token
access_token 是带有授权的飞书开放平台访问凭证，该访问凭证代表应用从平台、租户（指公司或者团队）、用户手中获得的授权。如需调用飞书服务端 API，则网页应用需要从飞书开放平台获取相应的访问凭证（access token）。开放平台提供了 3 种不同类型的访问凭证，分别为应用授权凭证 app_access_token、租户授权凭证 tenant_access_token、用户授权凭证 user_access_token，用于验证调用方身份、确保调用方具有执行操作所需要的权限。关于凭证的更多说明，可参见获取访问凭证。
jsapi_ticket
jsapi_ticket代表网页应用调用飞书 JSAPI 的临时凭证，是实现鉴权校验的重要数据。鉴权方式：比接入方服务端依据jsapi_ticket等数据生成的签名，与认证中心依据jsapi_ticket等数据生成的签名，若两个签名相等即为鉴权成功。
签名
签名是用于 JSSDK 权限验证的一段密文。为了防止数据泄露，会对jsapi_ticket、网页 URL 等参数拼接成字符串verifyStr，并用 sha1 数据加密算法对verifyStr进行加密，得到的密文就是签名signature。
鉴权调用 JSAPI
在开放平台创建好自建应用后，即可在本地开发相应的 Web 项目。如果你的 Web 项目需要调用 H5 JSAPI ，则需要先通过鉴权。JSAPI 鉴权是指飞书验证网页应用有权限访问的 JSAPI 范围。本文主要介绍 JSAPI 鉴权的工作流程，以及各飞书版本的鉴权策略。
文档 https://open.feishu.cn/document/client-docs/h5/development-guide/step-2:-call-jsapi(optional)
代码实现
官方文档 https://open.feishu.cn/document/home/integrating-web-apps-in-5-minutes/debug-and-release#ba60a8dc
前端利用服务端传来的数据实现 JSAPI 鉴权，鉴权成功后即可进行 JSAPI 的调用。
- 引入 JSSDK。
JSSDK 为网页应用提供了调用手机系统功能和飞书客户端功能（如：扫一扫、云文档）的能力，并支持性能优化，使你的网页应用体验能够接近原生体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页应用鉴权</title>
<link rel="stylesheet" href="/public/index.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 JSSDK -->
<!-- JS 文件版本在升级功能时地址会变化，如有需要（比如使用新增的 API），请重新引用「网页应用开发指南」中的JSSDK链接，确保你当前使用的JSSDK版本是最新的。-->
<script
type="text/javascript"
src="https://lf1-cdn-tos.bytegoofy.com/goofy/lark/op/h5-js-sdk-1.5.16.js"
></script>
<!-- 在页面上添加VConsole方便调试-->
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
</script>
</head>
<body>
<div>
<div class="img">
<!-- 头像 -->
<div id="img_div" class="img_div"></div>
<span class="text_hello">Hello</span>
<!-- 名称 -->
<div id="hello_text_name" class="text_hello_name"></div>
<!-- 欢迎语 -->
<div id="hello_text_welcome" class="text_hello_welcome"></div>
</div>
<!-- 飞书icon -->
<div class="icon"><img src="../public/svg/icon.svg" /></div>
</div>
<script src="/public/index.js"></script>
</body>
</html>
- 调用 config 接口进行 JSAPI 鉴权。
前端可利用服务端传来的 appId、timestamp、nonceStr、signature 字段，调用 config 接口进行 JSAPI 鉴权。如果鉴权校验失败，除了可以在 onFail 中进行失败回调的处理，还可以在 h5sdk.error 接口中进行处理（需要在调用 config 接口前完成）。
function apiAuth() {
console.log("start apiAuth");
if (!window.h5sdk) {
console.log("invalid h5sdk");
alert("please open in feishu");
return;
}
// 调用config接口的当前网页url
const url = encodeURIComponent(location.href.split("#")[0]);
console.log("接入方前端将需要鉴权的url发给接入方服务端,url为:", url);
// 向接入方服务端发起请求，获取鉴权参数（appId、timestamp、nonceStr、signature）
fetch(`/get_config_parameters?url=${url}`)
.then((response) =>
response.json().then((res) => {
console.log(
"接入方服务端返回给接入方前端的结果(前端调用config接口的所需参数):", res
);
// 通过error接口处理API验证失败后的回调
window.h5sdk.error((err) => {
throw ("h5sdk error:", JSON.stringify(err));
});
// 调用config接口进行鉴权
window.h5sdk.config({
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.noncestr,
signature: res.signature,
jsApiList: [],
//鉴权成功回调
onSuccess: (res) => {
console.log(`config success: ${JSON.stringify(res)}`);
},
//鉴权失败回调
onFail: (err) => {
throw `config failed: ${JSON.stringify(err)}`;
},
});
// 完成鉴权后，便可在 window.h5sdk.ready 里调用 JSAPI
window.h5sdk.ready(() => {
// window.h5sdk.ready回调函数在环境准备就绪时触发
// 调用 getUserInfo API 获取已登录用户的基本信息，详细文档参见https://open.feishu.cn/document/uYjL24iN/ucjMx4yNyEjL3ITM
tt.getUserInfo({
// getUserInfo API 调用成功回调
success(res) {
console.log(`getUserInfo success: ${JSON.stringify(res)}`);
// 单独定义的函数showUser，用于将用户信息展示在前端页面上
showUser(res.userInfo);
},
// getUserInfo API 调用失败回调
fail(err) {
console.log(`getUserInfo failed:`, JSON.stringify(err));
},
});
// 调用 showToast API 弹出全局提示框，详细文档参见https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/showtoast
tt.showToast({
title: "鉴权成功",
icon: "success",
duration: 3000,
success(res) {
console.log("showToast 调用成功", res.errMsg);
},
fail(res) {
console.log("showToast 调用失败", res.errMsg);
},
complete(res) {
console.log("showToast 调用结束", res.errMsg);
},
});
});
})
)
.catch(function (e) {
console.error(e);
});
}
- 调用 JSAPI。
完成 JSAPI 鉴权后，即可在window.h5sdk.ready里调用 JSAPI。示例代码路径：web_app_with_jssdk/python/public/index.js。在apiAuth函数中的window.h5sdk.ready函数里实现 JSAPI 的调用。
// 完成鉴权后，便可在 window.h5sdk.ready 里调用 JSAPI
window.h5sdk.ready(() => {
// window.h5sdk.ready回调函数在环境准备就绪时触发
// 调用 getUserInfo API 获取已登录用户的基本信息，详细文档参见https://open.feishu.cn/document/uYjL24iN/ucjMx4yNyEjL3ITM
tt.getUserInfo({
// getUserInfo API 调用成功回调
success(res) {
console.log(`getUserInfo success: ${JSON.stringify(res)}`);
// 单独定义的函数showUser，用于将用户信息展示在前端页面上
showUser(res.userInfo);
},
// getUserInfo API 调用失败回调
fail(err) {
console.log(`getUserInfo failed:`, JSON.stringify(err));
},
});
// 调用 showToast API 弹出全局提示框，详细文档参见https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/showtoast
tt.showToast({
title: "鉴权成功",
icon: "success",
duration: 3000,
success(res) {
console.log("showToast 调用成功", res.errMsg);
},
fail(res) {
console.log("showToast 调用失败", res.errMsg);
},
complete(res) {
console.log("showToast 调用结束", res.errMsg);
},
});
});