root

Как установить Django-Allauth с Google без боли

В категории "Web-разработка"

Разработка Веб-сайтов, поддержка движков, веб-фреймворки и всё про них

Метки: linux, django, сайт, веб, мануал, разработка, allauth, web, инструкция, джанго

Первым делом обновляем pip: 

pip install --upgrade pip

Далее, загружаем пакет Djang-Allauth: 

pip install django-allauth

Заходим в settings.py нашего проекта и добавляем:

1. установленные приложения: 

    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',

2. Для данного пример добавляем авторизацию через Google (GMAIL API), добавляем конфигурацию авторизации через Google:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

3. Добавляем следующее:

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
)

Далее делаем миграцию:

python manage.py migrate

и запускаем веб-сервер.

Далее заходим в административную часть, в раздел Sites и добавляем единственную запись - адрес нашего сайта:

Далее, снова возвращаемся в settings.py и добавляем идентификатор сайта:

SITE_ID = 1

Далее, добавляем в urls.py проекта данные по allauth:

path('accounts/', include('allauth.urls')),

Следующим шагом мы получим ключи для работы GMAIL API, для этого перейдем на сайт: https://console.developers.google.com, создадим аккаунт и попав в Dashboard, необходимо создать новый проект:

Далее, в том же Dashboard добавляем API, для этого нажимаем на кнопку ENABLE APIS AND SERVICES и в поиске находим GMAIL API, нажимаем на него и далее нажимаем Enable API. Теперь GMAIL API появится в Dashboard > APIs & Services:

Возвращаемся в раздел APIs & Services далее в меню слева находим и открываем раздел OAuth consent screen и заполняем необходимые поля. Для разработки используем Testing status, user type: External, когда попросит добавить Scopes, то оставляем всё пустым и нажимаем Далее.

Следующим шагом добавим ключи для нашего GMAIL API, для этого перейдем в раздел Credentials и нажимем на кнопку + Create Credentials и выбираем OAUTH Client ID, далее выбиарем WEB Application, в пункте Authorized JavaScript origins добавляем адрес нашего сайта с https://

А в разделе Authorized redirect URIs добавляем такую конструкцию: https://<адрес-сайта>/accounts/google/login/callback/

Наконец мы получили заветные ключи GMAIL API. Теперь возвращаемся в административную часть нашего сайта и переходим в раздел Social Applications и создаем новую запись. В данном случае выбираем Provider: Google, client-id и secret-key копируем и вставляем в соответствующие поля.

Из Available sites переносим в Chosen sites наш единственный сайт, получится так: 

Далее переходим по адресу https://<адрес-сайта>/accounts/login и видим ссылку на Google-авторизацию:

Для того, чтобы отображались вместо надписей Auth-провайдеров изображения-кнопки с логотипом, необходимо найти файл venv\Lib\site-packages\allauth\templates\socialaccount\snippets\provider_list.html и заменить его содержимое на:

{% load socialaccount %}
{% load static %}
{% get_providers as socialaccount_providers %}

{% for provider in socialaccount_providers %}
{% if provider.id == "openid" %}
{% for brand in provider.get_brands %}
<li>
  <a title="{{brand.name}}" 
     class="socialaccount_provider {{provider.id}} {{brand.id}}" 
     href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
     >{{brand.name}}</a>
</li>
{% endfor %}
{% endif %}
  <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}" 
     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
      <img src="{% with 'img/'|add:provider.name|add:'.jpg' as image %}
      {% static image %}
     {% endwith %}" alt="{{ provider.name }}" height="50" width="300"/>
  </a>
{% endfor %}

А в каталог Static положить файл-изображение с соответствующим именем, как у Auth-провайдера.

Поделиться записью

Похожие записи:

MikroTik 3G 4G LTE: Мобильный роутер – из LTE в PPP

В данной статье хотелось бы затронуть мобильную тематику в популярной RouterOS, а именно подключение 3G/4G(LTE) модемов к роутерам компании MikroTik

Продолжить Чтение...

Запуск Django сайта на nginx + Gunicorn + SSL

Развернутая инструкция по настройке nginx, Gunicorn и SSL для вашего Django проекта в продакшене.

Продолжить Чтение...

Собираем кластер на ESXI

Кратчайшая минималистичная инструкция по сборке кластера на ESXI и немного про резервирование

Продолжить Чтение...