You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Django DRF + dj_rest_auth + Allauth 预发布环境社交登录OAuth2获取AccessToken失败求助

我之前碰到过几乎一模一样的OAuth2社交登录坑,结合你的错误日志和代码细节来看,核心问题出在回调URL的一致性、参数传递以及配置错误上,咱们一步步来拆解解决:

问题根源与解决方案

1. 致命错误:URL配置重复name导致回调地址完全错误

看你的URL配置:

path('rest-auth/linkedin/', LinkedInLogin.as_view(), name='linkedin_oauth2_callback'),
path('rest-auth/linkedin/callback/', linkedin_callback, name='linkedin_oauth2_callback'),

两个完全不同的端点用了同一个name='linkedin_oauth2_callback'!当适配器里调用reverse('linkedin_oauth2_callback')时,Django只会返回第一个匹配的URL(也就是/rest-auth/linkedin/),而不是实际的后端回调地址/rest-auth/linkedin/callback/。这直接导致OAuth2流程中,适配器告知第三方平台的回调地址和你在平台开发者后台配置的地址完全不一致,触发invalid_redirect_uri是必然的。

修复方案:

给每个URL端点分配唯一的name,再修正适配器的回调地址指向:

# 登录端点
path('rest-auth/linkedin/', LinkedInLogin.as_view(), name='linkedin_login'),
# 后端回调端点(这个才是给第三方平台配置的地址)
path('rest-auth/linkedin/callback/', linkedin_callback, name='linkedin_oauth2_callback'),
# 获取授权URL的端点
path('rest-auth/linkedin/url/', linkedin_views.oauth2_login, name='linkedin_auth_url'),

更新适配器代码:

class LinkedInLogin(SocialLoginView):
    adapter_class = LinkedInOAuth2Adapter
    client_class = OAuth2Client
    @property
    def callback_url(self):
        # 现在reverse会指向正确的后端回调地址
        return self.request.build_absolute_uri(reverse('linkedin_oauth2_callback'))

2. 前端提交时缺少state参数,导致code验证失败

OAuth2的state参数是用来防CSRF的,dj_rest_auth + Allauth在验证code时必须同时校验state参数。你的前端代码只传递了code,完全没管回调时拿到的state,这就会触发"appid/redirect uri/code verifier does not match authorization code"的错误。

修复方案:

更新前端的请求逻辑,把state也一起传给后端:

// 更新GraphQL Mutation,新增state参数
const postSocialUserAuth = builder => builder.mutation({
  query: (data) => {
    const payload = { 
      code: data?.code, 
      state: data?.state // 加入state参数
    };
    return {
      url: `${API_BASE_URL}/rest-auth/${data?.provider}/`,
      method: 'POST',
      body: payload,
    }
  }
})

// 更新登录处理逻辑,从URL中提取state并传递
const handleSocialLogin = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  const state = urlParams.get('state'); // 拿到state

  postSocialAuth({ 
    code: code, // 先去掉decodeURIComponent试试,避免过度解码
    provider: provider,
    state: state
  }).then(response => {
    if (!response.error) return history.push(`/complete-profile?source=${provider}`);
    NotificationManager.error(
      `There was an error while trying to log you in via ${provider}`, "Error", 3000
    );
    return history.push("/login");
  }).catch(_error => {
    NotificationManager.error(
      `There was an error while trying to log you in via ${provider}`, "Error", 3000
    );
    return history.push("/login");
  });
}

3. 三方回调URL必须完全一致(一个字符都不能差)

请立刻核对以下三处的回调URL,确保完全匹配(包括HTTP/HTTPS、域名、路径,甚至结尾的斜杠):

  • 第三方平台开发者后台(如LinkedIn):配置的回调URL必须是你的后端回调地址,比如https://your-preprod-backend.com/rest-auth/linkedin/callback/
  • Django Admin后台:在Social Applications对应应用的Callback URL,必须和上面的地址完全一致
  • 代码生成的callback_url:修复第一个问题后,用print(self.callback_url)在适配器里输出确认,确保和前两者一致

4. 预发布环境HTTPS/HTTP一致性检查

如果预发布环境用了HTTPS:

  • 确保settings.HTTP_PROTOCOL设置为https,避免后端重定向到前端时用HTTP
  • 检查前端的API_BASE_URL是否用了HTTPS,避免混合内容导致的隐性错误

按这个顺序排查,应该能解决所有平台的共性问题。我之前就是因为URL name重复和漏传state踩过一模一样的坑,调整后就完全正常了。

内容的提问来源于stack exchange,提问作者andrey

火山引擎 最新活动