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 和 Web，3步完成 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 开发者设置里申请的 ID，scheme换成app.json里配置的scheme字段。登录成功后，response.type为'success'，response.params.code就是授权码。
第3步：验证是否生效
启动应用、点击登录按钮，走完浏览器授权后回到 App，检查控制台输出的response：出现code参数即代表重定向链路完整。注意：Expo Go 无法自定义 scheme，本地测试请用 Development Build（npx 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 的跨平台细节收敛成useAuthRequest+makeRedirectUri两个核心 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），仅供参考
