From 63c1b84b41f93163049efb66725e4bca83892342 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 8 Sep 2026 00:51:06 +0800 Subject: [PATCH] feat(web): phone registration + fix login/register response handling - Add RegisterPage (phone + SMS code) and lib/api/auth.ts verification-code endpoints, wired into App.tsx routing. - Fix registerAccountByPhone(): the injected acc.phone extra field must be bare 11-digit, not E.164 -- server checks digit length before normalizing. - Fix LoginCtrl shape: SDK's login/loginBasic/createAccountBasic promises resolve with the ctrl fields flat, not wrapped in {ctrl: {...}}. - Fix tinode-sdk.d.ts: the real method is getCurrentUserID(), there is no getAuthenticatedUserID(). All three bugs found and fixed via live testing against the real backend (api.118im.com, tenant "default"), confirming registration and login both work end-to-end. Co-Authored-By: Claude Sonnet 5 --- web/src/App.tsx | 2 + web/src/features/auth/LoginPage.tsx | 9 +- web/src/features/auth/RegisterPage.tsx | 137 +++++++++++++++++++++++++ web/src/lib/api/auth.ts | 23 +++++ web/src/lib/tinode/connection.ts | 74 +++++++++++-- web/src/lib/tinode/tinode-sdk.d.ts | 35 ++++++- 6 files changed, 268 insertions(+), 12 deletions(-) create mode 100644 web/src/features/auth/RegisterPage.tsx create mode 100644 web/src/lib/api/auth.ts diff --git a/web/src/App.tsx b/web/src/App.tsx index 898196b7..b3e61394 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -5,6 +5,7 @@ import { AppShell } from '@/app/AppShell'; import { RequireAuth } from '@/app/RequireAuth'; import { SectionPlaceholder } from '@/app/SectionPlaceholder'; import { LoginPage } from '@/features/auth/LoginPage'; +import { RegisterPage } from '@/features/auth/RegisterPage'; import { TenantEntryPage } from '@/features/auth/TenantEntryPage'; import { ConversationView } from '@/features/messages/ConversationView'; import { EmptyMain } from '@/features/messages/EmptyMain'; @@ -15,6 +16,7 @@ const queryClient = new QueryClient(); const router = createBrowserRouter([ { path: 'tenant', element: }, { path: 'login', element: }, + { path: 'register', element: }, { element: , children: [ diff --git a/web/src/features/auth/LoginPage.tsx b/web/src/features/auth/LoginPage.tsx index 312f83b1..134cd3f8 100644 --- a/web/src/features/auth/LoginPage.tsx +++ b/web/src/features/auth/LoginPage.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Navigate, useNavigate } from 'react-router-dom'; +import { Link, Navigate, useNavigate } from 'react-router-dom'; import { connect } from '@/lib/tinode/connection'; import { useTinode } from '@/lib/tinode/hooks'; @@ -43,7 +43,7 @@ export function LoginPage() { if (!tinode.isConnected()) { await connect(); } - const { ctrl } = await tinode.loginBasic(login.trim(), password); + const ctrl = await tinode.loginBasic(login.trim(), password); if (ctrl.code >= 300 && ctrl.text === 'validate credentials') { // Account created but needs credential confirmation (email/SMS code) -- full flow lands // with the register/credential-confirm screens later in Phase 1. @@ -52,7 +52,7 @@ export function LoginPage() { } const authToken = tinode.getAuthToken(); sessionStorage.setItem('im-session-token', authToken ? authToken.token : ''); - setMyUserId(tinode.getAuthenticatedUserID() ?? null); + setMyUserId(tinode.getCurrentUserID() || null); navigate('/messages'); } catch (err) { setError(loginErrorMessage(err)); @@ -89,6 +89,9 @@ export function LoginPage() { > {submitting ? '登录中…' : '登录'} + + 没有账户？马上注册 + ); diff --git a/web/src/features/auth/RegisterPage.tsx b/web/src/features/auth/RegisterPage.tsx new file mode 100644 index 00000000..490bcd57 --- /dev/null +++ b/web/src/features/auth/RegisterPage.tsx @@ -0,0 +1,137 @@ +import { useRef, useState } from 'react'; + +import { Link, Navigate, useNavigate } from 'react-router-dom'; + +import { requestVerificationCode, verifyRegisterCode } from '@/lib/api/auth'; +import { ImApiError } from '@/lib/api/client'; +import { registerAccountByPhone } from '@/lib/tinode/connection'; +import { useSessionStore } from '@/stores/session'; + +function toE164(phone: string): string { + return phone.startsWith('+') ? phone : `+86${phone}`; +} + +export function RegisterPage() { + const navigate = useNavigate(); + const tenant = useSessionStore((s) => s.tenant); + const setMyUserId = useSessionStore((s) => s.setMyUserId); + + const [phone, setPhone] = useState(''); + const [code, setCode] = useState(''); + const [password, setPassword] = useState(''); + const [challengeId, setChallengeId] = useState(''); + const [resendIn, setResendIn] = useState(0); + const [sendingCode, setSendingCode] = useState(false); + const [submitting, setSubmitting] = useState(false); + const [error, setError] = useState(''); + const timerRef = useRef(undefined); + + if (!tenant) return ; + + const phoneValid = /^1\d{10}$/.test(phone); + + const sendCode = async () => { + if (!phoneValid || sendingCode || resendIn > 0) return; + setSendingCode(true); + setError(''); + try { + const res = await requestVerificationCode('register', phone); + setChallengeId(res.challenge_id); + setResendIn(res.resend_after_seconds); + window.clearInterval(timerRef.current); + timerRef.current = window.setInterval(() => { + setResendIn((s) => { + if (s <= 1) { + window.clearInterval(timerRef.current); + return 0; + } + return s - 1; + }); + }, 1000); + } catch (err) { + setError(err instanceof ImApiError ? err.message : '验证码发送失败，请重试'); + } finally { + setSendingCode(false); + } + }; + + const submit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!phoneValid || !code || password.length < 8 || !challengeId || submitting) return; + setSubmitting(true); + setError(''); + try { + const { verification_token } = await verifyRegisterCode(challengeId, code); + const phoneE164 = toE164(phone); + const ctrl = await registerAccountByPhone({ + phoneE164, + password, + verificationToken: verification_token, + challengeId, + }); + if (ctrl.code >= 300 && ctrl.text === 'validate credentials') { + setError('账号已创建，但还需要完成验证，此流程正在实现中'); + return; + } + setMyUserId(ctrl.params?.user as string | null); + navigate('/messages'); + } catch (err) { + setError(err instanceof ImApiError ? err.message : (err as Error)?.message || '注册失败，请稍后重试'); + } finally { + setSubmitting(false); + } + }; + + return ( +
+
+

