Expo expo-auth-session 社交登录完整指南3步在 App 里接入第三方登录【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo还在手写 OAuth 流程、为 iOS 和 Android 各配一套跳转逻辑吗本文带你用 Expo 的expo-auth-session模块给应用加社交登录一套代码覆盖 Android、iOS 和 Web3步完成 GitHub 登录的最小可用实现新手也能直接落地。登录跑通后你的应用变成什么样完成本文后你的应用会多出一个第三方登录按钮用户点一下就跳转到系统浏览器授权回来时 App 自动拿到授权码并换取 access token。具体省掉了这些事三端统一同一个useAuthRequest调用在 Android、iOS、Web 上都能工作不用分平台写三套。省去跳转脏活模块基于expo-web-browser构建自动处理打开浏览器、授权后跳回 App 的流程。安全机制内置支持 PKCE授权码交换的 Proof Key 扩展不需要自己实现。有标准接口换 token拿到response.params.code后用exchangeCodeAsync换 access token。官方演示可对照仓库内置了 Google、Facebook、GitHub 等 16 家服务的完整示例见 AuthSessionScreen.tsx。最短路径3步跑通 GitHub 登录第1步安装依赖expo-auth-session依赖expo-crypto生成 PKCE 密钥两条一起装npx expo install expo-auth-session expo-crypto第2步配置认证请求下面这段代码创建了 GitHub 的 OAuth 请求discovery指定 GitHub 的两个端点makeRedirectUri按当前平台自动生成重定向地址promptAsync触发登录。import * as WebBrowser from expo-web-browser; import { makeRedirectUri, useAuthRequest } from expo-auth-session; WebBrowser.maybeCompleteAuthSession(); const discovery { authorizationEndpoint: https://github.com/login/oauth/authorize, tokenEndpoint: https://github.com/login/oauth/access_token, }; export function App() { const [request, response, promptAsync] useAuthRequest({ clientId: CLIENT_ID, redirectUri: makeRedirectUri({ scheme: your.app }) }, discovery); return button disabled{!request} onClick{() promptAsync()}登录 GitHub/button; }把CLIENT_ID换成你在 GitHub 开发者设置里申请的 IDscheme换成app.json里配置的scheme字段。登录成功后response.type为successresponse.params.code就是授权码。第3步验证是否生效启动应用、点击登录按钮走完浏览器授权后回到 App检查控制台输出的response出现code参数即代表重定向链路完整。注意Expo Go 无法自定义 scheme本地测试请用 Development Buildnpx expo run:android或npx expo run:ios它支持 OAuth 回跳。进阶玩法把登录做进真实业务场景场景一用户想换账号重新登录。在useAuthRequest的配置里加prompt: AuthSession.Prompt.SelectAccount授权页会强制展示账号选择器而不是静默使用上次登录的账号——示例应用里就用这个开关实现了Switch Accounts功能。场景二应用重启后不想让用户再登录一次。原生端用expo-secure-store把认证结果加密存到 Keychain/SharedPreferences启动时读回即可不要用 AsyncStorage它不加密import * as SecureStore from expo-secure-store; useEffect(() { if (response?.type success Platform.OS ! web) { SecureStore.setItemAsync(authState, JSON.stringify(response.params)); } }, [response]);场景三Android 上点击到弹出浏览器太慢。在 App 挂载时调用WebBrowser.warmUpAsync()让浏览器后台预初始化卸载时调用coolDownAsync()释放内存授权页弹出速度会明显改善。避坑速查这3个问题最劝退新手现象原因解决办法Web 上授权成功但弹窗一直不关漏调WebBrowser.maybeCompleteAuthSession()在 Web 回跳页面调用它原生端调用无害建议统一加上第三方平台报 redirect_uri 不匹配平台侧配置的地址与makeRedirectUri生成的不一致斜杠数量、scheme 差一个字符都算不匹配先打印出实际生成的 URL逐字符录入到服务商后台GitHub 每个应用只允许配一个重定向 URI原生和 Web 需要分别建应用Expo Go 里点登录后卡在授权页回不来Expo Go 不能自定义 app scheme无法承接回跳改用 Development Build 或独立构建包测试另外记住客户端代码里不能安全存放 client secret授权码应发到你的服务端如 API Routes再换 token。总结expo-auth-session把 OAuth/OpenID Connect 的跨平台细节收敛成useAuthRequestmakeRedirectUri两个核心 API你只需要专注业务逻辑。建议的下一步给当前应用加上面3步的 GitHub 登录跑通 Development Build 全流程把 access token 换成服务端接口调用并加SecureStore持久化对照官方演示屏幕扩展第二个登录服务如 Google、Facebook 有现成 provider 封装。重要资源官方认证指南 与 expo-auth-session 源码 【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考