\u6b64\u65f6rootauth\u5bf9\u8c61\u7684\u4f7f\u7528\u65b9\u5f0f\u66f4\u7b80\u6d01<\/span><\/p>\n
const rootauth = useRootAuth()\nrootauth?.xxx()<\/code><\/pre>\n <\/p>\n
6.3 API \u65b9\u6cd5\u8bf4\u660e<\/h3>\n\u767b\u5f55\u3001\u6ce8\u518c\u3001\u53d1\u9001\u9a8c\u8bc1\u7801\u548c\u91cd\u7f6e\u5bc6\u7801<\/strong>\u5747\u8fd4\u56de Promise<\/code>\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4f20\u5165\u81ea\u5b9a\u4e49\u56de\u8c03\uff08onSuccess<\/code>\/onFailure<\/code>\uff09\u6765\u8986\u76d6 SDK \u9ed8\u8ba4\u884c\u4e3a\u3002<\/p>\n
\u82e5\u53ea\u9700\u8865\u5145\u989d\u5916\u903b\u8f91\uff08\u5982\u5173\u95ed loading\uff09\uff0c\u8bf7\u76f4\u63a5\u4f7f\u7528 Promise\uff08.then()<\/code>.catch()<\/code>\uff09\uff0c\u4e0d\u8981\u4f20\u5165\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0cSDK \u4f1a\u4fdd\u7559\u9ed8\u8ba4\u884c\u4e3a\u3002<\/p>\n
6.3.1 \u767b\u5f55<\/h4>\nconst rootauth = useRootAuth()\n\ninterface LoginParams {\n  type: string \/\/ \u5fc5\u586b\u9879\uff0c\u767b\u9646\u65b9\u5f0f\uff1aEMAIL_PASS|EMAIL_CODE\uff0c\u73b0\u5728\u652f\u6301\u8d26\u53f7\u5bc6\u7801\u767b\u9646EMAIL_PASS\u548c\u90ae\u7bb1\u9a8c\u8bc1\u7801\u767b\u9646EMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  password?: string \/\/ \u5f53type\u4e3aEMAIL_PASS\u5fc5\u586b\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code?: string \/\/ \u5f53type\u4e3aEMAIL_CODE\u5fc5\u586b\n}\ninterface RootAuthFlowCallbacks<T = unknown> {\n  onSuccess?: (data: T) => void\n  onFailure?: (error: unknown) => void\n}\n\n\/\/\u53ef\u4f7f\u7528\u7684\u7c7b\u578b\nrootauth?.login(\n  params: LoginParams,\n  callbacks?: RootAuthFlowCallbacks<\n    AxiosResponse<ApiResponse<{ redirect_url: string }>>\n  >,\n)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.log('err', err)\n})\n.finally(() => {\n  \/\/ \u5173\u95edloading\u7b49\n})<\/code><\/pre>\n\u5e26\u81ea\u5b9a\u4e49\u56de\u8c03\u793a\u4f8b\uff1a<\/strong><\/p>\n
const handleSubmit=()=>{\n  \/\/ \u7528\u6237\u81ea\u884c\u5904\u7406\u524d\u7f6e\u6821\u9a8c\n  loading.value = true\n  rootauth?.login({\n    type:'EMAIL_PASS',\n    email:'123456@qq.com',\n    password:'123456'\n  },\n  {\n    onSuccess:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u6210\u529f\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    },\n    onFailure:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u5931\u8d25\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    }\n  })\n  .finally(() => {\n    loading.value = false\n  })\n}<\/code><\/pre>\n <\/p>\n
6.3.2 \u6ce8\u518c<\/h4>\ninterface RegisterParams {\n  type?: string \/\/ \u7528\u6237\u6ce8\u518c\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801\u6ce8\u518cEMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  code: string \/\/ \u5fc5\u586b\u9879\uff0c\u90ae\u7bb1\u6fc0\u6d3b\u7801\n  password: string \/\/ \u5fc5\u586b\u9879\uff0c\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n}\n\nconst params: RegisterParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  code: '123456',\n}\n  \nrootauth?.register(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.3 \u53d1\u9001\u9a8c\u8bc1\u7801<\/h4>\ninterface SendCodeParams {\n  type?: string \/\/ \u53d1\u9001\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  email_template_type: string \/\/ \u5fc5\u586b\u9879\uff0c\u9009\u62e9\u7684\u6a21\u677f\u7c7b\u578b\uff1aregister_code|login_code|reset_pass_code\uff0cregister_code\uff1a\u6ce8\u518c\u9a8c\u8bc1\u7801\uff0clogin_code\uff1a\u767b\u5f55\u9a8c\u8bc1\u7801\uff0creset_pass_code\uff1a\u91cd\u7f6e\u9a8c\u8bc1\u7801\n}\n\nconst params: SendCodeParams = {\n  email: '123456@qq.com',\n  email_template_type: 'register_code'\n}\n  \nrootauth?.sendCode(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.4 \u91cd\u7f6e\u5bc6\u7801<\/h4>\ninterface ResetPasswordUParams {\n  type?: string \/\/ \u53d1\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL_CODE\n  email: string\n  password: string \/\/ \u65b0\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  password_confirmation: string \/\/ \u786e\u8ba4\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code: string\n}\n\nconst params: ResetPasswordUParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  password_confirmation: '123456',\n  code: '111111'\n}\n  \nrootauth?.resetPassword(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.5 \u7b2c\u4e09\u65b9\u767b\u5f55\uff08Google OAuth\uff09<\/h4>\ninterface ThirdPartyLoginParams {\n  auth_by: string \/\/ \u7b2c\u4e09\u65b9\u7c7b\u578b\uff1agoogle_oauth\uff0cgoogle_oauth\uff1a\u8c37\u6b4c\u767b\u9646\n}\n\nconst params: ThirdPartyLoginParams = {\n  auth_by: 'google_oauth'\n}\n  \nrootauth?.thirdPartyLogin(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.6 Google One Tap \u767b\u5f55<\/h4>\n\u9700\u5148\u5728\u914d\u7f6e\u4e2d\u5f00\u542f enable_google_one_tap: true<\/p>\n
rootauth?.googleOneTapLogin()<\/code><\/pre>\n <\/p>\n<\/article>\n
 <\/h4>","pure_content":"RootAuth \u63d0\u4f9b JavaScript SDK\uff0c\u5e2e\u52a9\u60a8\u5728 Web \u5e94\u7528\u4e2d\u5feb\u901f\u96c6\u6210\u767b\u5f55\u3001\u6ce8\u518c\u3001\u6388\u6743\u7b49\u8eab\u4efd\u8ba4\u8bc1\u529f\u80fd\u3002SDK \u652f\u6301\u4e24\u79cd\u63a5\u5165\u6a21\u5f0f\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u9700\u6c42\u7075\u6d3b\u9009\u62e9\u3002\n\u00a0\n1.\u63a5\u5165\u6a21\u5f0f\u6982\u89c8\n\n\n\n\n \u6a21\u5f0f\n \u8bf4\u660e\n \u9002\u7528\u573a\u666f\n\n\n\n\n Hosted\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n \u4f7f\u7528 RootAuth \u63d0\u4f9b\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\uff08\u542b UI \u548c\u63a5\u53e3\uff09\n \u5e0c\u671b\u5feb\u901f\u4e0a\u7ebf\uff0c\u5bf9\u8ba4\u8bc1\u9875\u9762\u6837\u5f0f\u6709\u57fa\u672c\u8981\u6c42\n\n\n API\uff08\u63a5\u53e3\u6a21\u5f0f\uff09\n \u4ec5\u8c03\u7528 RootAuth \u7684 API \u63a5\u53e3\uff0c\u5b8c\u5168\u81ea\u5b9a\u4e49 UI\n \u9700\u8981\u4e0e\u4ea7\u54c1\u539f\u6709\u8bbe\u8ba1\u98ce\u683c\u4fdd\u6301\u4e00\u81f4\uff0c\u6216\u6df1\u5ea6\u5b9a\u5236\u8ba4\u8bc1\u6d41\u7a0b\n\n\n\n\n\u4e24\u79cd\u6a21\u5f0f\u7684\u5171\u540c\u70b9\uff1a\n\n\n\u90fd\u9700\u8981\u5728\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\uff0c\u83b7\u53d6\u00a0app_id\n\n\n\u90fd\u9700\u8981\u521b\u5efa\u00a0RootAuthClient \u5b9e\u4f8b\n\n\n\u00a0\n2. \u51c6\u5907\u5de5\u4f5c\n\u521b\u5efa\u5e94\u7528\u5e76\u83b7\u53d6 app_id\n\n\n\u767b\u5f55 RootAuth \u5de5\u4f5c\u53f0\n\n\n\u521b\u5efa\u6216\u9009\u62e9\u60a8\u7684\u5e94\u7528\n\n\n\u5728\u5e94\u7528\u914d\u7f6e\u9875\u9762\u590d\u5236 APP ID\uff08\u683c\u5f0f\u5982 app_******\uff09\n\n\n\n3. \u5b89\u88c5 SDK\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5b89\u88c5\u6b63\u5f0f\u7248\u672c\uff1a\nnpm install --save rootauth-js\n\n\u6ce8\u610f\uff1a\u8bf7\u52ff\u4e0b\u8f7d beta \u7248\u672c\uff08\u6d4b\u8bd5\u7248\uff09\uff0c\u4ec5\u4f7f\u7528\u6b63\u5f0f\u7248\u672c\u3002\n\n\u00a0\n4. \u516c\u5171\u6b65\u9aa4\n\u521b\u5efa RootAuthClient \u5b9e\u4f8b\n\u5728\u9879\u76ee\u7684\u5165\u53e3\u6587\u4ef6\uff08\u5982\u00a0main.js\uff09\u4e2d\u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b\uff0c\u5e76\u6839\u636e\u9700\u8981\u6ce8\u5165\u5230\u5168\u5c40\u5bf9\u8c61\u3002\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)\n\u5b8c\u6574\u914d\u7f6e\u9879\uff08RootAuthClientConfig\uff09\n interface RootAuthClientConfig {\n  app_id: string \/\/ \u5fc5\u586b\u9879\uff0c\u4ece\u5de5\u4f5c\u53f0\u5e94\u7528\u914d\u7f6e\u83b7\u53d6\n  mode?: 'api' | 'hosted'  \/\/ \u4f7f\u7528\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3ahosted\uff0c\u5373\u4f7f\u7528RootAuth\u9875\u9762\n  \/** hosted\u6a21\u5f0f\u4e0b\u8def\u7531\u57fa\u7840\u8def\u5f84\uff0c\u5982 '\/auth' \u5219\u8def\u7531\u4e3a \/auth\/login\u3001\/auth\/register \u7b49\uff1b\u4e0d\u4f20\u5219\u4ece\u7ad9\u70b9\u6839\u8def\u5f84 \/ \u5f00\u59cb *\/\n  base_path?: string\n  api_base_url?: string \/\/ \u8bf7\u6c42\u540e\u7aefapi\u63a5\u53e3\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3ahttps:\/\/rootauth-api.rootauth.com, \u5982\u5f00\u53d1\u73af\u5883\u9700\u8981\u4fee\u6539\u5230\u5f00\u53d1\u73af\u5883\u7684\u8def\u5f84https:\/\/rootauth-api.rootauth.dev\n  redirect_uri?: string \/\/ \u767b\u5f55\u6210\u529f\u540e\u8df3\u8f6c\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3a\u6839\u8def\u5f84location.origin\n  state?: string \/\/ \u81ea\u5b9a\u4e49\u53c2\u6570\uff0c\u539f\u6837\u5728\u63a5\u53e3\u8fd4\u56de\n  locale?: string \/\/ \u4f20\u5165\u5f53\u524d\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4e3azh-CN\uff0c\u5f53\u524d\u652f\u6301zh-CN\u3001en-US\n  scope?: string[]  \/\/ scope\u6620\u5c04\u5173\u7cfb\uff0c\u9ed8\u8ba4\u4e3a['openid']\n  grant_type?: string \/\/ \u6388\u6743\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3aauthorization_code\n  enable_google_one_tap?: boolean \/\/ \u662f\u5426\u5f00\u542fGoogle Onetap\u767b\u9646\uff0c\u9ed8\u8ba4\u4e3afalse\n  \/** hosted\u6a21\u5f0f\u767b\u5f55\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onLoginSuccess?: LoginSuccessCallback;\n  \/** hosted\u6a21\u5f0f\u6ce8\u518c\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onRegisterSuccess?: RegisterSuccessCallback;\n}\n\u00a0\n\u81f3\u6b64\uff0c\u516c\u5171\u90e8\u5206\u5df2\u5b8c\u6210\u3002\u63a5\u4e0b\u6765\u6839\u636e\u60a8\u9009\u62e9\u7684\u63a5\u5165\u6a21\u5f0f\u7ee7\u7eed\u914d\u7f6e\u3002\n\u00a0\n5. Hosted \u6a21\u5f0f\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n\u6b64\u6a21\u5f0f\u4e3a\u9ed8\u8ba4\u6a21\u5f0f\uff0c\u4f1a\u542f\u7528 RootAuth \u81ea\u5e26\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\u3002\n\u00a0\n5.1 \u8def\u7531\u8bf4\u660e\nHosted \u6a21\u5f0f\u4f1a\u5360\u7528\u4ee5\u4e0b\u4e09\u4e2a\u8def\u7531\uff0c\u8bf7\u907f\u514d\u5728\u60a8\u7684\u5e94\u7528\u8def\u7531\u4e2d\u91cd\u590d\u5b9a\u4e49\uff1a\n\n\n\/login\n\n\n\/register\n\n\n\/reset-password\n\n\n\u5982\u9700\u81ea\u5b9a\u4e49\u57fa\u7840\u8def\u5f84\uff0c\u53ef\u901a\u8fc7\u00a0base_path\u00a0\u914d\u7f6e\u9879\u7edf\u4e00\u6dfb\u52a0\u524d\u7f00\uff08\u4f8b\u5982\u8bbe\u4e3a\u00a0\/auth\u00a0\u540e\uff0c\u8def\u7531\u53d8\u4e3a\u00a0\/auth\/login\u00a0\u7b49\uff09\u3002\n\u00a0\n5.2 \u6302\u8f7d\u8def\u7531\n\u8c03\u7528\u5b9e\u4f8b\u7684\u00a0install \u65b9\u6cd5\uff0c\u4f20\u5165\u60a8\u7684 Vue Router \u5b9e\u4f8b\uff0cSDK \u4f1a\u81ea\u52a8\u5c06\u8ba4\u8bc1\u8def\u7531\u5408\u5e76\u5230\u60a8\u7684\u8def\u7531\u7cfb\u7edf\u4e2d\u3002\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)\n\n  client.install(router as Router)\n\u00a0\n5.3 \u52a8\u6001\u5207\u6362\u8bed\u8a00\n\u5982\u679c\u60a8\u5728\u7cfb\u7edf\u4e2d\u9700\u8981\u5207\u6362\u8bed\u8a00\uff0c\u53ef\u4ee5\u5c06\u00a0client \u5b9e\u4f8b\u6ce8\u5165\u5230\u5168\u5c40\uff0c\u7136\u540e\u8c03\u7528\uff1a\nclient?.setLocale('en-US')\n\u00a0\n5.4 Hosted \u6a21\u5f0f\u5b8c\u6574\u793a\u4f8b\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\nconst client = new RootAuthClient(options)\n\n  client.install(router as Router)\n\u00a0\n6. API \u6a21\u5f0f\uff08\u63a5\u53e3\u6a21\u5f0f\uff09\n\u6b64\u6a21\u5f0f\u4ec5\u63d0\u4f9b API \u8c03\u7528\uff0c\u4e0d\u5305\u542b\u4efb\u4f55 UI\u3002\u60a8\u9700\u8981\u81ea\u5df1\u5b9e\u73b0\u767b\u5f55\/\u6ce8\u518c\u7b49\u9875\u9762\uff0c\u5e76\u8c03\u7528 SDK \u63d0\u4f9b\u7684\u65b9\u6cd5\u5b8c\u6210\u8ba4\u8bc1\u3002\n\u00a0\n6.1 \u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b\n\uff08\u5fc5\u987b\u6307\u5b9a mode: 'api'\uff09\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)\n\u00a0\n6.2 \u6ce8\u5165\u5168\u5c40\u5b9e\u4f8b\n\uff08\u4ee5 Nuxt \u4e3a\u4f8b\uff09\n\u5176\u4ed6\u6846\u67b6\uff08\u5982 Vue\u3001React\uff09\u53ef\u53c2\u8003\u7c7b\u4f3c\u601d\u8def\uff0c\u5c06\u00a0client\u00a0\u6302\u8f7d\u5230\u5168\u5c40\u6216\u4f7f\u7528 Context\/Provider\u3002\n\u00a0\n6.2.1 \u521b\u5efa\u63d2\u4ef6\u6587\u4ef6\n\u00a0plugins\/rootauth.client.ts\n\/\/ plugins\/rootauth.client.ts\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\nexport default defineNuxtPlugin(() => {\n  const options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)\n\n  return {\n    provide: {\n      rootauth: client,\n    },\n  }\n})\n\u00a0\n6.2.2 \u6ce8\u518c\u63d2\u4ef6\u00a0\nnuxt.config.ts\n\/\/ nuxt.config.ts\nexport default defineNuxtConfig({\n  plugins: [\n    '@\/plugins\/rootauth.client.ts',\n  ]\n})\n\u00a0\n6.2.3 \u5728\u7ec4\u4ef6\u4e2d\u83b7\u53d6\u5b9e\u4f8b\nconst { $rootauth } = useNuxtApp()\n$rootauth?.xxx()\n\u00a0\n6.2.4 \u5c01\u88c5 Composable\uff08\u53ef\u9009\uff0c\u63a8\u8350\uff09\n\u521b\u5efa\u00a0composables\/useRootAuth.ts\uff1a\n\/\/ composables\/useRootAuth.ts\nimport type { RootAuthClient } from 'rootauth-js'\n\n\/** RootAuth \u5ba2\u6237\u7aef\uff08\u7531 `plugins\/rootauth.client` \u5728\u914d\u7f6e\u4e86 `ROOTAUTH_APP_ID` \u65f6\u6ce8\u5165\uff09 *\/\nexport function useRootAuth(): RootAuthClient | undefined {\n  return useNuxtApp().$rootauth as RootAuthClient | undefined\n}\n\n\u6b64\u65f6rootauth\u5bf9\u8c61\u7684\u4f7f\u7528\u65b9\u5f0f\u66f4\u7b80\u6d01\nconst rootauth = useRootAuth()\nrootauth?.xxx()\n\u00a0\n6.3 API \u65b9\u6cd5\u8bf4\u660e\n\u767b\u5f55\u3001\u6ce8\u518c\u3001\u53d1\u9001\u9a8c\u8bc1\u7801\u548c\u91cd\u7f6e\u5bc6\u7801\u5747\u8fd4\u56de Promise\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4f20\u5165\u81ea\u5b9a\u4e49\u56de\u8c03\uff08onSuccess\/onFailure\uff09\u6765\u8986\u76d6 SDK \u9ed8\u8ba4\u884c\u4e3a\u3002\n\u82e5\u53ea\u9700\u8865\u5145\u989d\u5916\u903b\u8f91\uff08\u5982\u5173\u95ed loading\uff09\uff0c\u8bf7\u76f4\u63a5\u4f7f\u7528 Promise\uff08.then().catch()\uff09\uff0c\u4e0d\u8981\u4f20\u5165\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0cSDK \u4f1a\u4fdd\u7559\u9ed8\u8ba4\u884c\u4e3a\u3002\n6.3.1 \u767b\u5f55\nconst rootauth = useRootAuth()\n\ninterface LoginParams {\n  type: string \/\/ \u5fc5\u586b\u9879\uff0c\u767b\u9646\u65b9\u5f0f\uff1aEMAIL_PASS|EMAIL_CODE\uff0c\u73b0\u5728\u652f\u6301\u8d26\u53f7\u5bc6\u7801\u767b\u9646EMAIL_PASS\u548c\u90ae\u7bb1\u9a8c\u8bc1\u7801\u767b\u9646EMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  password?: string \/\/ \u5f53type\u4e3aEMAIL_PASS\u5fc5\u586b\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code?: string \/\/ \u5f53type\u4e3aEMAIL_CODE\u5fc5\u586b\n}\ninterface RootAuthFlowCallbacks {\n  onSuccess?: (data: T) => void\n  onFailure?: (error: unknown) => void\n}\n\n\/\/\u53ef\u4f7f\u7528\u7684\u7c7b\u578b\nrootauth?.login(\n  params: LoginParams,\n  callbacks?: RootAuthFlowCallbacks<\n    AxiosResponse>\n  >,\n)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.log('err', err)\n})\n.finally(() => {\n  \/\/ \u5173\u95edloading\u7b49\n})\n\u5e26\u81ea\u5b9a\u4e49\u56de\u8c03\u793a\u4f8b\uff1a\nconst handleSubmit=()=>{\n  \/\/ \u7528\u6237\u81ea\u884c\u5904\u7406\u524d\u7f6e\u6821\u9a8c\n  loading.value = true\n  rootauth?.login({\n    type:'EMAIL_PASS',\n    email:'123456@qq.com',\n    password:'123456'\n  },\n  {\n    onSuccess:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u6210\u529f\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    },\n    onFailure:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u5931\u8d25\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    }\n  })\n  .finally(() => {\n    loading.value = false\n  })\n}\n\u00a0\n6.3.2 \u6ce8\u518c\ninterface RegisterParams {\n  type?: string \/\/ \u7528\u6237\u6ce8\u518c\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801\u6ce8\u518cEMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  code: string \/\/ \u5fc5\u586b\u9879\uff0c\u90ae\u7bb1\u6fc0\u6d3b\u7801\n  password: string \/\/ \u5fc5\u586b\u9879\uff0c\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n}\n\nconst params: RegisterParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  code: '123456',\n}\n  \nrootauth?.register(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.3 \u53d1\u9001\u9a8c\u8bc1\u7801\ninterface SendCodeParams {\n  type?: string \/\/ \u53d1\u9001\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  email_template_type: string \/\/ \u5fc5\u586b\u9879\uff0c\u9009\u62e9\u7684\u6a21\u677f\u7c7b\u578b\uff1aregister_code|login_code|reset_pass_code\uff0cregister_code\uff1a\u6ce8\u518c\u9a8c\u8bc1\u7801\uff0clogin_code\uff1a\u767b\u5f55\u9a8c\u8bc1\u7801\uff0creset_pass_code\uff1a\u91cd\u7f6e\u9a8c\u8bc1\u7801\n}\n\nconst params: SendCodeParams = {\n  email: '123456@qq.com',\n  email_template_type: 'register_code'\n}\n  \nrootauth?.sendCode(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.4 \u91cd\u7f6e\u5bc6\u7801\ninterface ResetPasswordUParams {\n  type?: string \/\/ \u53d1\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL_CODE\n  email: string\n  password: string \/\/ \u65b0\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  password_confirmation: string \/\/ \u786e\u8ba4\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code: string\n}\n\nconst params: ResetPasswordUParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  password_confirmation: '123456',\n  code: '111111'\n}\n  \nrootauth?.resetPassword(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.5 \u7b2c\u4e09\u65b9\u767b\u5f55\uff08Google OAuth\uff09\ninterface ThirdPartyLoginParams {\n  auth_by: string \/\/ \u7b2c\u4e09\u65b9\u7c7b\u578b\uff1agoogle_oauth\uff0cgoogle_oauth\uff1a\u8c37\u6b4c\u767b\u9646\n}\n\nconst params: ThirdPartyLoginParams = {\n  auth_by: 'google_oauth'\n}\n  \nrootauth?.thirdPartyLogin(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.6 Google One Tap \u767b\u5f55\n\u9700\u5148\u5728\u914d\u7f6e\u4e2d\u5f00\u542f enable_google_one_tap: true\nrootauth?.googleOneTapLogin()\n\u00a0\n\n\u00a0","is_draft":"0","editor_type":"3","file_path":"","add_time":"1776225145","update_time":"1776241150"},"pure_content":"RootAuth \u63d0\u4f9b JavaScript SDK\uff0c\u5e2e\u52a9\u60a8\u5728 Web \u5e94\u7528\u4e2d\u5feb\u901f\u96c6\u6210\u767b\u5f55\u3001\u6ce8\u518c\u3001\u6388\u6743\u7b49\u8eab\u4efd\u8ba4\u8bc1\u529f\u80fd\u3002SDK \u652f\u6301\u4e24\u79cd\u63a5\u5165\u6a21\u5f0f\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u9700\u6c42\u7075\u6d3b\u9009\u62e9\u3002\n\u00a0\n1.\u63a5\u5165\u6a21\u5f0f\u6982\u89c8\n\n\n\n\n \u6a21\u5f0f\n \u8bf4\u660e\n \u9002\u7528\u573a\u666f\n\n\n\n\n Hosted\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n \u4f7f\u7528 RootAuth \u63d0\u4f9b\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\uff08\u542b UI \u548c\u63a5\u53e3\uff09\n \u5e0c\u671b\u5feb\u901f\u4e0a\u7ebf\uff0c\u5bf9\u8ba4\u8bc1\u9875\u9762\u6837\u5f0f\u6709\u57fa\u672c\u8981\u6c42\n\n\n A"}],"content":{"icon":"\/docker_production\/65tz6z\/content_icon\/971juSUK?rand=1205925304","desc":"","content_id":"767435","add_time":"1776224858","update_time":"1776241207","content":"","is_traffic_less":"0","file_type":""},"hot_list":[{"id":"767440","string_id":"Kal0AxYI","slug":"javascript-sdk","name":"JavaScript SDK","type":"2","status":"1","order":"0","cover":"","cover_alt":"","articleOnline":{"content_id":"767440","content":"RootAuth \u63d0\u4f9b JavaScript SDK\uff0c\u5e2e\u52a9\u60a8\u5728 Web \u5e94\u7528\u4e2d\u5feb\u901f\u96c6\u6210\u767b\u5f55\u3001\u6ce8\u518c\u3001\u6388\u6743\u7b49\u8eab\u4efd\u8ba4\u8bc1\u529f\u80fd\u3002SDK \u652f\u6301\u4e24\u79cd\u63a5\u5165\u6a21\u5f0f\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u9700\u6c42\u7075\u6d3b\u9009\u62e9\u3002<\/p>\n
 <\/p>\n
1.\u63a5\u5165\u6a21\u5f0f\u6982\u89c8<\/h2>\n\n\n\n\n\n\n\n\u6a21\u5f0f<\/th>\n \u8bf4\u660e<\/th>\n \u9002\u7528\u573a\u666f<\/th>\n<\/tr>\n<\/thead>\n
Hosted\uff08\u6258\u7ba1\u6a21\u5f0f\uff09<\/strong><\/td>\n \u4f7f\u7528 RootAuth \u63d0\u4f9b\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\uff08\u542b UI \u548c\u63a5\u53e3\uff09<\/td>\n \u5e0c\u671b\u5feb\u901f\u4e0a\u7ebf\uff0c\u5bf9\u8ba4\u8bc1\u9875\u9762\u6837\u5f0f\u6709\u57fa\u672c\u8981\u6c42<\/td>\n<\/tr>\n
API\uff08\u63a5\u53e3\u6a21\u5f0f\uff09<\/strong><\/td>\n \u4ec5\u8c03\u7528 RootAuth \u7684 API \u63a5\u53e3\uff0c\u5b8c\u5168\u81ea\u5b9a\u4e49 UI<\/td>\n \u9700\u8981\u4e0e\u4ea7\u54c1\u539f\u6709\u8bbe\u8ba1\u98ce\u683c\u4fdd\u6301\u4e00\u81f4\uff0c\u6216\u6df1\u5ea6\u5b9a\u5236\u8ba4\u8bc1\u6d41\u7a0b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\u4e24\u79cd\u6a21\u5f0f\u7684\u5171\u540c\u70b9<\/strong>\uff1a<\/p>\n
\n\n\u90fd\u9700\u8981\u5728\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\uff0c\u83b7\u53d6 app_id<\/code><\/p>\n<\/li>\n
\n\u90fd\u9700\u8981\u521b\u5efa RootAuthClient<\/code> \u5b9e\u4f8b<\/p>\n<\/li>\n<\/ul>\n
 <\/p>\n
2. \u51c6\u5907\u5de5\u4f5c<\/h2>\n\u521b\u5efa\u5e94\u7528\u5e76\u83b7\u53d6 app_id<\/strong><\/p>\n
\n\n\u767b\u5f55 RootAuth \u5de5\u4f5c\u53f0<\/p>\n<\/li>\n
\n\u521b\u5efa\u6216\u9009\u62e9\u60a8\u7684\u5e94\u7528<\/p>\n<\/li>\n
\n\u5728\u5e94\u7528\u914d\u7f6e\u9875\u9762\u590d\u5236 APP ID\uff08\u683c\u5f0f\u5982 app_******<\/code>\uff09<\/p>\n<\/li>\n<\/ol>\n
<\/p>\n
3. \u5b89\u88c5 SDK<\/h2>\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5b89\u88c5\u6b63\u5f0f\u7248\u672c\uff1a<\/p>\n
npm install --save rootauth-js<\/code><\/pre>\n\n\u6ce8\u610f<\/strong>\uff1a\u8bf7\u52ff\u4e0b\u8f7d beta \u7248\u672c\uff08\u6d4b\u8bd5\u7248\uff09\uff0c\u4ec5\u4f7f\u7528\u6b63\u5f0f\u7248\u672c\u3002<\/p>\n<\/blockquote>\n
 <\/p>\n
4. \u516c\u5171\u6b65\u9aa4<\/h2>\n\u521b\u5efa RootAuthClient \u5b9e\u4f8b<\/strong><\/p>\n
\u5728\u9879\u76ee\u7684\u5165\u53e3\u6587\u4ef6\uff08\u5982 main.js<\/code>\uff09\u4e2d\u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b\uff0c\u5e76\u6839\u636e\u9700\u8981\u6ce8\u5165\u5230\u5168\u5c40\u5bf9\u8c61\u3002<\/p>\n
\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)<\/code><\/pre>\n\u5b8c\u6574\u914d\u7f6e\u9879\uff08RootAuthClientConfig\uff09<\/strong><\/p>\n
 interface RootAuthClientConfig {\n  app_id: string \/\/ \u5fc5\u586b\u9879\uff0c\u4ece\u5de5\u4f5c\u53f0\u5e94\u7528\u914d\u7f6e\u83b7\u53d6\n  mode?: 'api' | 'hosted'  \/\/ \u4f7f\u7528\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3ahosted\uff0c\u5373\u4f7f\u7528RootAuth\u9875\u9762\n  \/** hosted\u6a21\u5f0f\u4e0b\u8def\u7531\u57fa\u7840\u8def\u5f84\uff0c\u5982 '\/auth' \u5219\u8def\u7531\u4e3a \/auth\/login\u3001\/auth\/register \u7b49\uff1b\u4e0d\u4f20\u5219\u4ece\u7ad9\u70b9\u6839\u8def\u5f84 \/ \u5f00\u59cb *\/\n  base_path?: string\n  api_base_url?: string \/\/ \u8bf7\u6c42\u540e\u7aefapi\u63a5\u53e3\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3ahttps:\/\/rootauth-api.rootauth.com, \u5982\u5f00\u53d1\u73af\u5883\u9700\u8981\u4fee\u6539\u5230\u5f00\u53d1\u73af\u5883\u7684\u8def\u5f84https:\/\/rootauth-api.rootauth.dev\n  redirect_uri?: string \/\/ \u767b\u5f55\u6210\u529f\u540e\u8df3\u8f6c\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3a\u6839\u8def\u5f84location.origin\n  state?: string \/\/ \u81ea\u5b9a\u4e49\u53c2\u6570\uff0c\u539f\u6837\u5728\u63a5\u53e3\u8fd4\u56de\n  locale?: string \/\/ \u4f20\u5165\u5f53\u524d\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4e3azh-CN\uff0c\u5f53\u524d\u652f\u6301zh-CN\u3001en-US\n  scope?: string[]  \/\/ scope\u6620\u5c04\u5173\u7cfb\uff0c\u9ed8\u8ba4\u4e3a['openid']\n  grant_type?: string \/\/ \u6388\u6743\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3aauthorization_code\n  enable_google_one_tap?: boolean \/\/ \u662f\u5426\u5f00\u542fGoogle Onetap\u767b\u9646\uff0c\u9ed8\u8ba4\u4e3afalse\n  \/** hosted\u6a21\u5f0f\u767b\u5f55\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onLoginSuccess?: LoginSuccessCallback;\n  \/** hosted\u6a21\u5f0f\u6ce8\u518c\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onRegisterSuccess?: RegisterSuccessCallback;\n}<\/code><\/pre>\n <\/p>\n
\u81f3\u6b64\uff0c\u516c\u5171\u90e8\u5206\u5df2\u5b8c\u6210\u3002\u63a5\u4e0b\u6765\u6839\u636e\u60a8\u9009\u62e9\u7684\u63a5\u5165\u6a21\u5f0f\u7ee7\u7eed\u914d\u7f6e\u3002<\/strong><\/p>\n
 <\/p>\n
5. Hosted \u6a21\u5f0f\uff08\u6258\u7ba1\u6a21\u5f0f\uff09<\/h2>\n\u6b64\u6a21\u5f0f\u4e3a\u9ed8\u8ba4\u6a21\u5f0f<\/strong>\uff0c\u4f1a\u542f\u7528 RootAuth \u81ea\u5e26\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\u3002<\/p>\n
 <\/h3>\n5.1 \u8def\u7531\u8bf4\u660e<\/h3>\nHosted \u6a21\u5f0f\u4f1a\u5360\u7528\u4ee5\u4e0b\u4e09\u4e2a\u8def\u7531\uff0c\u8bf7\u907f\u514d\u5728\u60a8\u7684\u5e94\u7528\u8def\u7531\u4e2d\u91cd\u590d\u5b9a\u4e49\uff1a<\/p>\n
\n\n\/login<\/code><\/p>\n<\/li>\n
\n\/register<\/code><\/p>\n<\/li>\n
\n\/reset-password<\/code><\/p>\n<\/li>\n<\/ul>\n
\u5982\u9700\u81ea\u5b9a\u4e49\u57fa\u7840\u8def\u5f84\uff0c\u53ef\u901a\u8fc7 base_path<\/code> \u914d\u7f6e\u9879\u7edf\u4e00\u6dfb\u52a0\u524d\u7f00\uff08\u4f8b\u5982\u8bbe\u4e3a \/auth<\/code> \u540e\uff0c\u8def\u7531\u53d8\u4e3a \/auth\/login<\/code> \u7b49\uff09\u3002<\/p>\n
 <\/h3>\n5.2 \u6302\u8f7d\u8def\u7531<\/h3>\n\u8c03\u7528\u5b9e\u4f8b\u7684 install<\/code> \u65b9\u6cd5\uff0c\u4f20\u5165\u60a8\u7684 Vue Router \u5b9e\u4f8b\uff0cSDK \u4f1a\u81ea\u52a8\u5c06\u8ba4\u8bc1\u8def\u7531\u5408\u5e76\u5230\u60a8\u7684\u8def\u7531\u7cfb\u7edf\u4e2d\u3002<\/p>\n
\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)\n\n  client.install(router as Router)<\/code><\/pre>\n <\/h3>\n
5.3 \u52a8\u6001\u5207\u6362\u8bed\u8a00<\/h3>\n\u5982\u679c\u60a8\u5728\u7cfb\u7edf\u4e2d\u9700\u8981\u5207\u6362\u8bed\u8a00\uff0c\u53ef\u4ee5\u5c06 client<\/code> \u5b9e\u4f8b\u6ce8\u5165\u5230\u5168\u5c40\uff0c\u7136\u540e\u8c03\u7528\uff1a<\/p>\n
client?.setLocale('en-US')<\/code><\/pre>\n <\/p>\n
5.4 Hosted \u6a21\u5f0f\u5b8c\u6574\u793a\u4f8b<\/h3>\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\nconst client = new RootAuthClient(options)\n\n  client.install(router as Router)<\/code><\/pre>\n <\/p>\n
6. API \u6a21\u5f0f\uff08\u63a5\u53e3\u6a21\u5f0f\uff09<\/h2>\n\u6b64\u6a21\u5f0f\u4ec5\u63d0\u4f9b API \u8c03\u7528\uff0c\u4e0d\u5305\u542b\u4efb\u4f55 UI\u3002\u60a8\u9700\u8981\u81ea\u5df1\u5b9e\u73b0\u767b\u5f55\/\u6ce8\u518c\u7b49\u9875\u9762\uff0c\u5e76\u8c03\u7528 SDK \u63d0\u4f9b\u7684\u65b9\u6cd5\u5b8c\u6210\u8ba4\u8bc1\u3002<\/p>\n
 <\/h3>\n
6.1 \u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b<\/h3>\n\uff08\u5fc5\u987b\u6307\u5b9a mode: 'api'\uff09<\/strong><\/p>\n
import { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)<\/code><\/pre>\n <\/p>\n
6.2 \u6ce8\u5165\u5168\u5c40\u5b9e\u4f8b<\/h3>\n\uff08\u4ee5 Nuxt \u4e3a\u4f8b\uff09<\/strong><\/p>\n
\u5176\u4ed6\u6846\u67b6\uff08\u5982 Vue\u3001React\uff09\u53ef\u53c2\u8003\u7c7b\u4f3c\u601d\u8def\uff0c\u5c06 client<\/code> \u6302\u8f7d\u5230\u5168\u5c40\u6216\u4f7f\u7528 Context\/Provider\u3002<\/p>\n
 <\/h4>\n6.2.1 \u521b\u5efa\u63d2\u4ef6\u6587\u4ef6<\/h4>\n plugins\/rootauth.client.ts<\/code><\/strong><\/p>\n
\/\/ plugins\/rootauth.client.ts\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\nexport default defineNuxtPlugin(() => {\n  const options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)\n\n  return {\n    provide: {\n      rootauth: client,\n    },\n  }\n})<\/code><\/pre>\n <\/p>\n
6.2.2 \u6ce8\u518c\u63d2\u4ef6 <\/h4>\nnuxt.config.ts<\/code><\/strong><\/p>\n
\/\/ nuxt.config.ts\nexport default defineNuxtConfig({\n  plugins: [\n    '@\/plugins\/rootauth.client.ts',\n  ]\n})<\/code><\/pre>\n <\/h4>\n
6.2.3 \u5728\u7ec4\u4ef6\u4e2d\u83b7\u53d6\u5b9e\u4f8b<\/h4>\nconst { $rootauth } = useNuxtApp()\n$rootauth?.xxx()<\/code><\/pre>\n <\/h4>\n
6.2.4 \u5c01\u88c5 Composable\uff08\u53ef\u9009\uff0c\u63a8\u8350\uff09<\/h4>\n\u521b\u5efa composables\/useRootAuth.ts<\/code>\uff1a<\/p>\n
\/\/ composables\/useRootAuth.ts\nimport type { RootAuthClient } from 'rootauth-js'\n\n\/** RootAuth \u5ba2\u6237\u7aef\uff08\u7531 `plugins\/rootauth.client` \u5728\u914d\u7f6e\u4e86 `ROOTAUTH_APP_ID` \u65f6\u6ce8\u5165\uff09 *\/\nexport function useRootAuth(): RootAuthClient | undefined {\n  return useNuxtApp().$rootauth as RootAuthClient | undefined\n}<\/code><\/pre>\n\n\u6b64\u65f6rootauth\u5bf9\u8c61\u7684\u4f7f\u7528\u65b9\u5f0f\u66f4\u7b80\u6d01<\/span><\/p>\n
const rootauth = useRootAuth()\nrootauth?.xxx()<\/code><\/pre>\n <\/p>\n
6.3 API \u65b9\u6cd5\u8bf4\u660e<\/h3>\n\u767b\u5f55\u3001\u6ce8\u518c\u3001\u53d1\u9001\u9a8c\u8bc1\u7801\u548c\u91cd\u7f6e\u5bc6\u7801<\/strong>\u5747\u8fd4\u56de Promise<\/code>\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4f20\u5165\u81ea\u5b9a\u4e49\u56de\u8c03\uff08onSuccess<\/code>\/onFailure<\/code>\uff09\u6765\u8986\u76d6 SDK \u9ed8\u8ba4\u884c\u4e3a\u3002<\/p>\n
\u82e5\u53ea\u9700\u8865\u5145\u989d\u5916\u903b\u8f91\uff08\u5982\u5173\u95ed loading\uff09\uff0c\u8bf7\u76f4\u63a5\u4f7f\u7528 Promise\uff08.then()<\/code>.catch()<\/code>\uff09\uff0c\u4e0d\u8981\u4f20\u5165\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0cSDK \u4f1a\u4fdd\u7559\u9ed8\u8ba4\u884c\u4e3a\u3002<\/p>\n
6.3.1 \u767b\u5f55<\/h4>\nconst rootauth = useRootAuth()\n\ninterface LoginParams {\n  type: string \/\/ \u5fc5\u586b\u9879\uff0c\u767b\u9646\u65b9\u5f0f\uff1aEMAIL_PASS|EMAIL_CODE\uff0c\u73b0\u5728\u652f\u6301\u8d26\u53f7\u5bc6\u7801\u767b\u9646EMAIL_PASS\u548c\u90ae\u7bb1\u9a8c\u8bc1\u7801\u767b\u9646EMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  password?: string \/\/ \u5f53type\u4e3aEMAIL_PASS\u5fc5\u586b\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code?: string \/\/ \u5f53type\u4e3aEMAIL_CODE\u5fc5\u586b\n}\ninterface RootAuthFlowCallbacks<T = unknown> {\n  onSuccess?: (data: T) => void\n  onFailure?: (error: unknown) => void\n}\n\n\/\/\u53ef\u4f7f\u7528\u7684\u7c7b\u578b\nrootauth?.login(\n  params: LoginParams,\n  callbacks?: RootAuthFlowCallbacks<\n    AxiosResponse<ApiResponse<{ redirect_url: string }>>\n  >,\n)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.log('err', err)\n})\n.finally(() => {\n  \/\/ \u5173\u95edloading\u7b49\n})<\/code><\/pre>\n\u5e26\u81ea\u5b9a\u4e49\u56de\u8c03\u793a\u4f8b\uff1a<\/strong><\/p>\n
const handleSubmit=()=>{\n  \/\/ \u7528\u6237\u81ea\u884c\u5904\u7406\u524d\u7f6e\u6821\u9a8c\n  loading.value = true\n  rootauth?.login({\n    type:'EMAIL_PASS',\n    email:'123456@qq.com',\n    password:'123456'\n  },\n  {\n    onSuccess:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u6210\u529f\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    },\n    onFailure:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u5931\u8d25\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    }\n  })\n  .finally(() => {\n    loading.value = false\n  })\n}<\/code><\/pre>\n <\/p>\n
6.3.2 \u6ce8\u518c<\/h4>\ninterface RegisterParams {\n  type?: string \/\/ \u7528\u6237\u6ce8\u518c\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801\u6ce8\u518cEMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  code: string \/\/ \u5fc5\u586b\u9879\uff0c\u90ae\u7bb1\u6fc0\u6d3b\u7801\n  password: string \/\/ \u5fc5\u586b\u9879\uff0c\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n}\n\nconst params: RegisterParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  code: '123456',\n}\n  \nrootauth?.register(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.3 \u53d1\u9001\u9a8c\u8bc1\u7801<\/h4>\ninterface SendCodeParams {\n  type?: string \/\/ \u53d1\u9001\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  email_template_type: string \/\/ \u5fc5\u586b\u9879\uff0c\u9009\u62e9\u7684\u6a21\u677f\u7c7b\u578b\uff1aregister_code|login_code|reset_pass_code\uff0cregister_code\uff1a\u6ce8\u518c\u9a8c\u8bc1\u7801\uff0clogin_code\uff1a\u767b\u5f55\u9a8c\u8bc1\u7801\uff0creset_pass_code\uff1a\u91cd\u7f6e\u9a8c\u8bc1\u7801\n}\n\nconst params: SendCodeParams = {\n  email: '123456@qq.com',\n  email_template_type: 'register_code'\n}\n  \nrootauth?.sendCode(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.4 \u91cd\u7f6e\u5bc6\u7801<\/h4>\ninterface ResetPasswordUParams {\n  type?: string \/\/ \u53d1\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL_CODE\n  email: string\n  password: string \/\/ \u65b0\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  password_confirmation: string \/\/ \u786e\u8ba4\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code: string\n}\n\nconst params: ResetPasswordUParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  password_confirmation: '123456',\n  code: '111111'\n}\n  \nrootauth?.resetPassword(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.5 \u7b2c\u4e09\u65b9\u767b\u5f55\uff08Google OAuth\uff09<\/h4>\ninterface ThirdPartyLoginParams {\n  auth_by: string \/\/ \u7b2c\u4e09\u65b9\u7c7b\u578b\uff1agoogle_oauth\uff0cgoogle_oauth\uff1a\u8c37\u6b4c\u767b\u9646\n}\n\nconst params: ThirdPartyLoginParams = {\n  auth_by: 'google_oauth'\n}\n  \nrootauth?.thirdPartyLogin(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})<\/code><\/pre>\n <\/p>\n
6.3.6 Google One Tap \u767b\u5f55<\/h4>\n\u9700\u5148\u5728\u914d\u7f6e\u4e2d\u5f00\u542f enable_google_one_tap: true<\/p>\n
rootauth?.googleOneTapLogin()<\/code><\/pre>\n <\/p>\n<\/article>\n
 <\/h4>","pure_content":"RootAuth \u63d0\u4f9b JavaScript SDK\uff0c\u5e2e\u52a9\u60a8\u5728 Web \u5e94\u7528\u4e2d\u5feb\u901f\u96c6\u6210\u767b\u5f55\u3001\u6ce8\u518c\u3001\u6388\u6743\u7b49\u8eab\u4efd\u8ba4\u8bc1\u529f\u80fd\u3002SDK \u652f\u6301\u4e24\u79cd\u63a5\u5165\u6a21\u5f0f\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u9700\u6c42\u7075\u6d3b\u9009\u62e9\u3002\n\u00a0\n1.\u63a5\u5165\u6a21\u5f0f\u6982\u89c8\n\n\n\n\n \u6a21\u5f0f\n \u8bf4\u660e\n \u9002\u7528\u573a\u666f\n\n\n\n\n Hosted\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n \u4f7f\u7528 RootAuth \u63d0\u4f9b\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\uff08\u542b UI \u548c\u63a5\u53e3\uff09\n \u5e0c\u671b\u5feb\u901f\u4e0a\u7ebf\uff0c\u5bf9\u8ba4\u8bc1\u9875\u9762\u6837\u5f0f\u6709\u57fa\u672c\u8981\u6c42\n\n\n API\uff08\u63a5\u53e3\u6a21\u5f0f\uff09\n \u4ec5\u8c03\u7528 RootAuth \u7684 API \u63a5\u53e3\uff0c\u5b8c\u5168\u81ea\u5b9a\u4e49 UI\n \u9700\u8981\u4e0e\u4ea7\u54c1\u539f\u6709\u8bbe\u8ba1\u98ce\u683c\u4fdd\u6301\u4e00\u81f4\uff0c\u6216\u6df1\u5ea6\u5b9a\u5236\u8ba4\u8bc1\u6d41\u7a0b\n\n\n\n\n\u4e24\u79cd\u6a21\u5f0f\u7684\u5171\u540c\u70b9\uff1a\n\n\n\u90fd\u9700\u8981\u5728\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\uff0c\u83b7\u53d6\u00a0app_id\n\n\n\u90fd\u9700\u8981\u521b\u5efa\u00a0RootAuthClient \u5b9e\u4f8b\n\n\n\u00a0\n2. \u51c6\u5907\u5de5\u4f5c\n\u521b\u5efa\u5e94\u7528\u5e76\u83b7\u53d6 app_id\n\n\n\u767b\u5f55 RootAuth \u5de5\u4f5c\u53f0\n\n\n\u521b\u5efa\u6216\u9009\u62e9\u60a8\u7684\u5e94\u7528\n\n\n\u5728\u5e94\u7528\u914d\u7f6e\u9875\u9762\u590d\u5236 APP ID\uff08\u683c\u5f0f\u5982 app_******\uff09\n\n\n\n3. \u5b89\u88c5 SDK\n\u5728\u9879\u76ee\u6839\u76ee\u5f55\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5b89\u88c5\u6b63\u5f0f\u7248\u672c\uff1a\nnpm install --save rootauth-js\n\n\u6ce8\u610f\uff1a\u8bf7\u52ff\u4e0b\u8f7d beta \u7248\u672c\uff08\u6d4b\u8bd5\u7248\uff09\uff0c\u4ec5\u4f7f\u7528\u6b63\u5f0f\u7248\u672c\u3002\n\n\u00a0\n4. \u516c\u5171\u6b65\u9aa4\n\u521b\u5efa RootAuthClient \u5b9e\u4f8b\n\u5728\u9879\u76ee\u7684\u5165\u53e3\u6587\u4ef6\uff08\u5982\u00a0main.js\uff09\u4e2d\u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b\uff0c\u5e76\u6839\u636e\u9700\u8981\u6ce8\u5165\u5230\u5168\u5c40\u5bf9\u8c61\u3002\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)\n\u5b8c\u6574\u914d\u7f6e\u9879\uff08RootAuthClientConfig\uff09\n interface RootAuthClientConfig {\n  app_id: string \/\/ \u5fc5\u586b\u9879\uff0c\u4ece\u5de5\u4f5c\u53f0\u5e94\u7528\u914d\u7f6e\u83b7\u53d6\n  mode?: 'api' | 'hosted'  \/\/ \u4f7f\u7528\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3ahosted\uff0c\u5373\u4f7f\u7528RootAuth\u9875\u9762\n  \/** hosted\u6a21\u5f0f\u4e0b\u8def\u7531\u57fa\u7840\u8def\u5f84\uff0c\u5982 '\/auth' \u5219\u8def\u7531\u4e3a \/auth\/login\u3001\/auth\/register \u7b49\uff1b\u4e0d\u4f20\u5219\u4ece\u7ad9\u70b9\u6839\u8def\u5f84 \/ \u5f00\u59cb *\/\n  base_path?: string\n  api_base_url?: string \/\/ \u8bf7\u6c42\u540e\u7aefapi\u63a5\u53e3\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3ahttps:\/\/rootauth-api.rootauth.com, \u5982\u5f00\u53d1\u73af\u5883\u9700\u8981\u4fee\u6539\u5230\u5f00\u53d1\u73af\u5883\u7684\u8def\u5f84https:\/\/rootauth-api.rootauth.dev\n  redirect_uri?: string \/\/ \u767b\u5f55\u6210\u529f\u540e\u8df3\u8f6c\u7684\u8def\u5f84\uff0c\u9ed8\u8ba4\u4e3a\u6839\u8def\u5f84location.origin\n  state?: string \/\/ \u81ea\u5b9a\u4e49\u53c2\u6570\uff0c\u539f\u6837\u5728\u63a5\u53e3\u8fd4\u56de\n  locale?: string \/\/ \u4f20\u5165\u5f53\u524d\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4e3azh-CN\uff0c\u5f53\u524d\u652f\u6301zh-CN\u3001en-US\n  scope?: string[]  \/\/ scope\u6620\u5c04\u5173\u7cfb\uff0c\u9ed8\u8ba4\u4e3a['openid']\n  grant_type?: string \/\/ \u6388\u6743\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3aauthorization_code\n  enable_google_one_tap?: boolean \/\/ \u662f\u5426\u5f00\u542fGoogle Onetap\u767b\u9646\uff0c\u9ed8\u8ba4\u4e3afalse\n  \/** hosted\u6a21\u5f0f\u767b\u5f55\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onLoginSuccess?: LoginSuccessCallback;\n  \/** hosted\u6a21\u5f0f\u6ce8\u518c\u6210\u529f\u56de\u8c03\uff1b\u8fd4\u56de false \u65f6\u4e0d\u6267\u884c\u9ed8\u8ba4\u8df3\u8f6c *\/\n  onRegisterSuccess?: RegisterSuccessCallback;\n}\n\u00a0\n\u81f3\u6b64\uff0c\u516c\u5171\u90e8\u5206\u5df2\u5b8c\u6210\u3002\u63a5\u4e0b\u6765\u6839\u636e\u60a8\u9009\u62e9\u7684\u63a5\u5165\u6a21\u5f0f\u7ee7\u7eed\u914d\u7f6e\u3002\n\u00a0\n5. Hosted \u6a21\u5f0f\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n\u6b64\u6a21\u5f0f\u4e3a\u9ed8\u8ba4\u6a21\u5f0f\uff0c\u4f1a\u542f\u7528 RootAuth \u81ea\u5e26\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\u3002\n\u00a0\n5.1 \u8def\u7531\u8bf4\u660e\nHosted \u6a21\u5f0f\u4f1a\u5360\u7528\u4ee5\u4e0b\u4e09\u4e2a\u8def\u7531\uff0c\u8bf7\u907f\u514d\u5728\u60a8\u7684\u5e94\u7528\u8def\u7531\u4e2d\u91cd\u590d\u5b9a\u4e49\uff1a\n\n\n\/login\n\n\n\/register\n\n\n\/reset-password\n\n\n\u5982\u9700\u81ea\u5b9a\u4e49\u57fa\u7840\u8def\u5f84\uff0c\u53ef\u901a\u8fc7\u00a0base_path\u00a0\u914d\u7f6e\u9879\u7edf\u4e00\u6dfb\u52a0\u524d\u7f00\uff08\u4f8b\u5982\u8bbe\u4e3a\u00a0\/auth\u00a0\u540e\uff0c\u8def\u7531\u53d8\u4e3a\u00a0\/auth\/login\u00a0\u7b49\uff09\u3002\n\u00a0\n5.2 \u6302\u8f7d\u8def\u7531\n\u8c03\u7528\u5b9e\u4f8b\u7684\u00a0install \u65b9\u6cd5\uff0c\u4f20\u5165\u60a8\u7684 Vue Router \u5b9e\u4f8b\uff0cSDK \u4f1a\u81ea\u52a8\u5c06\u8ba4\u8bc1\u8def\u7531\u5408\u5e76\u5230\u60a8\u7684\u8def\u7531\u7cfb\u7edf\u4e2d\u3002\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\n  const client = new RootAuthClient(options)\n\n  client.install(router as Router)\n\u00a0\n5.3 \u52a8\u6001\u5207\u6362\u8bed\u8a00\n\u5982\u679c\u60a8\u5728\u7cfb\u7edf\u4e2d\u9700\u8981\u5207\u6362\u8bed\u8a00\uff0c\u53ef\u4ee5\u5c06\u00a0client \u5b9e\u4f8b\u6ce8\u5165\u5230\u5168\u5c40\uff0c\u7136\u540e\u8c03\u7528\uff1a\nclient?.setLocale('en-US')\n\u00a0\n5.4 Hosted \u6a21\u5f0f\u5b8c\u6574\u793a\u4f8b\n\/\/ main.js\nimport type { Router, RouteRecordRaw } from 'vue-router'\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n  }\nconst client = new RootAuthClient(options)\n\n  client.install(router as Router)\n\u00a0\n6. API \u6a21\u5f0f\uff08\u63a5\u53e3\u6a21\u5f0f\uff09\n\u6b64\u6a21\u5f0f\u4ec5\u63d0\u4f9b API \u8c03\u7528\uff0c\u4e0d\u5305\u542b\u4efb\u4f55 UI\u3002\u60a8\u9700\u8981\u81ea\u5df1\u5b9e\u73b0\u767b\u5f55\/\u6ce8\u518c\u7b49\u9875\u9762\uff0c\u5e76\u8c03\u7528 SDK \u63d0\u4f9b\u7684\u65b9\u6cd5\u5b8c\u6210\u8ba4\u8bc1\u3002\n\u00a0\n6.1 \u521b\u5efa\u5ba2\u6237\u7aef\u5b9e\u4f8b\n\uff08\u5fc5\u987b\u6307\u5b9a mode: 'api'\uff09\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\n\nconst options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)\n\u00a0\n6.2 \u6ce8\u5165\u5168\u5c40\u5b9e\u4f8b\n\uff08\u4ee5 Nuxt \u4e3a\u4f8b\uff09\n\u5176\u4ed6\u6846\u67b6\uff08\u5982 Vue\u3001React\uff09\u53ef\u53c2\u8003\u7c7b\u4f3c\u601d\u8def\uff0c\u5c06\u00a0client\u00a0\u6302\u8f7d\u5230\u5168\u5c40\u6216\u4f7f\u7528 Context\/Provider\u3002\n\u00a0\n6.2.1 \u521b\u5efa\u63d2\u4ef6\u6587\u4ef6\n\u00a0plugins\/rootauth.client.ts\n\/\/ plugins\/rootauth.client.ts\nimport { RootAuthClient, type RootAuthClientConfig } from 'rootauth-js'\nexport default defineNuxtPlugin(() => {\n  const options: RootAuthClientConfig = {\n    app_id: 'app_******', \/\/ \u5fc5\u586b\u9879\uff0c\u503c\u4e3a\u5de5\u4f5c\u53f0\u521b\u5efa\u5e94\u7528\u751f\u6210\u7684app_id\n    mode: 'api' \/\/ api\u6a21\u5f0f\u5fc5\u586b\n  }\n  const client = new RootAuthClient(options)\n\n  return {\n    provide: {\n      rootauth: client,\n    },\n  }\n})\n\u00a0\n6.2.2 \u6ce8\u518c\u63d2\u4ef6\u00a0\nnuxt.config.ts\n\/\/ nuxt.config.ts\nexport default defineNuxtConfig({\n  plugins: [\n    '@\/plugins\/rootauth.client.ts',\n  ]\n})\n\u00a0\n6.2.3 \u5728\u7ec4\u4ef6\u4e2d\u83b7\u53d6\u5b9e\u4f8b\nconst { $rootauth } = useNuxtApp()\n$rootauth?.xxx()\n\u00a0\n6.2.4 \u5c01\u88c5 Composable\uff08\u53ef\u9009\uff0c\u63a8\u8350\uff09\n\u521b\u5efa\u00a0composables\/useRootAuth.ts\uff1a\n\/\/ composables\/useRootAuth.ts\nimport type { RootAuthClient } from 'rootauth-js'\n\n\/** RootAuth \u5ba2\u6237\u7aef\uff08\u7531 `plugins\/rootauth.client` \u5728\u914d\u7f6e\u4e86 `ROOTAUTH_APP_ID` \u65f6\u6ce8\u5165\uff09 *\/\nexport function useRootAuth(): RootAuthClient | undefined {\n  return useNuxtApp().$rootauth as RootAuthClient | undefined\n}\n\n\u6b64\u65f6rootauth\u5bf9\u8c61\u7684\u4f7f\u7528\u65b9\u5f0f\u66f4\u7b80\u6d01\nconst rootauth = useRootAuth()\nrootauth?.xxx()\n\u00a0\n6.3 API \u65b9\u6cd5\u8bf4\u660e\n\u767b\u5f55\u3001\u6ce8\u518c\u3001\u53d1\u9001\u9a8c\u8bc1\u7801\u548c\u91cd\u7f6e\u5bc6\u7801\u5747\u8fd4\u56de Promise\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4f20\u5165\u81ea\u5b9a\u4e49\u56de\u8c03\uff08onSuccess\/onFailure\uff09\u6765\u8986\u76d6 SDK \u9ed8\u8ba4\u884c\u4e3a\u3002\n\u82e5\u53ea\u9700\u8865\u5145\u989d\u5916\u903b\u8f91\uff08\u5982\u5173\u95ed loading\uff09\uff0c\u8bf7\u76f4\u63a5\u4f7f\u7528 Promise\uff08.then().catch()\uff09\uff0c\u4e0d\u8981\u4f20\u5165\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0cSDK \u4f1a\u4fdd\u7559\u9ed8\u8ba4\u884c\u4e3a\u3002\n6.3.1 \u767b\u5f55\nconst rootauth = useRootAuth()\n\ninterface LoginParams {\n  type: string \/\/ \u5fc5\u586b\u9879\uff0c\u767b\u9646\u65b9\u5f0f\uff1aEMAIL_PASS|EMAIL_CODE\uff0c\u73b0\u5728\u652f\u6301\u8d26\u53f7\u5bc6\u7801\u767b\u9646EMAIL_PASS\u548c\u90ae\u7bb1\u9a8c\u8bc1\u7801\u767b\u9646EMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  password?: string \/\/ \u5f53type\u4e3aEMAIL_PASS\u5fc5\u586b\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code?: string \/\/ \u5f53type\u4e3aEMAIL_CODE\u5fc5\u586b\n}\ninterface RootAuthFlowCallbacks {\n  onSuccess?: (data: T) => void\n  onFailure?: (error: unknown) => void\n}\n\n\/\/\u53ef\u4f7f\u7528\u7684\u7c7b\u578b\nrootauth?.login(\n  params: LoginParams,\n  callbacks?: RootAuthFlowCallbacks<\n    AxiosResponse>\n  >,\n)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.log('err', err)\n})\n.finally(() => {\n  \/\/ \u5173\u95edloading\u7b49\n})\n\u5e26\u81ea\u5b9a\u4e49\u56de\u8c03\u793a\u4f8b\uff1a\nconst handleSubmit=()=>{\n  \/\/ \u7528\u6237\u81ea\u884c\u5904\u7406\u524d\u7f6e\u6821\u9a8c\n  loading.value = true\n  rootauth?.login({\n    type:'EMAIL_PASS',\n    email:'123456@qq.com',\n    password:'123456'\n  },\n  {\n    onSuccess:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u6210\u529f\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    },\n    onFailure:()=>{\n      \/\/ \u7528\u6237\u81ea\u5df1\u7684\u767b\u5f55\u5931\u8d25\u56de\u8c03\uff0c\u5305\u62ec\u63d0\u793a\u7b49\n    }\n  })\n  .finally(() => {\n    loading.value = false\n  })\n}\n\u00a0\n6.3.2 \u6ce8\u518c\ninterface RegisterParams {\n  type?: string \/\/ \u7528\u6237\u6ce8\u518c\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801\u6ce8\u518cEMAIL_CODE\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  code: string \/\/ \u5fc5\u586b\u9879\uff0c\u90ae\u7bb1\u6fc0\u6d3b\u7801\n  password: string \/\/ \u5fc5\u586b\u9879\uff0c\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n}\n\nconst params: RegisterParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  code: '123456',\n}\n  \nrootauth?.register(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.3 \u53d1\u9001\u9a8c\u8bc1\u7801\ninterface SendCodeParams {\n  type?: string \/\/ \u53d1\u9001\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL\n  email: string \/\/ \u5fc5\u586b\u9879\uff0c\u7528\u6237\u90ae\u7bb1\n  email_template_type: string \/\/ \u5fc5\u586b\u9879\uff0c\u9009\u62e9\u7684\u6a21\u677f\u7c7b\u578b\uff1aregister_code|login_code|reset_pass_code\uff0cregister_code\uff1a\u6ce8\u518c\u9a8c\u8bc1\u7801\uff0clogin_code\uff1a\u767b\u5f55\u9a8c\u8bc1\u7801\uff0creset_pass_code\uff1a\u91cd\u7f6e\u9a8c\u8bc1\u7801\n}\n\nconst params: SendCodeParams = {\n  email: '123456@qq.com',\n  email_template_type: 'register_code'\n}\n  \nrootauth?.sendCode(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.4 \u91cd\u7f6e\u5bc6\u7801\ninterface ResetPasswordUParams {\n  type?: string \/\/ \u53d1\u9a8c\u8bc1\u7801\u7c7b\u578b\uff1aEMAIL_CODE\uff0c\u9ed8\u8ba4\u4e3a\u90ae\u7bb1\u9a8c\u8bc1\u7801EMAIL_CODE\n  email: string\n  password: string \/\/ \u65b0\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  password_confirmation: string \/\/ \u786e\u8ba4\u5bc6\u7801\uff0c\u6ce8\u610f\uff1a\u4ec5\u9700\u8981\u4f20\u5165\u660e\u6587\u5bc6\u7801\uff0cRootAuth\u8fdb\u884c\u52a0\u5bc6\u5904\u7406\n  code: string\n}\n\nconst params: ResetPasswordUParams = {\n  email: '123456@qq.com',\n  password: '123456',\n  password_confirmation: '123456',\n  code: '111111'\n}\n  \nrootauth?.resetPassword(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.5 \u7b2c\u4e09\u65b9\u767b\u5f55\uff08Google OAuth\uff09\ninterface ThirdPartyLoginParams {\n  auth_by: string \/\/ \u7b2c\u4e09\u65b9\u7c7b\u578b\uff1agoogle_oauth\uff0cgoogle_oauth\uff1a\u8c37\u6b4c\u767b\u9646\n}\n\nconst params: ThirdPartyLoginParams = {\n  auth_by: 'google_oauth'\n}\n  \nrootauth?.thirdPartyLogin(params)\n.then((res) => {\n  \/\/ \u57fa\u4e8e\u5f53\u524d\u7684RootAuth\u903b\u8f91\uff0c\u8865\u5145\u81ea\u6709\u903b\u8f91\n})\n.catch((err) => {\n  console.error(err)\n})\n.finally(() => {\n})\n\u00a0\n6.3.6 Google One Tap \u767b\u5f55\n\u9700\u5148\u5728\u914d\u7f6e\u4e2d\u5f00\u542f enable_google_one_tap: true\nrootauth?.googleOneTapLogin()\n\u00a0\n\n\u00a0","is_draft":"0","editor_type":"3","file_path":"","add_time":"1776225145","update_time":"1776241150"},"pure_content":"RootAuth \u63d0\u4f9b JavaScript SDK\uff0c\u5e2e\u52a9\u60a8\u5728 Web \u5e94\u7528\u4e2d\u5feb\u901f\u96c6\u6210\u767b\u5f55\u3001\u6ce8\u518c\u3001\u6388\u6743\u7b49\u8eab\u4efd\u8ba4\u8bc1\u529f\u80fd\u3002SDK \u652f\u6301\u4e24\u79cd\u63a5\u5165\u6a21\u5f0f\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u9700\u6c42\u7075\u6d3b\u9009\u62e9\u3002\n\u00a0\n1.\u63a5\u5165\u6a21\u5f0f\u6982\u89c8\n\n\n\n\n \u6a21\u5f0f\n \u8bf4\u660e\n \u9002\u7528\u573a\u666f\n\n\n\n\n Hosted\uff08\u6258\u7ba1\u6a21\u5f0f\uff09\n \u4f7f\u7528 RootAuth \u63d0\u4f9b\u7684\u5b8c\u6574\u767b\u5f55\/\u6ce8\u518c\/\u91cd\u7f6e\u5bc6\u7801\u9875\u9762\uff08\u542b UI \u548c\u63a5\u53e3\uff09\n \u5e0c\u671b\u5feb\u901f\u4e0a\u7ebf\uff0c\u5bf9\u8ba4\u8bc1\u9875\u9762\u6837\u5f0f\u6709\u57fa\u672c\u8981\u6c42\n\n\n A"}],"user_read_num":"0","is_auth":"0"},"msg":"Success","code":200}
开发集成