创建账号

+ {error ? ( +
{error}
+ ) : null} + +
+ setCode(e.target.value)} + placeholder="验证码" + className="h-[50px] flex-1 rounded-lg bg-surface-input px-3.5 text-[15px] outline-none" + /> + +
+ setPassword(e.target.value)} + placeholder="密码（至少 8 位）" + className="h-[50px] rounded-lg bg-surface-input px-3.5 text-[15px] outline-none" + /> + + + 已有账号？返回登录 + +
+
+ ); +} diff --git a/web/src/lib/api/auth.ts b/web/src/lib/api/auth.ts new file mode 100644 index 00000000..212e31e7 --- /dev/null +++ b/web/src/lib/api/auth.ts @@ -0,0 +1,23 @@ +import { imPost, imRequest } from './client'; + +export interface VerificationCodeResponse { + challenge_id: string; + resend_after_seconds: number; +} + +export function requestVerificationCode(scene: 'register' | 'reset_password', phone: string) { + return imPost('/auth/verification-codes', { scene, phone }, { auth: false }); +} + +export interface VerifyCodeResponse { + verification_token: string; +} + +/** No Idempotency-Key here, matching the old app's im-api.js -- a plain code check, not a mutation. */ +export function verifyRegisterCode(challengeId: string, code: string) { + return imRequest(`/auth/verification-codes/${encodeURIComponent(challengeId)}/verify`, { + method: 'POST', + auth: false, + body: { code }, + }); +} diff --git a/web/src/lib/tinode/connection.ts b/web/src/lib/tinode/connection.ts index 813b32b8..27b3d3a2 100644 --- a/web/src/lib/tinode/connection.ts +++ b/web/src/lib/tinode/connection.ts @@ -7,7 +7,7 @@ // silently stomp on each other. This module claims all the SDK's callback slots exactly once and // fans them out to any number of subscribers via its own Set, which is what hooks.ts's // useSyncExternalStore-based hooks actually subscribe to. -import { Tinode } from 'tinode-sdk'; +import { Tinode, type LoginCtrl } from 'tinode-sdk'; import { API_KEY, APP_NAME, LOGGING_ENABLED } from '@/lib/config'; import { useSessionStore } from '@/stores/session'; @@ -25,18 +25,32 @@ function setStatus(next: ConnectionStatus) { } /** - * The server extends the stock {hi} packet with a `tenant` field (server/datamodel.go) that the - * vendored JS SDK has no API for. `#initPacket`/the connection's packet builder is private, so the - * only usable hook is wrapping the connection's raw sendText and injecting the field into the - * already-serialized JSON. Ported as-is from the old app's tnSetup/installTenantHiPatch -- this is - * a real backend protocol extension, not an old-codebase-specific workaround. + * Registration-only extra fields (username/phone/invite_code) queued by registerAccount() below, + * consumed the next time an {acc} packet actually goes out. A module-level slot, not a per-call + * argument, because the SDK's own createAccountBasic() has no parameter for them at all -- same + * one-shot-queue shape as the old app's `tinode.__pendingAccExtra`. + */ +let pendingAccExtra: Record | null = null; + +export function queueAccExtra(extra: Record) { + pendingAccExtra = extra; +} + +/** + * The server extends two stock packets with fields the vendored JS SDK has no API for + * (server/datamodel.go): {hi}'s `tenant` (resolved via POST /v1/im/tenants/resolve) and {acc}'s + * `username`/`phone`/`invite_code` (used by server/user.go's replyCreateUser during registration). + * The packet builder is private, so the only usable hook is wrapping the connection's raw sendText + * and injecting fields into the already-serialized JSON. Ported as-is from the old app's + * tnSetup/installTenantHiPatch -- this is a real backend protocol extension, not an old-codebase- + * specific workaround. */ function installTenantHiPatch(t: Tinode) { const conn = t._connection; if (!conn || conn.__tenantPatched) return; const original = conn.sendText.bind(conn); conn.sendText = (msg: unknown) => { - if (typeof msg === 'string' && msg.indexOf('"hi":') >= 0) { + if (typeof msg === 'string' && (msg.indexOf('"hi":') >= 0 || msg.indexOf('"acc":') >= 0)) { try { const parsed = JSON.parse(msg); if (parsed.hi) { @@ -45,6 +59,10 @@ function installTenantHiPatch(t: Tinode) { parsed.hi.tenant = tenant.code; msg = JSON.stringify(parsed); } + } else if (parsed.acc && pendingAccExtra) { + Object.assign(parsed.acc, pendingAccExtra); + pendingAccExtra = null; + msg = JSON.stringify(parsed); } } catch { // Not valid JSON -- send as is. @@ -105,3 +123,45 @@ export function subscribeConnectionStatus(callback: () => void): () => void { listeners.add(callback); return () => listeners.delete(callback); } + +export interface RegisterPhoneParams { + phoneE164: string; + password: string; + displayName?: string; + verificationToken: string; + challengeId: string; +} + +/** + * Phone-based registration (product Ch.1.4's phone path). Two DIFFERENT phone representations are + * required and mixing them up throws a 422 "policy violation" with no further detail (confirmed + * live against the real backend, then traced to server/user.go's resolveRegistrationAccount): + * - `login_` (this function's first createAccountBasic arg, becomes the secret's account half) + * must equal what resolveRegistrationAccount computes as secretAccount -- for phone + * registration that's the E.164-normalized phone, e.g. "+8613900005232". + * - the injected `acc.phone` extra field is checked *before* any E.164 normalization happens + * (`len(phone) != 11 || !asciiRegistrationDigits(phone)`) -- it must be the bare 11-digit + * number with no "+86" prefix, e.g. "13900005232". Sending the E.164 form here fails that + * length check immediately, which is exactly the bug this comment is warning future edits away + * from reintroducing. + */ +export async function registerAccountByPhone({ + phoneE164, + password, + displayName, + verificationToken, + challengeId, +}: RegisterPhoneParams): Promise { + const t = getTinode(); + if (!t.isConnected()) { + await connect(); + } + const phoneBare = phoneE164.replace(/^\+86/, ''); + queueAccExtra({ phone: phoneBare }); + const cred = Tinode.credential({ meth: 'tel', val: phoneE164, resp: verificationToken, params: { challenge_id: challengeId } }); + const trimmedName = displayName?.trim(); + return t.createAccountBasic(phoneE164, password, { + public: trimmedName ? { fn: trimmedName } : undefined, + cred: cred ?? undefined, + }); +} diff --git a/web/src/lib/tinode/tinode-sdk.d.ts b/web/src/lib/tinode/tinode-sdk.d.ts index 4632b944..f1329e8a 100644 --- a/web/src/lib/tinode/tinode-sdk.d.ts +++ b/web/src/lib/tinode/tinode-sdk.d.ts @@ -19,8 +19,31 @@ declare module 'tinode-sdk' { export type AuthLevel = 'anon' | 'auth' | 'root'; + /** + * login()/loginBasic()/loginToken()/createAccountBasic() all resolve with this shape directly -- + * NOT wrapped in an outer `{ctrl: ...}` key, confirmed against the SDK's own source (the resolved + * value is literally the promise executor's `ctrl` parameter, one level flatter than the *wire* + * message's `{"ctrl": {...}}` envelope). Getting this wrong throws "Cannot read properties of + * undefined" on the very first successful (non-throwing) call, since `.ctrl` doesn't exist -- hit + * live registering a real account before this type was corrected. + */ export interface LoginCtrl { - ctrl: { code: number; text?: string; params?: Record }; + code: number; + text?: string; + params?: Record; + } + + export interface CredentialParam { + meth: string; + val?: string; + resp?: string; + params?: Record; + } + export interface CredentialInput { + meth: string; + val?: string; + resp?: string; + params?: Record; } export class AccessMode { @@ -103,7 +126,7 @@ declare module 'tinode-sdk' { disconnect(): void; isConnected(): boolean; isAuthenticated(): boolean; - getAuthenticatedUserID(): string | undefined; + getCurrentUserID(): string; login(scheme: string, secret: string, cred?: unknown): Promise; loginBasic(username: string, password: string, cred?: unknown): Promise; @@ -114,6 +137,14 @@ declare module 'tinode-sdk' { getTopic(topicName: string): Topic; account(userId: string, scheme: string, secret: string, login: boolean, desc?: unknown): Promise; + createAccountBasic( + username: string, + password: string, + params: { public?: TopicDescPublic; tags?: string[]; cred?: CredentialParam[]; attachments?: string[] }, + ): Promise; + + /** Wraps a single {meth,val,resp,params} credential into the array shape {acc}/createAccountBasic expects. */ + static credential(cred: CredentialInput): CredentialParam[] | null; onConnect?: () => void; onDisconnect?: (err?: Error) => void;