使用Django Allauth集成Instagram登录时出现无效重定向URI错误

已完成的配置步骤 #

• 已创建并配置 Instagram Basic Display API 应用，设置了授权、取消授权和删除的重定向 URI
• 配置 ngrok 提供 HTTPS 访问，域名：https://6112-196-179-81-60.ngrok-free.app
• 创建并确认了 Instagram 测试用户
• 成功集成 Google 第三方登录，流程正常

Django 项目配置 #

settings.py 关键配置 #

INSTALLED_APPS = [
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.instagram',
]

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {'access_type': 'online'}
    },
    'instagram': {
        'APPS': [
            {
                'client_id': '463389002.....',
                'secret': 'd34b120.....',
                'redirect_uri': 'https://6112-196-179-81-60.ngrok-free.app/account/oauth/instagram/login/callback/',
            },
        ],
        'SCOPE': [
            'user_profile',
        ],
    }
}

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend'
]

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:8000',
    'https://6112-196-179-81-60.ngrok-free.app',
]

ALLOWED_HOSTS = [
    'localhost',
    '127.0.0.1:8000',
    '6112-196-179-81-60.ngrok-free.app',
]

CORS_ORIGIN_WHITELIST = [
    'http://localhost:8000',
    'https://6112-196-179-81-60.ngrok-free.app',
]

urls.py 配置 #

urlpatterns = [
         path('account/oauth/', include('allauth.urls')),
]

前端登录按钮配置（home.html） #

{% load socialaccount %}
<div>
    <form id="instagram_form" action="{% provider_login_url 'instagram' %}?next=/" method="post">
        {% csrf_token %}
    </form>
    <a href="javascript:instagram_auth()"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    <script>
        const instagram_form = document.querySelector('#instagram_form');
        function instagram_auth() {
            instagram_form.submit()
        }
    </script>
</div>

遇到的问题 #

点击 Instagram 登录按钮后，跳转至 Instagram 授权页面时提示错误：

Invalid Request: Request parameters are invalid: Invalid redirect_uri

已尝试查阅 Allauth 文档、各类教程及相关问题，均未解决，求排查方案。

排查与解决建议 #

1. 核对重定向 URI 完全一致性

   • 确保 Instagram 后台配置的重定向 URI 与 Django SOCIALACCOUNT_PROVIDERS 中 redirect_uri 完全一致，包括大小写、末尾斜杠、HTTPS 协议。Instagram 对 URI 的匹配是精确匹配，任何细微差异都会导致错误。
   • 检查 ngrok 域名是否变化：ngrok 每次启动会生成新域名，若重启过 ngrok，需同步更新 Instagram 后台和 Django 配置中的域名。

2. 检查 Allauth Instagram 提供商的路由

   • Allauth 中 Instagram 的回调路由默认是 /accounts/instagram/login/callback/，而你的项目路由前缀是 account/oauth/，需确认实际回调路径是否为 https://<ngrok-domain>/account/oauth/instagram/login/callback/。可通过执行 python manage.py show_urls 查看 Django 生成的完整路由列表，确认回调 URL 正确性。

3. 验证 Instagram API 应用类型

   • 确认创建的是 Instagram Basic Display API 应用（而非 Instagram Graph API），两者的授权流程和回调配置要求不同，Graph API 适用于企业/商家账号，Basic Display API 适用于个人账号登录。

4. 检查 Scope 配置

   • Instagram Basic Display API 支持的 scope 为 user_profile 和 user_media，你的配置中仅设置了 user_profile，可尝试添加 user_media 后重新测试。

5. 清除缓存与会话

   • 清除浏览器缓存和 Django 项目缓存，避免旧的配置数据干扰：

     python manage.py clearcache
     

6. 直接构造授权 URL 测试

   • 手动构造 Instagram 授权 URL 测试，确认参数是否正确：

     https://api.instagram.com/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=user_profile&response_type=code
     

     若手动访问仍报错，说明问题出在 Instagram 后台配置或 URI 本身；若正常跳转，再排查 Allauth 是否正确传递参数。

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