无缝认证示例

企业合作伙伴可以跳过嵌入端登录表单。监听 useICCandleAuth() 的 isAuthenticated；若已为 true，复用现有会话。仅当其为 false 时，才由后端调用 get-user-token，并用返回的令牌加载 /{locale}/sign-in。

不要把企业 API 密钥写进宿主页 — 调用你自己的接口，由该接口携带密钥转发邮箱。接口约定、速率限制与查询参数见 无缝用户认证 → 步骤 5。

import { ref, watch } from "vue";
import axios from "axios";
import { useICCandleAuth, WIDGET_RESULT_URL } from "@iccandle/vuejs-widget";

type UserTokenResponse = {
  email: string;
  created: boolean;
  idToken?: string;
  accessToken?: string;
  refreshToken?: string;
  expiresIn: number;
  tokenType: "Bearer";
};

const { isAuthenticated } = useICCandleAuth();
const language = ref("en");
const theme = ref("light");
const iframeSrc = ref(
  `${WIDGET_RESULT_URL}/${language.value}?theme=${theme.value}&header=true`,
);
const iframeLoaded = ref(false);

watch(
  isAuthenticated,
  (authenticated) => {
    if (authenticated) return;

    const fetchUserToken = async () => {
      try {
        const { data } = await axios.post<UserTokenResponse>(
          "https://api.iccandle.ai/seamless-auth/get-user-token",
          {
            email: "test@email.com",
          },
        );

        const idToken = data.idToken;
        const accessToken = data.accessToken;
        const refreshToken = data.refreshToken;
        if (!idToken || !accessToken || !refreshToken) {
          console.error("seamless-auth did not return tokens");
          return;
        }

        const params = new URLSearchParams({
          id_token: idToken,
          access_token: accessToken,
          refresh_token_param: refreshToken,
          theme: theme.value,
          header: "true",
        });

        iframeLoaded.value = false;
        iframeSrc.value = `${WIDGET_RESULT_URL}/${language.value}/sign-in?${params.toString()}`;
      } catch (error) {
        console.error("seamless-auth failed", error);
      }
    };

    void fetchUserToken();
  },
  { immediate: true },
);

从你的后端调用 POST https://api.iccandle.ai/seamless-auth/get-user-token，并带上企业 API 密钥。

把 iframeSrc 与 iframeLoaded 绑定到结果 iframe，写法见 开始使用。