social-auth-app-django的Django应用Google登录URL含空格报错排查

问题描述 #

使用social-auth-app-django 5.4.1版本集成Google登录时，触发social:begin链接后收到Google的错误提示：重定向URI（redirect_uri=http://127.0.0.1:8000/accounts/complete/google-oauth2/）与flowName=GeneralOAuthFlow之间存在空格，而Google不允许重定向URI包含空格。无法控制该URL段的构建逻辑，需排查问题根源及解决办法。

触发代码 #

前端触发登录的模板代码：

<a href="{% url 'social:begin' 'google-oauth2' %}" class="btn bsb-btn-xl btn-outline-primary btn-form-orange-inv">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16">
    <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
</svg>
<span class="ms-2 fs-6">Google</span>
</a>

相关配置（settings.py） #

# Authentication Backends
AUTHENTICATION_BACKENDS = (
    'social_core.backends.google.GoogleOAuth2',
    'django.contrib.auth.backends.ModelBackend',
)

# Google OAuth2
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = config('GOOGLE_CLIENT_ID') + '.apps.googleusercontent.com'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = config('GOOGLE_CLIENT_SECRET')

SOCIAL_AUTH_URL_NAMESPACE = 'social'

LOGIN_REDIRECT_URL = '/dashboard/'
LOGOUT_REDIRECT_URL = '/'

主urls.py代码 #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    path('', include('home.urls')),
    path('', include('users.urls')),
    path('dashboard/', include('dashboard.urls')),

    path('accounts/', include('social_django.urls', namespace='social')),
]

疑问 #

该空格问题是包的bug还是代码配置问题？如果是后者，该如何解决？

解决方案 #

这个问题大概率是你的配置/环境问题，而非包本身的bug，可按以下步骤排查：

1. 检查Google Client ID配置
   重点排查环境变量GOOGLE_CLIENT_ID是否包含前后空格。你在配置中用了config('GOOGLE_CLIENT_ID') + '.apps.googleusercontent.com'，如果环境变量值带空格，拼接后的SOCIAL_AUTH_GOOGLE_OAUTH2_KEY会包含空格，进而导致生成的授权URL参数异常。直接打印SOCIAL_AUTH_GOOGLE_OAUTH2_KEY的值确认是否存在空格。

2. 清理模板中的多余空格
   检查模板中{% url 'social:begin' 'google-oauth2' %}标签周围的换行和空格，虽然Django模板通常会处理，但极端情况下可能干扰URL生成，尝试将标签写在一行，去掉周围冗余空白。

3. 排查URL路由冲突
   暂时注释其他app的URL配置，测试是否还出现空格问题。如果问题消失，说明存在路由冲突导致URL生成异常，需调整路由顺序或路径。

4. 手动生成授权URL对比测试
   在视图中手动调用social_core的方法生成授权URL，对比模板生成的URL：

   from social_core.backends.google import GoogleOAuth2
   from django.http import HttpResponse
   
   def test_google_auth_url(request):
       backend = GoogleOAuth2(request)
       auth_url = backend.auth_url()
       print(auth_url)
       return HttpResponse(auth_url)
   

   若手动生成的URL无空格，说明模板渲染过程有问题；若仍有空格，需检查social_core版本（确认与social-auth-app-django 5.4.1兼容），或尝试更新到最新兼容版本。

5. 检查URL编码问题
   在浏览器控制台查看实际请求的完整URL，确认是redirect_uri参数本身带空格，还是参数被错误解码。用encodeURIComponent处理正确的redirect_uri，对比与生成URL的差异。

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