Авторизация пользователей через социальные сети в джанго
В этой статье я раскажу, как сделать у себя на сайте авторизацию с помощью социальных сетей и других сервисов.
На сайте заказчика нужно было сделать авторизацию пользователей через соцсети после чего пользователь мог оставлять свои комментарии.
Что нам понадобиться:
- Библиотека Django-Allauth
- Django Bootstrap 3
- Социальные кнопки или эти
- Стили для социальных кнопок
Устанавливаем 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>
Если у вас остались какие либо вопросы, можете писать тут в комментариях.
Ваши комментарии
Комментарии могут оставлять только зарегистрированые пользователи!