@seaart/login-embed

面向外部业务页面的 SeaArt iframe 登录 SDK。它创建登录遮罩和 iframe，在认证页完成登录后通过 postMessage 通知调用方。SDK 负责 iframe 生命周期与消息校验；授权码、Token 存储和登录后的业务跳转由调用方处理。

安装

pnpm add @seaart/login-embed

npm 使用

import { openLoginEmbed } from '@seaart/login-embed';

const controller = openLoginEmbed({
  clientId: 'business-page',
  authOrigin: 'https://www.seaart.ai',
  locale: 'zhCN',
  onSuccess({ state, token }) {
    // 保存 token 或继续调用业务接口。
  },
  onCancel() {},
  onError(error) {},
});

controller.close();

浏览器脚本

<script src="./dist/seaart-login.global.js"></script>
<script>
  const controller = SeaArtLogin.open({
    clientId: 'business-page',
    authOrigin: 'https://www.seaart.ai',
    onSuccess(result) {
      console.info(result.token);
    },
  });
</script>

全局对象为 SeaArtLogin，其 open 方法等同于 openLoginEmbed。

初始化参数

openLoginEmbed(options) 与 SeaArtLogin.open(options) 支持以下参数：

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | clientId | string | 是 | - | 已注册的业务方标识，认证服务会校验该值。 | | authOrigin | string | 是 | - | 认证页面域名，例如 https://www.seaart.ai。SDK 会标准化为 origin 并校验消息来源。 | | loginPath | string | 否 | '/embed/login' | 认证 iframe 页面路径。 | | locale | string | 否 | - | 传给认证页的语言偏好。 | | state | string | 否 | SDK 随机生成 | 调用方自定义校验值；未传时生成高熵随机值。认证消息必须携带同一 state。 | | title | string | 否 | 'SeaArt login' | iframe 标题与弹框无障碍标签。 | | closeOnOverlayClick | boolean | 否 | true | 是否允许点击遮罩关闭登录弹框。 | | onSuccess | (result) => void | 否 | - | 认证成功后触发。 | | onCancel | () => void | 否 | - | 点击关闭、按 Esc、点击遮罩关闭或认证页取消时触发。 | | onError | (error) => void | 否 | - | 认证页发送错误消息时触发，弹框保持打开。 |

成功结果与控制器

onSuccess 的参数：

| 字段 | 类型 | 说明 | | --- | --- | --- | | state | string | 本次弹框使用的校验值。 | | token | string \| undefined | 认证页返回的 SeaArt 登录 Token。 |

打开后返回 LoginEmbedController：

| 字段/方法 | 类型 | 说明 | | --- | --- | --- | | state | string | 本次登录请求实际使用的 state。 | | close() | () => void | 仅关闭并释放 iframe/事件监听；不会触发 onCancel。 |

iframe 协议

SDK 生成的 iframe URL 会包含以下查询参数：

| 参数 | 说明 | | --- | --- | | client_id | clientId。 | | parent_origin | 调用方页面的 window.location.origin。 | | state | 当前请求的校验值。 | | locale | 传入时附加。 |

认证页向 parent_origin 发送消息：

window.parent.postMessage(
  { type: 'seaart-login:success', state: '<state>', token: '<login-token>' },
  '<parent-origin>'
);

支持的消息类型为 seaart-login:ready、seaart-login:success、seaart-login:cancel、seaart-login:error。SDK 仅接受同时满足认证 origin、当前 iframe window 和当前 state 的消息。

认证环境

| 环境 | authOrigin | 默认 iframe 地址 | | --- | --- | --- | | 生产 | https://www.seaart.ai | https://www.seaart.ai/embed/login | | 测试 | https://aiart-openresty.dev.seaart.dev | https://aiart-openresty.dev.seaart.dev/embed/login |

测试环境接入时只切换 authOrigin；不要将测试环境的授权数据提交到生产接口。

运行边界

• 仅可在浏览器中调用；SDK 需要 window、document、iframe 和 postMessage。
• SDK 不交换授权码、不持久化 Token、不发起业务接口，也不负责登录后的路由跳转。
• 不应把调用方自行生成的 state 复用于其他登录请求。

测试与构建

pnpm --filter @seaart/login-embed typecheck
pnpm --filter @seaart/login-embed test
pnpm --filter @seaart/login-embed build

License

UNLICENSED