飞书 接入 工作台H5应用(前端)

直奔主题，网页开发应用文档地址：飞书开发者文档

开放接口（H5 JSAPI）

开放平台提供了网页应用可以调用的 H5 JSAPI。调用 JSAPI 依赖开放平台提供的工具包 JSSDK，使用时只需要在调用 JSAPI 的页面引入 JS 文件即可，引入方式如下代码所示。

<script
type= "text/javascript"
src= "https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.44.js"
></script>

配置应用免登流程

前端要做的就是获取code请求后端接口，让后端生成身份access_token从而存储在cookie

/**
 * 飞书工具类
 */
import { APP_ID } from '@/configs/feishu'

export class FeiShu {
    static handleOAuth() {
        if (window.tt.requestAccess) {
            window.tt.requestAccess({
                // 网页应用 App ID
                appID: APP_ID,
                scopeList: [],
                success: (res: Record<string, any>) => {
                    // 用户授权后返回预授权码
                    const { code } = res
                    // 通过code请求后端接口获取用户信息
                },
                fail: (error: any) => {
                    // 需要额外根据errno判断是否为 客户端不支持requestAccess导致的失败
                    const { errno, errString } = error
                    if (errno === 103) {
                        // 客户端版本过低，不支持requestAccess，需要改为调用requestAuthCode
                        callRequestAuthCode()
                    } else {
                        // 用户拒绝授权或者授权失败
                        alert('用户拒绝授权或者授权失败');
                    }
                },
            })
        } else {
            // JSSDK版本过低，不支持requestAccess，需要改为调用requestAuthCode
            callRequestAuthCode()
        }

        function callRequestAuthCode() {
            window.tt.requestAuthCode &&
                window.tt.requestAuthCode({
                    // 网页应用 App ID
                    appId: APP_ID,
                    success: (res: Record<string, any>) => {
                        // 用户免登录后返回预授权码
                        const { code } = res
                        // 通过code请求后端接口获取用户信息
                    },
                    fail: (error: any) => {
                        // 免登失败，返回相应的errno和errString
                        const { errno, errString } = error
                        
                    },
                })
        }
        return
    }
}

这里注意了！

必须要配置重定向的地址，不然静默授权会失败！
进入飞书开放平台的开发者后台，在左侧导航栏的【安全设置】页面配置允许重定向的URL免登授权码跳转地址

如何判断是飞书内置浏览器

export const getIsFeiShu = () => {
    const userAgent = navigator.userAgent.toLowerCase()
    return userAgent.includes('feishu') || userAgent.includes('lark') // 飞书
}

如何进行调试

开发者调试描述
点击【网页应用远程调试工具】

如图所示，将 <script src='https://lf-package-cn.feishucdn.com/obj/feishu-static/op/fe/devtools_frontend/remote-debug-0.0.1-alpha.6.js'></script> 引入 html head
点击【生成并打开调试地址】，激活后再点击如下 【调试】按钮即可打开开发者调试工具窗口