@auth-link/web 2.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +120 -129
- package/dist/index.js +203 -658
- package/dist/index.js.map +4 -4
- package/dist/react.js +227 -584
- package/dist/react.js.map +4 -4
- package/dist/types/core.d.ts +4 -38
- package/dist/types/index.d.ts +3 -7
- package/dist/types/modal.d.ts +3 -19
- package/dist/types/react.d.ts +4 -15
- package/dist/types/types.d.ts +35 -59
- package/dist/types/view.d.ts +6 -10
- package/dist/types/vue.d.ts +5 -16
- package/dist/vue.js +231 -626
- package/dist/vue.js.map +4 -4
- package/docs/README.en.md +41 -44
- package/docs/README.ja.md +41 -44
- package/docs/README.zh-CN.md +41 -44
- package/examples/react-client.tsx +9 -21
- package/examples/vue-client.vue +9 -26
- package/package.json +2 -2
- package/dist/types/passcode.d.ts +0 -28
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.0 — 2026-11-14
|
|
4
|
+
|
|
5
|
+
- Keep the existing minimal layout, responsive styles and 13 languages.
|
|
6
|
+
- **Breaking:** expose openBind / openVerify and React/Vue AuthLinkBind / AuthLinkVerify only.
|
|
7
|
+
- Use submit(code, {signal}): Promise<void>; resolve after CMS verification and business commit, throw on failure. Success callbacks no longer require frontend AuthLink receipts.
|
|
8
|
+
- Remove built-in HTTP/token configuration and legacy request, receipt, approval and observation APIs.
|
|
9
|
+
- Binding QR remains valid for up to 60 minutes, with explicit refresh after expiry. Daily verification has no QR or invented code timer; optional CMS action deadlines are independent of the one-minute App code.
|
|
10
|
+
- No changes to Go SDK or AuthLink server APIs.
|
|
11
|
+
- Restrict typing and pasting to at most six ASCII digits, preserving leading zeroes and accepting grouped-code pastes.
|
|
12
|
+
|
|
13
|
+
## 2.0.2 — Unreleased
|
|
14
|
+
|
|
15
|
+
- Support first-enrollment QR tickets and binding prompts for 60 minutes from creation.
|
|
16
|
+
- Keep ordinary CMS verification prompts capped at five minutes and App passcodes / verification receipts at one minute.
|
|
17
|
+
- Preserve the original expiry on retries; coordinate this release with the server, Go/Node SDK and App 1.0.8 (11).
|
|
18
|
+
|
|
19
|
+
## 2.0.1 — Unreleased
|
|
20
|
+
|
|
21
|
+
- Require device-signed-code.v1 receipts for the new online hardware-signed passcode flow.
|
|
22
|
+
- Document the App one-minute code lifetime, foreground refresh and offline retry. CMS request fields stay unchanged.
|
|
23
|
+
|
|
3
24
|
## 2.0.0 — 2026-11-13
|
|
4
25
|
|
|
5
26
|
- Use the responsive minimal layout for every JavaScript, React and Vue binding/verification dialog.
|
package/README.md
CHANGED
|
@@ -4,199 +4,190 @@
|
|
|
4
4
|
|
|
5
5
|
## English
|
|
6
6
|
|
|
7
|
-
###
|
|
8
|
-
|
|
9
|
-
All dialogs now use the minimal layout. Remove the variant option/prop, modal.setVariant() calls and DialogVariant type imports. Language switching and verification callbacks are unchanged.
|
|
10
|
-
|
|
11
|
-
### Direct rotating-code verification
|
|
12
|
-
|
|
13
|
-
The app directly displays a six-digit rotating code. No per-action approval, authorization requestId, businessId or polling is required. First-time enrollment still scans a QR and verifies the phone; entering its current code on the website completes binding.
|
|
14
|
-
|
|
15
|
-
The CMS backend must reserve one immutable pending action per session before opening the prompt. Another tab cannot replace it. Obtain the user from the server session and check CSRF and business permissions. Verify the passcode on the server and atomically commit verificationId with the saved operation before returning success. onVerified only updates the UI.
|
|
7
|
+
### Install and use
|
|
16
8
|
|
|
17
9
|
```sh
|
|
18
|
-
npm install @auth-link/web@^
|
|
10
|
+
npm install @auth-link/web@^3.0.0
|
|
19
11
|
```
|
|
20
12
|
|
|
13
|
+
Same minimal responsive layout and 13 languages, Simplified Chinese by default. First enrollment shows a QR and a six-digit input; daily verification shows only the input. The SDK makes no HTTP requests, creates no authorization requests and never polls. There is no baseUrl, csrfToken, accessToken or fetch configuration.
|
|
14
|
+
|
|
21
15
|
```ts
|
|
22
|
-
import {
|
|
16
|
+
import { openVerify, openBind } from '@auth-link/web';
|
|
23
17
|
import '@auth-link/web/styles.css';
|
|
24
|
-
const client = createPasscodeClient({ baseUrl: '/api', csrfToken: () => csrfToken });
|
|
25
|
-
const modal = openPasscode({
|
|
26
|
-
client, expiresAt: pending.expiresAt, locale: 'zh-CN',
|
|
27
|
-
// First-time enrollment only:
|
|
28
|
-
// bindingQr: pending.bindingQr, authLinkOrigin: 'https://api.getauthlink.com',
|
|
29
|
-
onVerified: result => updateUI(result.verificationId),
|
|
30
|
-
});
|
|
31
|
-
// modal.setLocale('en'); modal.destroy();
|
|
32
|
-
```
|
|
33
18
|
|
|
34
|
-
|
|
19
|
+
openVerify({
|
|
20
|
+
submit: async (passcode, { signal }) => {
|
|
21
|
+
const result = await cmsApi.verifyAuthLink({ passcode }, { signal });
|
|
22
|
+
if (!result.success) throw new Error(result.message || 'VERIFICATION_FAILED');
|
|
23
|
+
},
|
|
24
|
+
onSuccess: () => refreshPage(),
|
|
25
|
+
});
|
|
35
26
|
|
|
36
|
-
|
|
27
|
+
// First enrollment only; the CMS creates the binding ticket first.
|
|
28
|
+
openBind({
|
|
29
|
+
qr: ticket.qr,
|
|
30
|
+
expiresAt: ticket.expiresAt,
|
|
31
|
+
authLinkOrigin: 'https://api.getauthlink.com',
|
|
32
|
+
submit: async (passcode, { signal }) => {
|
|
33
|
+
await cmsApi.completeBinding({ passcode }, { signal });
|
|
34
|
+
// This wrapper must throw on HTTP AND business failure.
|
|
35
|
+
},
|
|
36
|
+
onSuccess: () => refreshAccounts(),
|
|
37
|
+
onRefresh: ({ signal }) => cmsApi.createBinding({ signal }),
|
|
38
|
+
});
|
|
39
|
+
```
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
The cmsApi functions above belong to your application, not this package. Reuse the CMS request wrapper for authentication, CSRF, CORS and business errors. Cookie authentication still requires your existing CSRF protection. Tenant API keys remain on the CMS server.
|
|
39
42
|
|
|
40
|
-
|
|
43
|
+
### Submit contract
|
|
41
44
|
|
|
42
|
-
|
|
45
|
+
`submit(passcode, { signal }): Promise<void>` receives the six digits as a string, preserving leading zeros. Resolve only after CMS verification AND the business operation succeed; throw on HTTP or business failure, including HTTP 200 with success=false. A returned JSON object is not inspected. Do not return {success:false}; throw instead. No verificationId or AuthLink receipt must be exposed to the SDK. CMS validates the receipt and stores verificationId with its business transaction.
|
|
43
46
|
|
|
44
|
-
The
|
|
47
|
+
The SDK blocks duplicate submissions. Failed codes remain editable for explicit retry. Closing/unmounting or action expiry aborts signal; forward it to your request layer. Cancellation cannot undo server work. Keep the original pending action and idempotency key for ambiguous outcomes. Never interpret a timeout as a failed business transaction.
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
import { AuthLinkPasscode } from '@auth-link/web/react';
|
|
48
|
-
// Keep client stable (for example with useMemo).
|
|
49
|
-
<AuthLinkPasscode client={client} expiresAt={pending.expiresAt}
|
|
50
|
-
locale="zh-CN" onVerified={updateUI} />
|
|
51
|
-
```
|
|
52
|
-
```vue
|
|
53
|
-
<script setup>
|
|
54
|
-
import { AuthLinkPasscode } from '@auth-link/web/vue';
|
|
55
|
-
</script>
|
|
56
|
-
<template>
|
|
57
|
-
<AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
|
|
58
|
-
locale="zh-CN" @verified="updateUI" />
|
|
59
|
-
</template>
|
|
60
|
-
```
|
|
49
|
+
Success closes the prompt and calls onSuccess without arguments. onSuccess only updates UI, never authorizes server work. An onSuccess failure does not reopen or resubmit the operation. onError receives the original Error. close() calls onClose; destroy() cleans up silently. retry() clears errors without network activity. setLocale(locale) changes language while retaining input.
|
|
61
50
|
|
|
62
|
-
###
|
|
51
|
+
### Time and binding refresh
|
|
63
52
|
|
|
64
|
-
|
|
53
|
+
openVerify requires only submit; expiresAt is an optional CMS action deadline. There is no artificial five-minute SDK limit. It is NOT a countdown for the App's current code, whose generation time the browser does not know. The App code and receipt remain valid for at most one minute.
|
|
65
54
|
|
|
66
|
-
|
|
55
|
+
openBind additionally requires qr (JSON payload, not SVG/URL) and expiresAt returned by CMS. The binding QR lasts up to 60 minutes from creation; scanning and retrying do not extend it. authLinkOrigin optionally checks the expected AuthLink API origin. QR generation is local. onRefresh({signal}) is optional, returns Promise<{qr,expiresAt}>, and runs only when the user clicks refresh after expiry. The CMS owns replacement requests. A failed refresh stays expired and can be retried.
|
|
67
56
|
|
|
68
|
-
|
|
57
|
+
### React and Vue
|
|
69
58
|
|
|
70
|
-
|
|
59
|
+
Import AuthLinkVerify / AuthLinkBind from @auth-link/web/react or @auth-link/web/vue. Options match the JavaScript API; Vue emits success, close, error, expired. onRefresh remains a function prop that returns a ticket. Components render no dialog during SSR and abort browser work on unmount. Unmount the component on success/close/expiry before preparing another operation. React supports updated callback references without resetting the form.
|
|
71
60
|
|
|
72
|
-
|
|
61
|
+
See [React example](examples/react-client.tsx) and [Vue example](examples/vue-client.vue). Explicitly import @auth-link/web/styles.css. React 18.2+/19, Vue 3.3+, ESM and TypeScript are supported; the development toolchain requires Node 22.13+.
|
|
73
62
|
|
|
74
|
-
###
|
|
63
|
+
### Migrate from 2.x
|
|
75
64
|
|
|
76
|
-
|
|
65
|
+
Remove createAuthLinkClient, createPasscodeClient, openPasscode, openAuthLink*, observeRequest, Ticket/Consume, AuthLinkPasscode, AuthLinkConfirm and useAuthLink. Replace client.verify with submit(code,{signal}); onVerified/onConfirmed with onSuccess(). Use openBind({qr,expiresAt,submit}) for initial enrollment and openVerify({submit}) for daily checks. Remove HTTP/token settings and legacy result/polling code. Move all network/authentication handling to the CMS wrapper. Go SDK and AuthLink server APIs do not change.
|
|
77
66
|
|
|
78
|
-
|
|
67
|
+
---
|
|
79
68
|
|
|
80
|
-
|
|
69
|
+
## 简体中文
|
|
81
70
|
|
|
82
|
-
|
|
71
|
+
### 安装与使用
|
|
83
72
|
|
|
84
73
|
```sh
|
|
85
|
-
npm install @auth-link/web@^
|
|
74
|
+
npm install @auth-link/web@^3.0.0
|
|
86
75
|
```
|
|
87
76
|
|
|
77
|
+
保留原有极简响应式布局和 13 种语言,默认简体中文。首次绑定显示二维码和六位码输入框,日常验证仅显示输入框。SDK 不发送 HTTP 请求、不创建逐次授权请求、不轮询,无需配置 baseUrl、csrfToken、accessToken 或 fetch。
|
|
78
|
+
|
|
88
79
|
```ts
|
|
89
|
-
import {
|
|
80
|
+
import { openVerify, openBind } from '@auth-link/web';
|
|
90
81
|
import '@auth-link/web/styles.css';
|
|
91
|
-
const client = createPasscodeClient({ baseUrl: '/api', csrfToken: () => csrfToken });
|
|
92
|
-
const modal = openPasscode({
|
|
93
|
-
client, expiresAt: pending.expiresAt, locale: 'zh-CN',
|
|
94
|
-
// First-time enrollment only:
|
|
95
|
-
// bindingQr: pending.bindingQr, authLinkOrigin: 'https://api.getauthlink.com',
|
|
96
|
-
onVerified: result => updateUI(result.verificationId),
|
|
97
|
-
});
|
|
98
|
-
// modal.setLocale('en'); modal.destroy();
|
|
99
|
-
```
|
|
100
82
|
|
|
101
|
-
|
|
83
|
+
openVerify({
|
|
84
|
+
submit: async (passcode, { signal }) => {
|
|
85
|
+
const result = await cmsApi.verifyAuthLink({ passcode }, { signal });
|
|
86
|
+
if (!result.success) throw new Error(result.message || 'VERIFICATION_FAILED');
|
|
87
|
+
},
|
|
88
|
+
onSuccess: () => refreshPage(),
|
|
89
|
+
});
|
|
102
90
|
|
|
103
|
-
|
|
91
|
+
// First enrollment only; the CMS creates the binding ticket first.
|
|
92
|
+
openBind({
|
|
93
|
+
qr: ticket.qr,
|
|
94
|
+
expiresAt: ticket.expiresAt,
|
|
95
|
+
authLinkOrigin: 'https://api.getauthlink.com',
|
|
96
|
+
submit: async (passcode, { signal }) => {
|
|
97
|
+
await cmsApi.completeBinding({ passcode }, { signal });
|
|
98
|
+
// This wrapper must throw on HTTP AND business failure.
|
|
99
|
+
},
|
|
100
|
+
onSuccess: () => refreshAccounts(),
|
|
101
|
+
onRefresh: ({ signal }) => cmsApi.createBinding({ signal }),
|
|
102
|
+
});
|
|
103
|
+
```
|
|
104
104
|
|
|
105
|
-
|
|
105
|
+
示例中的 cmsApi 是 CMS 自己的请求封装,不是本 SDK 提供的方法。复用已有登录态、CSRF、跨域和错误处理;Cookie 模式仍需 CMS 原有的 CSRF 保护。租户密钥只保存在 CMS 服务端。
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
### submit 返回什么
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
`submit(passcode, { signal }): Promise<void>` 接收六位数字字符串,保留前导零。只有 CMS 校验验证码并完成业务后才能正常结束;HTTP 或业务失败必须抛错,包括 HTTP 200 但 success=false。SDK 不检查返回 JSON,不能用 return {success:false} 代替抛错。前端不必返回 AuthLink 回执或 verificationId;由 CMS 后台核验并与业务事务一起保存。
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
SDK 防止重复提交,失败保留输入供用户主动重试。关闭、卸载或业务待办过期会取消 signal,请传给请求层。取消前端等待不能撤销后台已完成的操作;网络结果不明确时保留原待办、原验证码及原幂等键重试,不要另建业务操作。
|
|
112
112
|
|
|
113
|
-
|
|
114
|
-
import { AuthLinkPasscode } from '@auth-link/web/react';
|
|
115
|
-
// Keep client stable (for example with useMemo).
|
|
116
|
-
<AuthLinkPasscode client={client} expiresAt={pending.expiresAt}
|
|
117
|
-
locale="zh-CN" onVerified={updateUI} />
|
|
118
|
-
```
|
|
119
|
-
```vue
|
|
120
|
-
<script setup>
|
|
121
|
-
import { AuthLinkPasscode } from '@auth-link/web/vue';
|
|
122
|
-
</script>
|
|
123
|
-
<template>
|
|
124
|
-
<AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
|
|
125
|
-
locale="zh-CN" @verified="updateUI" />
|
|
126
|
-
</template>
|
|
127
|
-
```
|
|
113
|
+
成功时关闭弹窗并调用无参数 onSuccess,回调只更新页面,不负责后台放行。页面更新失败不会重新打开或重复提交。onError 接收原 Error;close() 触发 onClose,destroy() 静默清理。retry() 只清除错误,setLocale(locale) 保留输入切换语言,二者都不会自动发送请求。
|
|
128
114
|
|
|
129
|
-
###
|
|
115
|
+
### 有效期与二维码刷新
|
|
130
116
|
|
|
131
|
-
|
|
117
|
+
openVerify 只要求 submit。expiresAt 可选,表示 CMS 当前业务待办的截止时间,SDK 不再强制五分钟上限。网页不知道 App 当前码何时生成,因此不伪造一分钟验证码倒计时;App 的数字码和服务端回执仍最多有效一分钟。
|
|
132
118
|
|
|
133
|
-
|
|
119
|
+
openBind 还要求 CMS 返回的 qr(二维码 JSON 内容,不是图片或 URL)和 expiresAt。二维码从创建起最多有效 60 分钟,扫码和重试不延长。authLinkOrigin 可选,仅核对 AuthLink API 来源。二维码在本地生成。onRefresh({signal}) 可选,返回 Promise<{qr,expiresAt}>;仅过期后用户主动点击重新获取时执行,由 CMS 创建替换请求。刷新失败保持过期状态,可再次重试。
|
|
134
120
|
|
|
135
|
-
|
|
121
|
+
### React 与 Vue
|
|
136
122
|
|
|
137
|
-
|
|
123
|
+
从 @auth-link/web/react 或 @auth-link/web/vue 导入 AuthLinkVerify / AuthLinkBind,参数与 JavaScript 一致。Vue 发出 success、close、error、expired 事件;onRefresh 是返回新二维码的函数属性。SSR 不打开弹窗,卸载时自动取消等待。成功、关闭或过期后由父组件卸载,再准备新操作;React 更新回调引用不会清空输入。
|
|
138
124
|
|
|
139
|
-
|
|
125
|
+
参见 [React 示例](examples/react-client.tsx)、[Vue 示例](examples/vue-client.vue)。显式导入 @auth-link/web/styles.css。支持 React 18.2+/19、Vue 3.3+、ESM 和 TypeScript,开发工具链要求 Node 22.13+。
|
|
140
126
|
|
|
141
|
-
###
|
|
127
|
+
### 从 2.x 升级
|
|
142
128
|
|
|
143
|
-
|
|
129
|
+
移除 createAuthLinkClient、createPasscodeClient、openPasscode、openAuthLink*、observeRequest、Ticket/Consume、AuthLinkPasscode、AuthLinkConfirm 和 useAuthLink。client.verify 改为 submit(code,{signal});onVerified/onConfirmed 改为无参数 onSuccess。首次绑定使用 openBind({qr,expiresAt,submit}),日常验证使用 openVerify({submit})。删除 SDK 的 HTTP/Token 配置及旧审批流程,网络鉴权交给 CMS 请求层。Go SDK 和 AuthLink 服务端接口无需调整。
|
|
144
130
|
|
|
145
|
-
|
|
131
|
+
---
|
|
146
132
|
|
|
147
|
-
|
|
133
|
+
## 日本語
|
|
148
134
|
|
|
149
|
-
|
|
135
|
+
### インストールと使い方
|
|
150
136
|
|
|
151
137
|
```sh
|
|
152
|
-
npm install @auth-link/web@^
|
|
138
|
+
npm install @auth-link/web@^3.0.0
|
|
153
139
|
```
|
|
154
140
|
|
|
141
|
+
従来のシンプルなレスポンシブ画面と13言語を維持します。既定は簡体字中国語です。初回連携はQRコードと6桁入力、通常認証は入力のみです。SDKはHTTP通信、操作ごとの認証リクエスト作成、ポーリングを行いません。baseUrl、csrfToken、accessToken、fetchの設定は不要です。
|
|
142
|
+
|
|
155
143
|
```ts
|
|
156
|
-
import {
|
|
144
|
+
import { openVerify, openBind } from '@auth-link/web';
|
|
157
145
|
import '@auth-link/web/styles.css';
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
146
|
+
|
|
147
|
+
openVerify({
|
|
148
|
+
submit: async (passcode, { signal }) => {
|
|
149
|
+
const result = await cmsApi.verifyAuthLink({ passcode }, { signal });
|
|
150
|
+
if (!result.success) throw new Error(result.message || 'VERIFICATION_FAILED');
|
|
151
|
+
},
|
|
152
|
+
onSuccess: () => refreshPage(),
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
// First enrollment only; the CMS creates the binding ticket first.
|
|
156
|
+
openBind({
|
|
157
|
+
qr: ticket.qr,
|
|
158
|
+
expiresAt: ticket.expiresAt,
|
|
159
|
+
authLinkOrigin: 'https://api.getauthlink.com',
|
|
160
|
+
submit: async (passcode, { signal }) => {
|
|
161
|
+
await cmsApi.completeBinding({ passcode }, { signal });
|
|
162
|
+
// This wrapper must throw on HTTP AND business failure.
|
|
163
|
+
},
|
|
164
|
+
onSuccess: () => refreshAccounts(),
|
|
165
|
+
onRefresh: ({ signal }) => cmsApi.createBinding({ signal }),
|
|
164
166
|
});
|
|
165
|
-
// modal.setLocale('en'); modal.destroy();
|
|
166
167
|
```
|
|
167
168
|
|
|
168
|
-
|
|
169
|
+
cmsApi はサイト側の既存リクエスト処理です。認証、CSRF、CORS、業務エラーはCMS側で処理してください。Cookie認証では既存のCSRF対策を維持し、テナントAPIキーはサーバーにのみ保存します。
|
|
169
170
|
|
|
170
|
-
###
|
|
171
|
+
### submit の契約
|
|
171
172
|
|
|
172
|
-
|
|
173
|
+
`submit(passcode, { signal }): Promise<void>` は先頭ゼロを含む6桁の文字列を受け取ります。CMSがコード検証と業務処理を完了してから正常終了し、HTTPまたは業務エラーでは例外を投げます。HTTP 200でもsuccess=falseなら例外が必要です。SDKは戻り値JSONを判定しません。return {success:false} は失敗通知になりません。AuthLinkの検証結果やverificationIdをブラウザーへ返す必要はなく、CMSが検証して業務トランザクションに保存します。
|
|
173
174
|
|
|
174
|
-
|
|
175
|
+
二重送信を防ぎ、エラー後は明示的に再送できます。閉じる、アンマウント、CMS操作の期限切れでsignalがキャンセルされるため、リクエスト層へ渡してください。ブラウザーの中止はサーバー処理の取り消しではありません。結果不明の場合は元の操作、コード、冪等キーを維持し、別の業務操作を作成しないでください。
|
|
175
176
|
|
|
176
|
-
|
|
177
|
+
成功時は画面を閉じて引数なしのonSuccessを呼びます。onSuccessは表示更新専用です。その失敗で業務を再送しません。onErrorは元のErrorを受け取り、close()はonCloseを通知、destroy()は通知せず終了します。retry()はエラーを消すだけです。setLocale(locale)は入力を維持して言語を切り替えます。
|
|
177
178
|
|
|
178
|
-
|
|
179
|
+
### 期限とQR更新
|
|
179
180
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
```
|
|
186
|
-
```vue
|
|
187
|
-
<script setup>
|
|
188
|
-
import { AuthLinkPasscode } from '@auth-link/web/vue';
|
|
189
|
-
</script>
|
|
190
|
-
<template>
|
|
191
|
-
<AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
|
|
192
|
-
locale="zh-CN" @verified="updateUI" />
|
|
193
|
-
</template>
|
|
194
|
-
```
|
|
181
|
+
openVerifyはsubmitのみ必須で、expiresAtはCMS操作の任意の期限です。SDK側の5分制限はありません。Appの現在のコード生成時刻はブラウザーから分からないため、1分のカウントダウンを仮定しません。Appコードと検証検証結果は引き続き最長1分です。
|
|
182
|
+
|
|
183
|
+
openBindはCMSが返したqr(画像URLではなくJSON)とexpiresAtも必要です。QRは作成から最長60分で、スキャンや再試行では延長しません。authLinkOriginは任意のAuthLink APIオリジン照合です。QR描画はローカルのみです。onRefresh({signal})はPromise<{qr,expiresAt}>を返し、期限切れ後に利用者が更新を選んだ場合のみ実行します。新規リクエストはCMSが管理し、更新失敗時は期限切れのまま再試行できます。
|
|
184
|
+
|
|
185
|
+
### React / Vue
|
|
195
186
|
|
|
196
|
-
|
|
187
|
+
@auth-link/web/react または @auth-link/web/vue からAuthLinkVerify / AuthLinkBindをインポートします。JavaScriptと同じオプションで、Vueはsuccess、close、error、expiredを通知します。onRefreshはチケットを返す関数propです。SSRでは画面を開かず、アンマウント時に中止します。成功・終了後は親側でアンマウントし、次の操作を準備してください。Reactはコールバック更新で入力をリセットしません。
|
|
197
188
|
|
|
198
|
-
|
|
189
|
+
[React例](examples/react-client.tsx)、[Vue例](examples/vue-client.vue)。@auth-link/web/styles.cssを明示的に読み込みます。React 18.2+/19、Vue 3.3+、ESM、TypeScriptに対応し、開発にはNode 22.13+が必要です。
|
|
199
190
|
|
|
200
|
-
|
|
191
|
+
### 2.xからの移行
|
|
201
192
|
|
|
202
|
-
|
|
193
|
+
createAuthLinkClient、createPasscodeClient、openPasscode、openAuthLink*、observeRequest、Ticket/Consume、AuthLinkPasscode、AuthLinkConfirm、useAuthLinkは削除されました。client.verifyをsubmit(code,{signal})、onVerified/onConfirmedをonSuccess()へ変更します。初回はopenBind({qr,expiresAt,submit})、通常はopenVerify({submit})です。HTTPやToken設定をCMSの通信層に移します。Go SDKとAuthLinkサーバーAPIの変更は不要です。
|