飞书二维码登录注意点

1.前端SDK版本

bash 复制代码
  第一个手机端授权后、网页端还需要点击一次授权 授权后会跳转到redirect_uri页面,连接会携带code
  <script src="https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js"></script>
  只需要在手机上点击授权
  <script src="https://sf3-cn.feishucdn.com/obj/static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.1.js"></script> 

2. 流程是生成二维码,redirect_uri地址填写一个页面用来接收授权码,传递授权码给后端、后端再进行鉴权 返回token,redirect_uri 地址需要和后台飞书接口的redirect_uri地址保持一致

bash 复制代码
// 初始化扫码登录
    initQRCodeLogin() {
      console.log(window.QRLogin)
      if (window.QRLogin) {
        // 清空之前的二维码容器内容,防止生成多个二维码
        const loginContainer = document.getElementById("login_container");
        loginContainer.innerHTML = "";
        // 调起扫码
        var goto = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=cli_a7b076f0a172d00c&redirect_uri=http://xxxxx/login&response_type=code&state=code`;

		// redirect_uri

        const QRLoginObj = QRLogin({
          id: "login_container",
          goto: goto,
          width: "280",
          height: "280",
          style: "width:280px;height:280px;border:none"
        });

        var handleMessage = function (event) {
        var origin = event.origin;
        // 使用 matchOrigin 方法来判断 message 是否来自飞书页面
        if (QRLoginObj.matchOrigin(origin)) {
          var loginTmpCode = event.data;
          // 在授权页面地址上拼接上参数 tmp_code,并跳转
          window.location.href = `${goto}&tmp_code=${loginTmpCode}`;
          console.log(loginTmpCode);
        }
      };
      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", handleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", handleMessage);
      }
      }
    },

3. 需要注意后台飞书接口"获取用户信息"版本不一样 需要的token 也不一样,

bash 复制代码
// 需要的是 USER_ACCESS_TOKEN
https://open.feishu.cn/open-apis/authen/v1/user_info
// 获取 USER_ACCESS_TOKEN 接口
https://open.feishu.cn/open-apis/authen/v2/oauth/token

注意区分 tenant_access_token 和 USER_ACCESS_TOKEN
接口版本不一样 需要的token也会不一样
相关推荐
时见先生5 小时前
Python库和conda搭建虚拟环境
开发语言·人工智能·python·自然语言处理·conda
我是伪码农5 小时前
Vue 1.23
前端·javascript·vue.js
a努力。6 小时前
国家电网Java面试被问:混沌工程在分布式系统中的应用
java·开发语言·数据库·git·mysql·面试·职场和发展
Yvonne爱编码6 小时前
Java 四大内部类全解析:从设计本质到实战应用
java·开发语言·python
wqwqweee6 小时前
Flutter for OpenHarmony 看书管理记录App实战:搜索功能实现
开发语言·javascript·python·flutter·harmonyos
yongui478346 小时前
基于MATLAB的NALM锁模光纤激光器仿真实现
开发语言·matlab
-To be number.wan7 小时前
Python数据分析:numpy数值计算基础
开发语言·python·数据分析
HIT_Weston7 小时前
107、【Ubuntu】【Hugo】搭建私人博客:模糊搜索 Fuse.js(三)
linux·javascript·ubuntu
Cx330❀8 小时前
【优选算法必刷100题】第038题(位运算):消失的两个数字
开发语言·c++·算法·leetcode·面试
Loo国昌8 小时前
深入理解 FastAPI:Python高性能API框架的完整指南
开发语言·人工智能·后端·python·langchain·fastapi