Expo 社交登录完整指南一套代码跑通 Google、GitHub 等第三方登录【免费下载链接】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如果你的 App 需要接入 Google、GitHub、Spotify 这类第三方账号登录Expo 的expo-auth-session模块就是为此设计的它把浏览器式 OAuth 登录流程封装成几个 React Hook一套代码同时适配 Android、iOS 和 Web。本文带你从零搭出一个能完成真实登录的最小版本并在最后给出多平台扩展与常见坑位处理所有示例都来自仓库内的官方示例应用。先完成什么按本文走完之后你的 App 将具备以下能力点击按钮即可拉起系统浏览器完成第三方平台登录登录成功自动回到 App拿到平台返回的授权码或访问令牌result.params.code/access_token同一套登录逻辑在 Android、iOS、Web 三个端行为一致启用PKCE机制防止授权码在开放 App 中被拦截冒用能优雅处理用户中途取消登录的情况准备清单项说明仓库参考依赖expo-auth-session、expo-cryptopeer 依赖必须同装、expo-web-browserpackages/expo-auth-session/应用 scheme在app.json配置expo.scheme用于登录回调深链接auth-session 参考文档平台账号在第三方平台控制台创建应用拿到 client ID并登记重定向 URL—运行环境本地测试请用 Development BuildExpo Go 因无法自定义 scheme 不支持 OAuth 回调官方认证指南照着流程搭出最小版本以 GitHub 登录为例共 6 步安装依赖。在项目根目录执行npx expo install expo-auth-session expo-crypto expo-web-browser配置回调 scheme。在app.json中加入scheme: your-app独立 App 必须配置否则登录完成后无法把数据传回应用。登记重定向 URL。在 GitHub 开发者设置中把 App 生成的重定向地址加入允许列表。构建认证请求。用useAuthRequestHook 声明客户端参数重定向地址交给makeRedirectUri自动生成const [request, result, promptAsync] useAuthRequest( { clientId: 你的CLIENT_ID, scopes: [identity], redirectUri: makeRedirectUri({}) }, { authorizationEndpoint: https://github.com/login/oauth/authorize, tokenEndpoint: https://github.com/login/oauth/access_token } );各端点的完整 discovery 配置可参考 AuthSessionScreen.tsx。挂载会话完成回调。在入口组件调用WebBrowser.maybeCompleteAuthSession()用于 Web 端关闭登录弹窗。处理登录结果。在按钮的点击事件里调用promptAsync()Web 端必须在用户交互中触发然后用useEffect监听result.type success从result.params中取出 code。按钮需加disabled{!request}避免请求未就绪时点击。扩展到其他场景官方示例应用一次性接入了 16 个平台覆盖四种接入模式接入模式代表平台特点专用 ProviderGoogle、Facebook端点自动处理useAuthRequest参数更少见 providers 源码通用useAuthRequest 手动 discoveryGitHub、Spotify、Slack、Twitch、Strava、Dropbox、Coinbase、Uber、FitBit、Imgur、Reddit自己写authorizationEndpoint/tokenEndpointuseAutoDiscovery自动发现Okta、Identity Server 等 OpenID Connect 服务只给一个根 URL 即可发现端点useIdTokenAuthRequestGoogle Firebase直接换取 ID Token 的流程另外两点值得注意exchangeCodeAsync支持拿授权码手动换令牌适合需要client_secret的场景如果平台官方有原生 SDK如 Google Sign-In、Facebook SDK官方文档建议优先用平台方库expo-auth-session更适合作为通用方案。排坑清单登录成功后 App 没有跳回来→ 独立 App 未配置scheme认证流程走完但数据回传失败用户只能手动退出。→ 在app.json加scheme并重新构建原生工程。Web 端登录窗口不关闭→ 漏调maybeCompleteAuthSession()或在非用户交互时机调用了promptAsync()被浏览器拦截。→ 在接收重定向的页面顶层加上该调用并在按钮点击事件中发起登录。平台报 Redirect URI mismatch→ 控制台登记的 URL 与makeRedirectUri生成的不一致GitHub、Reddit、FitBit 等平台每个应用只允许登记一个重定向地址。→ 以代码实际生成的地址为准登记多端部署时按端拆分成多个平台应用。在 Expo Go 里测试始终失败→ Expo Go 无法自定义应用 schemeOAuth 回调进不了应用。→ 改用 Development Build 做本地调试行为与生产一致。想把clientSecret写进 App→ 客户端代码不是存放密钥的安全位置。→ 在自建服务端完成 code 换 tokenApp 只拿授权码。继续深挖去哪里完整示例应用AuthSessionScreen.tsx16 平台接入 PKCE 开关 多账户切换、AuthCard.tsx、AuthResult.tsx模块源码packages/expo-auth-session/src/PKCE.ts、Discovery.ts、AuthRequest.ts分别对应安全机制、端点发现与请求构建官方文档认证指南、AuthSession API 参考下一步建议用 GitHub 或 Spotify 跑通第一条登录链路确认三个端都能回调打开usePKCE开关验证安全配置再处理result.type error且error user_cancelled的分支将授权码发送到你的服务端换取 access token并在服务端处理 token 刷新【免费下载链接】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），仅供参考 
长河君 · 2026/8/31 8:35:30 · 阅读 1.2k Expo 社交登录完整指南：一套代码跑通 Google、GitHub 等第三方登录
Expo 社交登录完整指南一套代码跑通 Google、GitHub 等第三方登录【免费下载链接】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如果你的 App 需要接入 Google、GitHub、Spotify 这类第三方账号登录Expo 的expo-auth-session模块就是为此设计的它把浏览器式 OAuth 登录流程封装成几个 React Hook一套代码同时适配 Android、iOS 和 Web。本文带你从零搭出一个能完成真实登录的最小版本并在最后给出多平台扩展与常见坑位处理所有示例都来自仓库内的官方示例应用。先完成什么按本文走完之后你的 App 将具备以下能力点击按钮即可拉起系统浏览器完成第三方平台登录登录成功自动回到 App拿到平台返回的授权码或访问令牌result.params.code/access_token同一套登录逻辑在 Android、iOS、Web 三个端行为一致启用PKCE机制防止授权码在开放 App 中被拦截冒用能优雅处理用户中途取消登录的情况准备清单项说明仓库参考依赖expo-auth-session、expo-cryptopeer 依赖必须同装、expo-web-browserpackages/expo-auth-session/应用 scheme在app.json配置expo.scheme用于登录回调深链接auth-session 参考文档平台账号在第三方平台控制台创建应用拿到 client ID并登记重定向 URL—运行环境本地测试请用 Development BuildExpo Go 因无法自定义 scheme 不支持 OAuth 回调官方认证指南照着流程搭出最小版本以 GitHub 登录为例共 6 步安装依赖。在项目根目录执行npx expo install expo-auth-session expo-crypto expo-web-browser配置回调 scheme。在app.json中加入scheme: your-app独立 App 必须配置否则登录完成后无法把数据传回应用。登记重定向 URL。在 GitHub 开发者设置中把 App 生成的重定向地址加入允许列表。构建认证请求。用useAuthRequestHook 声明客户端参数重定向地址交给makeRedirectUri自动生成const [request, result, promptAsync] useAuthRequest( { clientId: 你的CLIENT_ID, scopes: [identity], redirectUri: makeRedirectUri({}) }, { authorizationEndpoint: https://github.com/login/oauth/authorize, tokenEndpoint: https://github.com/login/oauth/access_token } );各端点的完整 discovery 配置可参考 AuthSessionScreen.tsx。挂载会话完成回调。在入口组件调用WebBrowser.maybeCompleteAuthSession()用于 Web 端关闭登录弹窗。处理登录结果。在按钮的点击事件里调用promptAsync()Web 端必须在用户交互中触发然后用useEffect监听result.type success从result.params中取出 code。按钮需加disabled{!request}避免请求未就绪时点击。扩展到其他场景官方示例应用一次性接入了 16 个平台覆盖四种接入模式接入模式代表平台特点专用 ProviderGoogle、Facebook端点自动处理useAuthRequest参数更少见 providers 源码通用useAuthRequest 手动 discoveryGitHub、Spotify、Slack、Twitch、Strava、Dropbox、Coinbase、Uber、FitBit、Imgur、Reddit自己写authorizationEndpoint/tokenEndpointuseAutoDiscovery自动发现Okta、Identity Server 等 OpenID Connect 服务只给一个根 URL 即可发现端点useIdTokenAuthRequestGoogle Firebase直接换取 ID Token 的流程另外两点值得注意exchangeCodeAsync支持拿授权码手动换令牌适合需要client_secret的场景如果平台官方有原生 SDK如 Google Sign-In、Facebook SDK官方文档建议优先用平台方库expo-auth-session更适合作为通用方案。排坑清单登录成功后 App 没有跳回来→ 独立 App 未配置scheme认证流程走完但数据回传失败用户只能手动退出。→ 在app.json加scheme并重新构建原生工程。Web 端登录窗口不关闭→ 漏调maybeCompleteAuthSession()或在非用户交互时机调用了promptAsync()被浏览器拦截。→ 在接收重定向的页面顶层加上该调用并在按钮点击事件中发起登录。平台报 Redirect URI mismatch→ 控制台登记的 URL 与makeRedirectUri生成的不一致GitHub、Reddit、FitBit 等平台每个应用只允许登记一个重定向地址。→ 以代码实际生成的地址为准登记多端部署时按端拆分成多个平台应用。在 Expo Go 里测试始终失败→ Expo Go 无法自定义应用 schemeOAuth 回调进不了应用。→ 改用 Development Build 做本地调试行为与生产一致。想把clientSecret写进 App→ 客户端代码不是存放密钥的安全位置。→ 在自建服务端完成 code 换 tokenApp 只拿授权码。继续深挖去哪里完整示例应用AuthSessionScreen.tsx16 平台接入 PKCE 开关 多账户切换、AuthCard.tsx、AuthResult.tsx模块源码packages/expo-auth-session/src/PKCE.ts、Discovery.ts、AuthRequest.ts分别对应安全机制、端点发现与请求构建官方文档认证指南、AuthSession API 参考下一步建议用 GitHub 或 Spotify 跑通第一条登录链路确认三个端都能回调打开usePKCE开关验证安全配置再处理result.type error且error user_cancelled的分支将授权码发送到你的服务端换取 access token并在服务端处理 token 刷新【免费下载链接】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），仅供参考