Django Allauth's Google Login Redirect и дизайн страницы
В настоящее время на странице входа в систему у меня есть кнопка:
<div class="d-grid gap-2">
<a href="{% provider_login_url 'google' %}" class="btn btn-danger">
<i class="fab fa-google"></i> Sign in with Google
</a>
</div>
Это перенаправляет на accounts/google/login/, а эта страница позволяет перенаправить на аутентификацию Google.
У меня две проблемы:
- Я не знаю, нужны ли эти два шага, и не вижу смысла в дополнительном шаге accounts/google/login/.
- Я не знаю, как заменить стандартный макет страницы accounts/google/login/ (если это действительно необходимо).
Отвечая на ваш первый вопрос, я действительно не думаю, что дополнительный шаг необходим. Хотя, с другой стороны, это зависит от приложения, и нет ничего плохого в том, чтобы оставить текущий вариант.
Что касается того, чтобы сделать все это на одной странице, это возможно и потребует минимального количества кода, что-то вроде этого должно работать, если все настроено правильно:
{#Other code#}
<form method="POST" action="{% url 'google_login' %}">
{% csrf_token %}
<button type="submit">GOOGLE</button>
</form>
{#Other code#}
Мы можем сразу открыть окно входа в Google, используя form action=“{% url ‘google_login’ %}”
. Если у вас в настройках есть SOCIALACCOUNT_LOGIN_ON_GET=True
, то это будет: form method=“GET”...
.
p.s. Если этот вариант вам не подходит, дайте мне знать, я могу предложить что-нибудь другое.
Отвечаю на ваши два вопроса.
- Я не знаю, нужны ли эти два шага, и я не вижу смысла в дополнительном шаге accounts/google/login/.
Ответ: По умолчанию именно так Django Allauth обрабатывает аутентификацию. Это необходимо для правильной работы процесса аутентификации. (Вы можете просмотреть сетевую активность, чтобы увидеть, что происходит на этом этапе). Если вы хотите пропустить этот шаг, вы можете попробовать переопределить стандартные URL Allauth для входа в систему. Для этого перейдите туда, где установлен Django Allauth, и подправьте код. (Я не пробовал делать это раньше, поэтому действуйте осторожно.)
2.Я не знаю, как заменить стандартный макет страницы accounts/google/login/ page (в случае, если это действительно необходимо
)Ответ: Найдите файл login.html в вашем пакете Django Allauth. Скорее всего, он находится в директории /account/providers/google/. Чтобы настроить его, выполните следующие действия:
Создайте такую структуру папок в каталоге проекта: templates/account/providers/google/ Скопируйте файл login.html из каталога установки Allauth в эту новую папку. Измените скопированный файл так, чтобы он соответствовал вашему дизайну. Как только вы поместите обновленный файл в папку templates вашего проекта, Django автоматически будет использовать его вместо стандартного.
Вы столкнулись с двумя проблемами:
Лишнее перенаправление на accounts/google/login/ перед переходом на страницу аутентификации Google. Настройка макета страницы accounts/google/login/, если это необходимо.
- Лишнее перенаправление на accounts/google/login/ Дополнительный шаг перенаправления на accounts/google/login/ является частью того, как django-allauth обрабатывает потоки социальных логинов. Эта промежуточная страница используется для инициирования процесса аутентификации OAuth в Google. Однако, если вы предпочитаете пропустить эту страницу и перейти непосредственно к Google для аутентификации, вы можете настроить django-allauth на перенаправление сразу к провайдеру аутентификации без показа промежуточной страницы.
Вот как можно изменить это поведение:
Вариант 1: Используйте URL-адрес социального аккаунта напрямую Вы можете ссылаться непосредственно на URL-адрес входа в Google вместо того, чтобы полагаться на accounts/google/login/. Для этого можно использовать URL-адрес входа провайдера без промежуточной страницы.
<div class="d-grid gap-2">
<a href="{% provider_login_url 'google' %}?next=/your-redirect-url/" class="btn btn-danger">
<i class="fab fa-google"></i> Sign in with Google
</a>
</div>
Это позволит обойти промежуточную страницу accounts/google/login/ и перейти непосредственно на страницу аутентификации Google. В качестве альтернативы, если вы хотите получить больший контроль над процессом аутентификации или дополнительными функциями, вы можете вызвать конкретный URL-адрес входа напрямую:
<a href="/accounts/social/login/?process=google" class="btn btn-danger">
<i class="fab fa-google"></i> Sign in with Google
</a>
Убедитесь, что URL-адрес перенаправления (next=/your-redirect-url/) соответствует тому, куда вы хотите перевести пользователя после успешной аутентификации.
- Настройка макета страницы accounts/google/login/ Если вам все еще нужна промежуточная страница (accounts/google/login/), но вы хотите настроить ее макет, вы можете переопределить шаблоны, используемые django-allauth.
Вот как можно настроить страницу accounts/google/login/:
Переопределите шаблон для django-allauth:
Соответствующий шаблон - это, скорее всего, account/social/login.html или account/social/ (в зависимости от версии). Вы можете скопировать этот шаблон в свой проект и изменить его в соответствии с желаемым макетом.
Создайте файл templates/account/social/login.html (если он еще не существует в вашем проекте). Измените HTML-структуру в соответствии с вашими потребностями. Например, вы можете изменить стили кнопок, добавить пользовательский текст или интегрировать другие элементы дизайна. Пример переопределения шаблона:
<!-- templates/account/social/login.html -->
<div class="container">
<h2 class="text-center">Sign in with Google</h2>
<a href="{% provider_login_url 'google' %}" class="btn btn-danger">
<i class="fab fa-google"></i> Continue with Google
</a>
</div>
Убедитесь, что шаблон найден:
Убедитесь, что ваши пользовательские шаблоны правильно настроены в файле settings.py. Например, убедитесь, что в настройках TEMPLATES указаны соответствующие пути:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Это позволит вам создать собственный login.html для входа в Google, чтобы страница больше не выглядела как макет django-allauth по умолчанию.