В этой статье я раскажу, как сделать у себя на сайте авторизацию с помощью социальных сетей и других сервисов.

На сайте заказчика нужно было сделать авторизацию пользователей через соцсети после чего пользователь мог оставлять свои комментарии.

Что нам понадобиться:

1. Библиотека Django-Allauth
2. Django Bootstrap 3
3. Социальные кнопки или эти
4. Стили для социальных кнопок

Устанавливаем Django-Allauth согласно инструкции.

pip install django-allauth

В файле Settings.py добавляем все необходимые строки из инструкции и делаем migrate.

Устанавливаем bootstrap и подключаем его в главный шаблон вашего сайта - примерно так.

<link type="text/css" rel="stylesheet" href="{% static 'odrova/bootstrap/css/bootstrap.min.css' %}">

Далее скачиваем социальные кнопки, кидаем распакованый архив в папку static и подключаем в главном шаблоне - примерно так.

<link type="text/css" rel="stylesheet" href="{% static 'odrova/bootstrap-social/bootstrap-social.css' %}">

Далее, скачиваем стили для социальных кнопок и иконок, распаковываем и кидаем в папку static и подключаем в главном шаблоне - примерно так.

<link type="text/css" rel="stylesheet" href="{% static 'odrova/font-awesome/css/font-awesome.css' %}">

Заходим в админку сайта и там должен быть раздел SOCIAL ACCOUNTS.

Чтоб добавить какое либо приложение, его нужно выбрать из списка, которыей находится в инструкции в разделе install. Далее буду показывать на примере Вконтакте.

Добавляем в наш settings.py вконтакте

INSTALLED_APPS = (
    ...
    # The following apps are required:
    'django.contrib.auth',
    'django.contrib.sites',

    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # ... include the providers you want to enable:
    'allauth.socialaccount.providers.vk',

Далее в админке сайта заходим в социальные приложения и добавляем VK. Но, чтоб его добавить нужно получить id и секретный ключ. Как это сделать, можно посмотреть в инструкции в разделе provaders. В разделе providers находим vk и там будут ссылки на регистрацию своего api.

VK
App registration
    https://vk.com/dev
Development callback URL (“Site address”)
    http://localhost

Переходим по этому адресу https://vk.com/dev и создаем новое приложение. В конечном итоге на выходе у вас должно получиться как у меня на скриншоте ниже. Вы получаете id и секретный ключ.

Далее в админке сайта создаем приложение VK, где и вставляем свой id и секретный ключ.

Ну и в шаблоне выводим примерно так.

  <a class="btn btn-social-icon btn-sm btn-vk" href="{% provider_login_url "vk" method="oauth2" %}">
    <span class="fa fa-vk"></span>
  </a>

Если у вас остались какие либо вопросы, можете писать тут в комментариях.

Комментарии могут оставлять только зарегистрированые пользователи!