Vue3-接入飞书H5应用

原创已于 2025-09-23 20:12:40 修改 · 645 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#飞书 #前端 #javascript

于 2025-09-23 20:10:09 首次发布

引言

最近做了一个新项目，需要接入飞书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 = true
      window.h5sdk.ready(() => {
        // 调用JSAPI tt.requestAccess 获取 authorization code
        tt.requestAccess({
          appID: 'xxx',
          scopeList: [],
          // 获取成功后的回调
          success(res) {
            console.log("getAuthCode succeed", res);
            showLoading.value = false
            if (res.code) {
              getUserInfo(res.code, (res) => {
                //todo:做你自己的业务逻辑
              })
            }
          },
          // 获取失败后的回调
          fail(err) {
            showLoading.value = false
            showToast('鉴权失败！')
            console.log(`getAuthCode failed, err:`, JSON.stringify(err));
          }
        })
      })
    }else {
      console.log("window.h5sdk not ready");
    }
  }
})

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