# Authgear 集成 ## 概述这项技能可以帮助开发人员快速、正确地将 Authgear 身份验证集成到他们的应用程序中。它提供了特定于框架的指导、可重用的代码模板以及受保护路由、用户配置文件、API 集成和基于角色的访问控制的通用模式。 ## 集成工作流程 ### 1\.检测项目框架通过检查确定项目类型： * 包文件：`package.json`、`pubspec.yaml`、`build.gradle`、`Podfile` * 项目结构：存在 `src/`、`android/`、`ios/`、`lib/` 目录 * 配置文件：`vite.config.js`、`next.config.js`、`angular.json` 通用框架： * **React SPA** ：`package.json` 与 `react` 和 `react-dom`，通常与 `vite` 或 `react-scripts` 一起使用 * **React Native** ：带有 `react-native`、`ios/` 和 `android/` 目录的 `package.json` * **Flutter** ：带有“flutter”依赖项的“pubspec.yaml” * **Android** ：`build.gradle`文件，`AndroidManifest.xml` * **Vue.js** ：具有 `vue` 依赖项的 `package.json` * **Next.js** ：具有“next”依赖项的“package.json” ### 2\.询问用户配置使用 AskUserQuestion 收集所需信息： { “问题”：[ { "question": "您有 Authgear 项目设置吗？如果有，请提供您的客户端 ID。", "header": "客户端 ID", “多重选择”：假， “选项”：[ { "label": "我有一个客户端 ID", "description": "从门户提供您的 Authgear 客户端 ID" }, { "label": "还没有，帮我设置一下", "description": "指导我创建 Authgear 项目" } ] }, { "question": "您的 Authgear 端点 URL 是什么？", “标题”：“端点”， “多重选择”：假， “选项”：[ { "label": "我有一个端点", "description": "提供您的 Authgear 端点（例如，https://myapp.authgear.cloud）" }, { "label": "帮我找到它", "description": "显示在哪里可以找到我的端点" } ] } ] } 如果用户没有客户端 ID 或端点，请指导他们： *访问 * 创建一个新项目或选择现有项目 * 导航至应用程序 → 创建应用程序 * 选择适当的应用程序类型（移动本机应用程序、Web SPA） * 配置重定向 URI * 复制客户端ID和端点 ### 3\.安装依赖项基于检测到的框架： **反应SPA：** npm install --save --save-exact @authgear/web **反应本机：** npm install --exact @authgear/react-native cd ios && pod 安装 **颤动：** flutter pub 添加 flutter_authgear **Android:** 添加到 `build.gradle` \- 请参阅 [references/android.md]() ### 4\.配置环境变量创建或更新 `.env` 文件（或框架的适当配置）： **反应（Vite）：** VITE_AUTHGEAR_CLIENT_ID= VITE_AUTHGEAR_ENDPOINT= VITE_AUTHGEAR_REDIRECT_URL=http://localhost:5173/auth-redirect **反应（创建反应应用程序）：** REACT_APP_AUTHGEAR_CLIENT_ID= REACT_APP_ATHGEAR_ENDPOINT= REACT_APP_AUTHGEAR_REDIRECT_URL=http://localhost:3000/auth-redirect 对于 React Native、Flutter、Android：凭证通常硬编码在配置中或存储在特定于平台的安全存储中。 ### 5\.实施核心身份验证使用“assets/”中特定于框架的模板和“references/”中的详细指南： **对于反应：** 1. 将 `assets/react/UserProvider.tsx` 复制到 `src/` 2. 将 `assets/react/AuthRedirect.tsx` 复制到 `src/pages/` 或 `src/components/` 3. 将`assets/react/useAuthgear.ts`复制到`src/hooks/` 4. 更新路由以包含 `/auth-redirect` 路由 5. 使用 UserContextProvider 包装应用程序有关完整的实现细节，请参阅 [references/react.md]()。 **对于 React Native：** 1. 在`App.tsx`中初始化SDK 2. 配置特定于平台的重定向处理（AndroidManifest.xml、Info.plist） 3. 通过会话状态管理实现身份验证流程有关完整的实现细节，请参阅 [references/react-native.md]()。 **对于颤动：** 1.app状态添加SDK初始化 2. 配置特定于平台的 URL 方案 3. 实现身份验证UI 有关完整的实现细节，请参阅 [references/flutter.md]()。 **对于安卓：** 1.添加SDK依赖 2.在MainActivity中初始化 3. 在清单中配置重定向活动有关完整的实现细节，请参阅 [references/android.md]()。 ### 6\.实现请求的功能根据用户需求，实现[references/common-patterns.md]()中的通用模式： **受保护的路线：** * 使用 `assets/react/ProtectedRoute.tsx` 中的 `ProtectedRoute` 组件 (React) * 为 React Native/Flutter 实现导航守卫 * 请参阅 common-patterns.md 中的示例 **用户个人资料页面：** * 使用 authgear.fetchUserInfo() 获取用户信息 * 显示用户详细信息（ID、电子邮件、电话） * 使用 `authgear.open(Page.Settings)` 添加设置按钮 **API 集成：** * 使用`authgear.fetch()`进行自动令牌处理 * 或者使用“authgear.accessToken”手动添加授权标头 * 实现token刷新逻辑 **基于角色的访问：** * 从用户信息中提取角色/权限 * 创建权限检查挂钩/实用程序 * 根据角色有条件地渲染 UI ### 7\.添加登录/注销用户界面创建用于身份验证的 UI 组件： **登录按钮：** // 反应从 './hooks/useAuthgear' 导入 { useAuthgear }； const 登录按钮 = () => { const { 登录 } = useAuthgear(); return ; }; **注销按钮：** const 注销按钮 = () => { const { 注销 } = useAuthgear(); return ; }; **设置按钮：** const 设置按钮 = () => { const { openSettings } = useAuthgear(); return ; }; ### 8\.测试集成指导用户测试： 1.启动开发服务器 2. 单击登录按钮 → 应重定向至 Authgear 3. 完成认证 4. 应重定向回应用程序“/auth-redirect” 5. 然后应该以经过身份验证的用户身份导航到主页 6. 验证受保护的路由是否有效 7. 测试注销功能 ## 特定于框架的指南有关详细的实施说明，请参阅以下特定于框架的参考资料： * **React SPA** ：[references/react.md]() * **React Native** ：[references/react-native.md]() * **Android** ：[references/android.md]() * **Flutter** ：[references/flutter.md]() ## 常见模式要实现特定功能，请参阅 [references/common-patterns.md]()： * 受保护的路线和导航守卫 * 带有设置的用户个人资料页面 * API 与自动令牌处理集成 * 基于角色的访问控制 ## 快速设置示例 ### React SPA - 最小设置 // 1. 安装 npm install --save --save-exact @authgear/web react-router-dom // 2. 使用提供者包装应用程序 (App.tsx) 从 './UserProvider' 导入 { UserContextProvider }；从 'react-router-dom' 导入 { BrowserRouter, Routes, Route }; 从 './AuthRedirect' 导入 AuthRedirect；从 './Home' 导入主页；函数应用程序（）{ 返回（ <用户上下文提供者> <浏览器路由器> <路线> } /> <路线路径=“/”元素={<首页/>}/> ）； } // 3.添加登录按钮(Home.tsx) 从 './hooks/useAuthgear' 导入 { useAuthgear }；从 './UserProvider' 导入 { useUser } ；函数主页（）{ const { 登录，注销 } = useAuthgear(); const { isLoggedIn } = useUser(); 返回（

{已登录？（ ) : ( )}

）； } ### React Native - 最小设置 // 1. 安装 npm install --exact @authgear/react-native cd ios && pod 安装 // 2. 在App.tsx中初始化从 '@authgear/react-native' 导入 authgear, { SessionState }; 从 'react' 导入 { useEffect, useState }; 从'react-native'导入{按钮，文本，视图}；函数应用程序（）{ const [isLoggedIn, setIsLoggedIn] = useState(false); 使用效果（（）=> { authgear.configure({ 客户端ID：''，端点：'<端点>'， }).then(() => { authgear.delegate = { onSessionStateChange: (容器) => { setIsLoggedIn(container.sessionState === SessionState.Authenticated); }, }; }); }, []); 常量handleLogin = () => { authgear.authenticate({redirectURI: 'com.myapp://host/path' }); }; 常量handleLogout = () => { authgear.logout(); }; 返回（ <查看> {已登录？（

Authgear 集成

包含技能