接入预览 · authcenter 集中授权中台

三种接入形态怎么选

形态	接入成本	样式控制	后续维护	适合
{{ r.name }} {{ r.tag }}	{{ r.cost }}	{{ r.style }}	{{ r.keep }}	{{ r.for }}

推荐：无样式组件（theme="none"）——结构由中台统一维护升级（票据、轮询、场景校验），外观 100% 由业务站决定，是站群场景下成本与可控性最平衡的选择。

调用面与约束

接口	作用	站点令牌	限流
{{ a.path }}	{{ a.desc }}	{{ a.token ? '必需' : '否' }}	{{ a.limit }}

跨域：服务端按站点 allowed_origin 放行，建站时填对来源即可，业务站无需代理。
场景：票据与二维码都带 scene，未授权场景服务端返回 403 并在组件内直接展示原因。
轮询间隔建议 ≥2s；预览页统一放大到 8s 以避免触发限流（60 次/分钟/路径）。

场景 scene（后台「小程序 → 场景」维护，需给本站点授权）当前：{{ scene || 'login' }}；填一个未授权的场景可看到拒绝提示

下面 5 个组件是同一份逻辑（建票据 → 出二维码 → 轮询 → 换 token），只有外观不同。

① 默认样式 theme="default"

<script src="https://中台域名/widget.js"></script>
<auth-login site-token="{{ token || 'YOUR_TOKEN' }}" theme="default"></auth-login>

② 内置暗色 theme="dark"（深色站直接用，无需自写皮肤）

<auth-login site-token="..." theme="dark"></auth-login>
<!-- theme="auto" 则跟随系统深浅色 -->

③ 无样式 + 线框皮肤（业务站 CSS）

<auth-login site-token="..." theme="none"></auth-login>
<style>
.skin-line .hnai-card{border-radius:2px;...}
.skin-line .hnai-qr{width:180px}
</style>

④ 无样式 + 深色皮肤

/* 只改配色，结构完全复用 */
.skin-dark .hnai-card{background:#161b22}
.skin-dark .hnai-btn{background:#238636}

⑤ 无样式 + 横向布局（含自定义 DOM 顺序）

.skin-row .hnai-card{display:flex;gap:16px}
.skin-row .hnai-qr{width:120px;margin:0}

虚拟资产 asset-id（后台「虚拟资产」维护）小程序支付入口（填真实可打开的地址；留空则组件进入提示态）

浏览器环境只能走「扫码 → 小程序内支付」，且需先在下方填入真实可打开的支付页地址（留空时组件只显示提示、不出码）；若页面运行在小程序 webview 且已登录，组件会自动改用 wx.requestVirtualPayment 直接拉起收银台。

① 默认样式

<auth-pay site-token="..." asset-id="1"
  title="会员月卡" price="¥ 19.9"
  mp-pay-url="https://...?asset_id={id}"></auth-pay>

② 无样式 + 线框皮肤

点击「立即支付」后展示二维码：data-state="scan"；轮询到已支付转 success 并派发 hnai:paid 事件。

③ 无样式 + 深色皮肤

document.querySelector('auth-pay')
  .addEventListener('hnai:paid', e => { /* 发货后的业务动作 */ })

不用组件，直接调接口

下面按钮会真的打中台接口（当前 token），响应原样展示，便于确认字段与错误文案。

ticket: {{ ticket }}
qr: {{ qrUrl }}

{{ rawResp }}

等价 curl

curl -X POST '{{ origin }}/api/auth/ticket?site_token={{ token || 'YOUR_TOKEN' }}' \
  -H 'Content-Type: application/json' \
  -d '{"scene":"login","channel":"wx"}'
# → {"ticket":"...","scene":"login","qr_url":".../qr?ticket=..."}

curl '{{ origin }}/api/auth/ticket/status?ticket=TICKET'
# → {"status":"pending|confirmed|expired"}

curl -X POST '{{ origin }}/api/auth/ticket/exchange' \
  -H 'Content-Type: application/json' -d '{"ticket":"TICKET"}'
# → {"token":"...","user":{...}}

登录组件状态

以下为静态快照（不发起请求），用于确认各状态的文案与配色。每个状态都体现在根节点的 data-state 上，业务站可直接写 .hnai-login[data-state="error"]{...}。

idle（未开始）

waiting（等待扫码）

success（已确认）

error · 二维码过期

error · 场景未授权

error · 站点令牌无效

支付组件状态

idle（待发起）

会员月卡

¥ 19.9

scan（扫码支付中）

会员月卡

¥ 19.9

请使用微信扫描二维码，在「小程序」内完成支付

success（已支付）

会员月卡

¥ 19.9

支付成功

error · 未配置支付入口

会员月卡

¥ 19.9

未配置 mp-pay-url（小程序支付入口）