5分钟接入4种社交登录Expo社交登录与第三方认证完整实战【免费下载链接】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用户在密码框前填到一半就放弃了注册表单是转化最大的流失点。用 Expo 的第三方认证模块expo-auth-session可以让用户拿已有的 Google、GitHub 账号一键登录。这篇教程带你从装依赖到跑通第一次 Expo 社交登录。一表看懂收益为什么选社交登录一套expo-auth-session代码就能覆盖 iOS、Android 和 Web行业数据里社交登录能带来 40% 以上的注册转化提升。收益说明跨平台兼容同一套代码跑 iOS、Android、Web不用写三套原生实现PKCE 内置安全一个usePKCE: true开关防止授权码被中途拦截代码量减少相比手写 OAuth 原生流程代码量减少约 60%统一 API 易维护所有平台都用useAuthRequest新增平台只改配置开工前三项准备开工前你只需要备齐三样东西一个能跑起来的 Expo 项目、对应平台的 Client ID、两个依赖包。Expo 项目就绪npx create-expo-app新建或已有的开发客户端能跑的项目。申请 Client IDGoogle 去 Google Cloud Console 建 OAuth 客户端Facebook 去 Facebook for DevelopersGitHub 在 Developer settings 的 OAuth Apps 里创建。安装依赖在 Expo 项目根目录执行一行命令npx expo install expo-auth-session expo-web-browser三步完成第一次登录整个流程就三件事装依赖、配重定向地址、处理回调。一行命令装好依赖上一步的expo install会同时装两个包expo-auth-session负责发起认证和换 tokenexpo-web-browser负责在 Web 端接住登录后的回跳两者版本由 Expo 自动对齐不用你操心。用 makeRedirectUri 生成重定向 URImakeRedirectUri会按当前平台生成一个统一格式的回跳地址你只需把它复制进第三方平台的回调白名单。import * as AuthSession from expo-auth-session; const redirectUri AuthSession.makeRedirectUri({ path: redirect, });处理认证回调与用户取消用户授权后回到 Appresult会告诉你成功还是取消取消不是错误别弹报错。const [request, result, promptAsync] useAuthRequest( { clientId, usePKCE: true, redirectUri }, { authorizationEndpoint, tokenEndpoint } ); useEffect(() { if (result?.type error result.error ! user_cancelled) { // 只有真错误才提示用户取消直接忽略 } }, [result]);平台支持矩阵官方示例应用集成了 Google、Facebook、GitHub 等 16 个平台下面是最常用的 5 个。平台支持状态需额外配置特别说明Google完整支持Cloud Console 建 OAuth 客户端Android 填 SHA1 指纹有现成 providers/google 预设最省事Facebook完整支持App ID 加回调 URL部分权限需应用审核GitHub完整支持OAuth Apps 里设 Callback URL需要手写两个 endpointApple完整支持Apple Developer 注册服务走 expo-apple-authentication仅 iOS/macOSSpotify完整支持Developer Dashboard 建 Client商业用途要申请商业授权Google 用官方预设一行就拿到三个返回值const [request, result, promptAsync] GoogleAuthSession.useAuthRequest( { clientId: 你的客户端ID, usePKCE: true } );GitHub 没有预设把两个 endpoint 手动写进去就行const [request, result, promptAsync] useAuthRequest( { clientId, redirectUri, scopes: [identity] }, { authorizationEndpoint: https://github.com/login/oauth/authorize, tokenEndpoint: https://github.com/login/oauth/access_token, } );10秒看懂原理OAuth 2.0 就像去酒店前台核销门票你把用户送到对方的登录页对方验明正身后发一张门票授权码你拿码换房卡token一张临时通行证之后进房只用房卡。OpenID Connect 是在门票上多印了住客姓名让你知道他是谁而不只是他被放行。PKCE 则是给门票加一道密码校验出门前先记下口令换房卡时报口令中途有人截走门票也刷不开。三个核心 API 各管一件事useAuthRequest发起认证并接住结果useAutoDiscovery自动查询服务端地址省得手填makeRedirectUri生成跨平台一致的回跳地址。4个容易踩的坑重定向 URL 不一致怎么解决现象登录页报 redirect_uri mismatch。原因平台白名单里的地址和代码生成的差一个斜杠、差一个端口。解法用console.log打出request.url逐字符对照后原样粘进平台配置。用户取消后弹了一堆报错现象点关闭就报错提示。原因没区分user_cancelled和其他错误。解法回调里先判断result.error ! user_cancelled再提示。PKCE 没启用现象真机调试一切正常上线后授权码被截。原因默认不开 PKCE。解法配置里显式写usePKCE: true移动端和 Web 都写上。开发和生产行为不一样现象本地能登打包后白屏。原因两套环境用了同一个 Client ID 和回调地址。解法把配置放进app.config.js的extra按环境读取const clientId Constants.expoConfig?.extra?.googleClientId;示例项目关键文件想抄作业的话仓库里的认证示例就三个文件AuthSessionScreen.tsx主界面16 个平台的认证逻辑和 PKCE 开关都在这里。AuthCard.tsx每个平台的 Sign In with X 登录按钮组件。AuthResult.tsx认证后展示重定向 URL 和返回结果的组件。跑通第一个登录后下一步是让它长期可用给 token 加自动刷新用户到期不用重新登录支持多账户切换把认证状态持久化重启 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考