盘古低代码

飞书jssdk鉴权 ​

实现步骤 ​

1.引入js依赖 ​

在index.html中引入js依赖（vconsole是为方便调试，如没有调试需求则不必使用）。

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

2.创建飞书应用 ​

打开飞书开放平台的开发者后台（https://open.feishu.cn/app）,创建企业自建应用，并获取appId和appSecret，联系盘古后端负责的同事在数据库中维护这两个值（后续会考虑开发用户端页面，支持用户在页面上维护自己应用的appId和appSecret，当前暂时依赖后端同事在数据库中维护）。

3.配置网页应用能力 ​

为应用添加网页应用能力，为网页应用配置入口url（https://ssodev.hisense.com/redirectPage?appId={ssoAppId}&returnUrl={entryUrl}）。此处url中appId参数为申请sso时获得的appId（非上述飞书应用的appId），returnUrl参数为前端网页的访问入口url。

注意事项

飞书生产环境配置应用时，需将入口url中的中的https://ssodev.hisense.com替换为https://sso.hisense.com

4.添加鉴权逻辑 ​

在前端脚手架项目中添加如下方法：

javascript
// 将飞书应用的appId添加到配置文件中
const { VITE_FEISHU_APP_ID } = import.meta.env;

function apiAuth(callback) {
  if (!window.h5sdk) {
    console.log("invalid h5sdk");
    callback({ flag: false, msg: "invalid h5sdk" });
    return;
  }

  // 调用config接口的当前网页url，鉴权结束前都不要跳转页面
  // 这里前端一定要用这种方式获取，不建议手写，以免获取到的链接和真实使用的有差距
  const url = location.href.split("#")[0];
  console.log("接入方前端将需要鉴权的url发给接入方服务端,url为:", url);

  request({
    url: "/api/im/platform/auth/signature/info",
    method: "POST",
    data: {
      url,
      appId: VITE_FEISHU_APP_ID,
    },
  })
    .then((res) => {
      jsApiAuth({ appId: VITE_FEISHU_APP_ID, ...res }, callback);
    })
    .catch(function (e) {
      console.error(e);
    });
}

function jsApiAuth({ timestamp, noncestr, signature, appId }, callback) {
  // 通过error接口处理API验证失败后的回调
  window.h5sdk.error((err) => {
    callback && callback({ flag: false, msg: err });
  });

  // 调用config接口进行鉴权
  window.h5sdk.config({
    appId,
    timestamp: timestamp,
    nonceStr: noncestr,
    signature: signature,
    jsApiList: [],
    //鉴权成功回调
    onSuccess: (res) => {
      console.log(`config success: ${JSON.stringify(res)}`);
      window.supportFeishu = true;
      callback && callback({ flag: true });
    },
    //鉴权失败回调
    onFail: (err) => {
      callback && callback({ flag: false, msg: err });
      console.error(`config failed: ${JSON.stringify(err)}`);
    },
  });

  // 完成鉴权后，便可在 window.h5sdk.ready 里调用 JSAPI
  window.h5sdk.ready(() => {
    window.qing.isSupportNativeJsBridge = true;

    callback && callback({ flag: true, msg: "success" });
  });
}

注意事项

鉴权过程中的页面跳转可能导致鉴权失败。因此，开始鉴权后，一直到鉴权结果返回后，才可进行页面跳转，也就是要保证鉴权传入的url参数与当前页面url一致。

如果页面加载过程中涉及页面跳转，可以把跳转逻辑放进apiAuth方法的回调函数callback中，这样能保证鉴权结束（无论鉴权成功或失败）后才进行页面跳转。

5.使用飞书客户端API ​

鉴权成功后可以通过window.tt对象调用飞书的客户端API。例如：

javascript
window.tt.getUserInfo({
    withCredentials: true,
    success(res) {
      console.log(JSON.stringify(res));
    },
    fail(res) {
      console.log(`getUserInfo fail: ${JSON.stringify(res)}`);
    }
});

关于飞书的客户端API的具体用法可以可以参考文档：https://open.feishu.cn/document/client-docs/gadget/-web-app-api/open-ability/userinfo/getuserinfo