DRF+React实现点击谷歌登录将社交应用令牌存入数据库的问题

你当前的问题核心是前端仅完成了谷歌侧的身份验证，未将拿到的授权凭证传递给Django后端做校验和关联，所以后端不会生成对应的社交账号记录和应用令牌，可按以下步骤调整：

1. 调整前端逻辑，上传授权凭证到后端 #

修改React端的responseGoogle方法，将谷歌返回的accessToken发送到后端认证接口，拿到后端返回的DRF令牌后存入本地存储：

import axios from 'axios';
// 其余原有代码保留
responseGoogle = async (response) => {
  try {
    // 向后端发送谷歌返回的访问令牌
    const authRes = await axios.post('http://127.0.0.1:8000/api/rest-auth/google/', {
      access_token: response.accessToken
    });
    // 存储认证令牌到本地
    localStorage.setItem('drf_auth_token', authRes.data.key);
    // 可在此处添加登录成功后的跳转逻辑
  } catch (error) {
    console.error('后端认证失败：', error.response?.data || error.message);
  }
}

2. 后端补充依赖和配置 #

• 先安装社交登录所需的依赖包：
  pip install django-rest-auth[social]
• 补充settings.py配置项：

# 追加到原有settings.py末尾
REST_AUTH_SOCIAL_AUTHENTICATION_ENABLED = True
# 若不需要邮箱验证可添加以下两项配置
ACCOUNT_EMAIL_VERIFICATION = 'none'
SOCIALACCOUNT_EMAIL_VERIFICATION = 'none'

• 补充urls.py的谷歌登录路由：

# 导入所需类
from rest_auth.registration.views import SocialLoginView
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from allauth.socialaccount.providers.oauth2.client import OAuth2Client

# 自定义谷歌登录视图
class GoogleLogin(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    callback_url = "http://127.0.0.1:8000/accounts/google/login/callback/"
    client_class = OAuth2Client

# 追加到原有urlpatterns列表中
urlpatterns += [
    path('api/rest-auth/google/', GoogleLogin.as_view(), name='google_login'),
]

3. 校验基础配置项 #

• 确认Django Admin后台的Sites模块中，id=1的站点存在，若不存在可手动创建，域名临时填127.0.0.1:8000即可
• 确认Django Admin中创建的Social Application已关联了上述id=1的站点
• 确认Google Cloud后台拿到的Client ID、Secret和Django后台Social Application中填写的内容完全一致

4. 功能测试 #

重启Django后端服务后，前端点击谷歌登录按钮，选择账号后会自动完成全流程认证：后端校验令牌合法后，会自动创建对应的User记录、Social Account记录，同时返回DRF认证令牌给前端存入本地存储，后续接口请求在请求头携带Authorization: Token <你的令牌值>即可通过DRF的权限校验。

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