Аутентификация Django Allauth Instagram: Ошибка недействительного URI перенаправления

Я интегрирую Instagram в качестве стороннего варианта входа в мое приложение Django, используя Django Allauth. Я создал приложение Instagram Basic Display API и настроил ngrok для обеспечения моего сайта схемой HTTPS. Кроме того, я настроил URI перенаправления для авторизации, деавторизации и удаления в настройках приложения Instagram, как показано на изображениях ниже: картинка настроек приложения redirect uris Я также создал тестового пользователя Instagram и принял его на странице приложений и веб-сайтов instagram instagram test users В файле settings.py моего Django-проекта я настроил Allauth на использование провайдера Instagram со следующими настройками:

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',
]

Мои urlpatterns в urls.py настроены следующим образом:

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

На моей странице home.html я включил URL-адрес аутентификации Instagram следующим образом:

{% 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>

Я успешно использовал Google в процессе аутентификации с редиректными URI 'http://127.0.0.1:8000/account/oauth/google/login/callback/' и 'http://127.0.0.1:8000/'. Однако, когда я нажимаю на кнопку аутентификации Instagram, браузер перенаправляет меня на 'https://www.instagram.com/oauth/authorize/third_party/error/?message=Invalid%20Request%3A%20Request%20parameters%20are%20invalid%3A%20Invalid%20redirect_uri' с содержанием ошибки 'Invalid Request: Параметры запроса недействительны: Invalid redirect_uri'. картинка ошибки

Я перепробовал все, что можно найти в документации allauth, на других сайтах, на YouTube, в chatgpt и в других вопросах, связанных с этой проблемой, но ни один из них не помог решить проблему. смотрите картинки, чтобы лучше понять проблему и шаги, которые я сделал.

Любая помощь в решении этой проблемы будет очень признательна. Спасибо!

Вернуться на верх