React Native+Django allauth跨域谷歌认证配置及OAuth类型咨询

一、Google云控制台OAuth令牌类型选择 #

• 直接选Android/iOS类型的客户端ID，不要选Web application。React Native属于移动端原生应用范畴，Google针对移动端提供了专门的OAuth适配，支持自定义URL Scheme跳转回调，而Web application类型仅适配网页SPA场景，无法满足移动端的认证回调需求。
• 配置时需对应填写：Android端填应用包名+签名证书指纹；iOS端填Bundle ID，这些信息要和React Native项目里的配置完全一致。

二、HEADLESS_FRONTEND_URLS配置 #

• 这个配置的核心是指定React Native应用能接收认证回调的自定义URL Scheme，格式类似myapp://auth/callback/google（Scheme前缀可以根据你的应用自定义）。
• 示例配置（在Django的settings.py中添加）：

  HEADLESS_FRONTEND_URLS = {
      "google": "myapp://auth/callback/google",
      # 其他认证提供商可按需添加对应回调Scheme
  }
  

• 关键注意：Google云控制台的授权重定向URI必须和上面填的Scheme完全一致，要把这个Scheme地址添加到Google的重定向URI列表里。

三、跨域与认证流程补充 #

• 跨域处理：安装django-cors-headers库，在Django的settings.py中配置CORS_ALLOWED_ORIGINS，添加React Native应用的访问地址，比如开发环境的http://localhost:8081，或者真机测试时的设备IP地址。
• 认证流程步骤：
  1. React Native前端调用Django后端的/accounts/google/login/接口，获取谷歌授权跳转URL；
  2. 前端用Linking.openURL()打开该URL，引导用户完成谷歌授权；
  3. 授权完成后，谷歌会跳转到你配置的自定义URL Scheme，前端通过Linking.addEventListener()捕获回调，拿到授权码；
  4. 前端将授权码传给Django后端的/accounts/google/login/callback/接口，完成登录并获取认证token。

内容的提问来源于stack exchange，提问作者xl3ehindTim