飞书扫码授权

网页应用登录是基于 OAuth 2.0 标准协议实现的，通过飞书账号授权登录第三方应用的能力。

1.准备工作

• 在 开放平台开发者后台 创建一个应用获取App ID 与 App Secret
• 创建测试企业&成员
• 在【安全设置】一栏中 配置重定向url!!!

2.实施

2.1 创建应用&测试 详细

2.2 配置重定向url详细

3.sdk注入

官方的方式让我们采用script的方式进行引入，然后通过全局对象 window.QRLogin 创建实例

引入SDK

<script src="https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js"></script>

定义一个js文件 initLarkSDK.js

export function qr_login(callback) {
  console.log(window.location.pathname, "window.location.pathname");

  const redirect_uri =
    REDIRECT_URL +
    "?pathName=" +
    window.location.pathname +
    "&params=" +
    window.location.search;
  const gotoUrl = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${APP_ID}&redirect_uri=${redirect_uri}&response_type=code&state=success_login`;

  console.log(gotoUrl, "gotoUrl===>>>");

  const QRLoginObj = window.QRLogin({
    id: "lark_container_content",
    goto: `${gotoUrl}`,
    style:
      "width: 266px; height: 266px; border-radius: 10px; border: 1px solid #BFBFBF;",
  });

  const handleMessage = function (event) {
    const origin = event.origin;

    if (QRLoginObj.matchOrigin(origin)) {
      const loginTmpCode = event.data;

      /** 创建一个虚拟iframe处理重定向 */
      const ifrmae = document.createElement("iframe");
      const parent = document.getElementById("lark_container_content");

      parent.append(ifrmae);
      ifrmae.src = `${gotoUrl}&tmp_code=${loginTmpCode}`;
      ifrmae.style.display = "none";

      ifrmae.onload = (e) => {
        console.log(ifrmae.contentWindow, "ifrmae.contentWindow????");
        const larkPath = ifrmae.contentWindow.location.href;
        const larkParams = getURLParams(larkPath);

        callback({
          path: larkPath,
          params: larkParams,
        });
      };
    }
  };
  if (typeof window.addEventListener !== "undefined") {
    window.addEventListener("message", handleMessage, false);
  } else if (typeof window.attachEvent !== "undefined") {
    window.attachEvent("onmessage", handleMessage);
  }
}

 <template>
  <div>
    <div class="right-menu">   
      <div class="avatar-container right-menu-item">
        <div class="avatar-wrapper f_c_m">
          <el-popover
            placement="bottom"
            :visible-arrow="false"
            trigger="click"
          >
            <ul class="tips-container">
              <li @click="handleBindFeishu">
                <svg-icon iconClass="lark-icon_link"></svg-icon>
                <span class="ml10">绑定飞书</span>
              </li>
              <li class="tips-line"></li>
          
            </ul>
          
          </el-popover>
        </div>
      </div>

      <!-- 飞书扫码授权弹窗 -->
      <BaseDialog
        dialogTitle="飞书扫码授权"
        width="700"
        :mode="DIALOG_MODE.V_MODULE"
        v-model="bindFeishuViseble"
        :ISShowFooterBtns="false"
      >
        <div class="lark-title">请打开飞书并扫描二维码。</div>
        <div class="lark_container">
          <div class="lark_container_logo">
            <img src="" />
          </div>
          <div class="lark_container_arrow">
            <img src="" />
          </div>
          <div id="lark_container_content"></div>
        </div>
      </BaseDialog>
    </div>
  </div>
</template>

<script>
import BaseDialog from "@/components/BaseDialog";
import { DIALOG_MODE } from "@/components/BaseDialog/DialogProps";
import { qr_login, REDIRECT_URL } from "./initLarkIframe";
import { bindFeishu } from "@/api/feedback";
import { USER_SESSION_KEY } from "@/const/store";


export default {
  components: {
    BaseDialog,
 
  },
  data() {
    return {
    
      larkBindStatus: false,
   
    };
  },
 
  methods: {
  // 飞书绑定
  handleBindFeishu() {
   this.bindFeishuViseble = true;
      this.$nextTick(() => {
        qr_login((data) => {
          const {
            params: { code },
          } = data;
          this.redirectSendBindLark(code);
        });
      });
    },
    // 获取到重定向后地址栏的code进行绑定
    async redirectSendBindLark(larkcode) {},
  },
};
</script>

假如哪里有问题、欢迎👏大佬指点！