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

Vue3-接入飞书H5应用

news 2025/9/24 6:45:27

引言

最近做了一个新项目，需要接入飞书H5应用，做得过程中也是遇到好多问题，现在总结分享给大家。

操作

首先遇到的一个棘手的问题就是免登问题，下面是官方文档的介绍：
1、开发指南开发网页应用开发指南
2、网页应用免登（SSO）示例代码介绍

我是直接使用第2条。

按照官方文档引入

<!-- 在html文档中引入 JSSDK -->
<!-- JS 文件版本在升级功能时地址会变化，如有需要（比如使用新增的 API），请重新引用「网页应用开发指南」中的JSSDK链接，确保你当前使用的JSSDK版本是最新的。-->
<script type="text/javascript"
src="https://lf1-cdn-tos.bytegoofy.com/goofy/lark/op/h5-js-sdk-1.5.26.js">
</script>
<!-- 在页面上添加VConsole方便调试-->
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script>

然后，我们在Vue项目中这样使用：

onMounted(() =>{const _userData = localStorage.getItem("userData")if (_userData) {userDataRef.value = JSON.parse(_userData)} else {console.log("window.h5sdk.ready before");if (window.h5sdk){showLoading.value = truewindow.h5sdk.ready(() => {// 调用JSAPI tt.requestAccess 获取 authorization codett.requestAccess({appID: 'xxx',scopeList: [],// 获取成功后的回调success(res) {console.log("getAuthCode succeed", res);showLoading.value = falseif (res.code) {getUserInfo(res.code, (res) => {//todo:做你自己的业务逻辑})}},// 获取失败后的回调fail(err) {showLoading.value = falseshowToast('鉴权失败！')console.log(`getAuthCode failed, err:`, JSON.stringify(err));}})})}else {console.log("window.h5sdk not ready");}}
})

解释一下，页面打开之后立即查询是否有userData数据，如果有，则不获取飞书code，否则获取code，获取完扔给后台，后台处理完之后带上用户信息返回即可，这样就完成了免登操作，下面介绍下如何本地调试。