Авторизация через социальные сети
В данной инструкции мы рассмотрим, как настроить авторизацию через следующие социальные сети:
Чтобы настроить авторизацию для пользователей через социальные сети, в главном меню панели управления сайтом выберите раздел «Пользователи»:
В левой колонке выберите пункт «Авторизация через соцсети»:
Чтобы включить/отключить авторизацию, передвиньте переключатель напротив нужной социальной сети. По умолчанию включены все социальные сети, и для выполнения входа на сайт ничего дополнительно делать не требуется.
Если вы хотите создать свое приложение для авторизации пользователей, воспользуйтесь инструкциями ниже. При запросе разрешения на авторизацию это позволит вывести свой логотип и название сайта вместо значений по умолчанию:
ВКонтакте
Нажмите на кнопку «Создать приложение». Откроется страница входа в аккаунт «ВКонтакте»:
Выполните вход. Если вы уже авторизованы, вы сразу увидите страницу «Создание приложения»:
Придумайте название приложения и нажмите на кнопку «Создать». На новой странице укажите подробную информацию о приложении. Она будет отображаться при регистрации пользователей (запросе разрешений):
После сохранения изменений перейдите в настройки приложения и скопируйте «ID приложения» и «Защищенный ключ»:
Скопированные значения укажите в панели управления сайтом и нажмите на кнопку «Сохранить»:
Теперь вернитесь к настройкам приложения на сайте «ВКонтакте» и заполните данные:
- «Open API» — включен;
- «Адрес сайта» и «Базовый домен» — ваш прикрепленный домен.
- "Состояние", переведите настройку с "Приложение отключено" в "Приложение включено и видно всем" и сохраните изменения.
Приложение готово к использованию. Выполните авторизацию с помощью социальной сети «ВКонтакте» и проверьте, как отображаются указанные в приложении данные.
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Facebook.
Затем нажмите на кнопку «Зарегистрироваться»:
Примите условия и нажмите «Далее»:
Для завершения регистрации, вам потребуется выбрать категорию, которая более точно описывает род вашей деятельности:
И переходим по кнопке "Создать свое первое приложение":
или же как вариант, просто заново перейти на страницу создания приложения https://developers.facebook.com/apps/ и нажать на кнопку "Создать приложение":
Заполните анкету приложения и нажмите на кнопку «Создание приложения»:
После заполнения анкетных данных и создания приложения, вы попадаете на главную страницу "Добавление продуктов приложения":
в первой строке вам стоит выбрать "Вход через Facebook", нажмите кнопку "Настроить".
Далее вас перенаправит на страницу где будет сообщаться: Воспользуйтесь функцией быстрого начала работы, чтобы добавить Вход через Facebook в ваше приложение. Для начала выберите платформу приложения.
На данном этапе выбираем третью иконку в списке "Веб" где отображено www:
Укажите свой сайт и нажмите кнопку сохранить.
Далее в боковой колонке меню с левой стороны, выберите вкладку Настройки - "Основное":
- В вкладке "Домены приложений", добавьте свой домен вида sitename.ru .
- В вкладке "URL-адрес политики конфиденциальности", добавьте адрес: http://sitename.ru/index/policy
- В вкладке "URL-адрес Пользовательского соглашения", добавьте адрес: http://sitename.ru/index/agreement=1
- В вкладке "Категория", выбрать Бизнес и страницы.
- В пункте где требуется "Значок приложения (1024 × 1024)", можете загрузить иконку uCoz.
- В пункте "Назначение приложения", выбрать "Вы или принадлежащая вам компания"
- В пункте "Удаление данных пользователей" - URL запроса на удаление данных, прописать ссылку на страницу с формой обратной связи. Обычно это стандартная страница sitename.ru/index/0-3 но если у вас другая, укажите ее.
далее сохраните изменения и на данном этапе готово практически.
Примечание! В рекомендациях выше в адресах ссылок упоминается домен sitename.ru, вам нужно заменить этот адрес на ваш домен.
Из панели управления скопируйте «Redirect URIs»:
После проделанных настроек и сохранения изменений, обновите страницу приложения, в левой боковой колонке вы увидите вкладку "Товары".
В данной вкладке, вы увидите пункт "Вход через Facebook", жмем по данному пункту и выбираем вкладку "Настройки", найти пункт "Действительные URI перенаправления для OAuth", вставьте в нем урл с вашего приложения (у вас в панели управления сайтом), то что прописано в поле "Valid OAuth redirect URIs".
Не забудьте сохранить изменения.
После возвращаемся на главную приложения которое мы создали в вкладку Настройки - Основное:
Скопируйте «Идентификатор приложения» и «Секрет приложения».
Их нужно указать в панели управления сайтом в полях «Client ID» и «Client secret» соответственно:
Завершающий этап, нам нужно опубликовать наше приложение с режима разработки в режим готовности к использованию:
Приложение готово к использованию. Пример авторизации с помощью нового приложения:
Вам будет сообщено, что данные с фейсбука получены успешно, но нужно завершить регистрацию:
заполняем оставшиеся поля email и соглашаемся с всем политиками и с обработкой данных.
Примечание: Перед тем как добавлять приложение, получите для своего домена SSL сертификат. Ваш сайт должен работать полностью по SSL без использования устаревшего протокола передачи данных http. Если не получить SSL сертификат для домена, фейсбук просто не позволит вам авторизоваться на сайте с помощью созданного приложения, будет сообщать, что не завершены настройки безопасности.
Яндекс
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет «Яндекса». После авторизации заполните форму нового приложения:
Установите следующие права для приложения:
- Доступ к дате рождения;
- Доступ к адресу электронной почты;
- Доступ к логину, имени и фамилии, полу.
- Доступ к портрету пользователя
Скопируйте из панели управления сайтом «Callback URI», укажите его в поле «Callback URL» приложения и нажмите на кнопку «Создать приложение в самом низу страницы»:
Скопируйте ID и пароль приложения:
Укажите эти данные в панели управления сайтом:
Приложение готово к использованию.
Google+
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Google+.
На открывшейся странице выберите «Google+ API»:
Чтобы включить API, нужно создать проект. Нажмите на кнопку «Создать»:
Заполните анкету проекта, примите условия использования, после этого нажмите на кнопку «Создать»:
Теперь можно включить API:
И приступить к созданию приложения:
Создание приложения состоит из четырех шагов:
1. Выбираем тип учетных данных:
2. Создаем идентификатор клиента OAuth 2.0, указываем адрес домена и разрешенный URI перенаправления (скопированный из панели управления):
3. Заполняем информацию о приложении — она будет показана пользователю при регистрации:
- Авторизованные домены, укажите ваш домен без http и без крайнего слэша.
- Заполните поле название.
- Адрес электронной почты службы поддержки ваш email.
- Ссылка на политику конфиденциальности приложения укажите ссылку политику ваш-сайт/index/policy=1 соответственно вместо ваш-сайт укажите ссылку на ваш домен.
4. Нажимаем «Готово»:
Наше приложение готово к работе. Зайдем на его страницу. Для этого нажмите в левой колонке на «Учетные данные» и выберите приложение из списка:
Скопируйте идентификатор и секрет клиента, чтобы указать их в панели управления сайтом:
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Twitter. Для создания приложения потребуется ввести и подтвердить свой телефонный номер (здесь). После этого можно приступить к созданию приложения.
После перехода по кнопке "Создать приложение", вас перенаправит на страницу https://developer.twitter.com/en/apps где вы увидите кнопку "Create an app", жмем по ней:
После этого, вам еще предстоит пройти процесс подачи запроса на получение прав разработчика для своего аккаунта (конечно если вы еще не получили). Вам придется отправить небольшой запрос, объяснить для чего вам доступ к API твиттера и ожидать одобрения от техподдержки. Лишь после одобрения вы сможете создать свое первое приложение, пока будете ждать, вы не сможете создать свое приложение для авторизации через твиттер у себя на сайте.
Заполните анкету приложения:
- App name - придумайте название для вашего приложения.
- Application description - краткое описание для вашего приложения.
- Website URL - введите полную ссылку на ваш домен (ссылка на ваш сайт).
- Enable Sign in with Twitter - обязательно отметить данный пункт, он активирует доступ к авторизации у вас на сайте через твиттер.
- Callback URLs - вставить урл с поля "Callback URL" который у вас прописан в приложении в панели управления сайтом. У меня этот урл выглядит так https://freedomen.net/twitter
- Tell us how this app will be used - заполните это поле обязательно на английском, нужно описать кратко для чего вы создаете приложение и как будете его использовать. Кратко опишите, что будете использовать для авторизации пользователей на сайте с помощью Твиттера.
Создаем приложение нажав на кнопку "Create":
Примите соглашение и нажмите «Create your Twitter application».
На странице приложения откройте вкладку «Keys and tokens», чтобы скопировать «API Key» и «API secret key»:
Ниже вы найдете пункт «Access token & access token secret», после нажатия на кнопку "Create" будут созданы «Access Token» и «Access Token Secret»:
Заполните полученными данными поля в панели управления, после чего приложение будет готово к использованию:
Telegram
Для начала настройки авторизации через Telegram, вам нужно выполнить следующее:
После если все выполнили корректно, перейдите на страницу бота: https://t.me/botfather в поле ввода сообщения начните ввод с символа / и введите без пробелов setdomain
Выберите найденный вариант в поиске и нажмите enter, после вам предложит выбрать созданного вами бота, который вы подключили в разделе мессенджеры у вас на сайте.
выбираем именно того бота, которого вы настроили в разделе мессенджеры в панели управления.
И добавляем ваш домен как у нас на примере для нашего домена, но вам нужно ввести свой.
Если все сделано правильно, вам сообщит: Success! Domain updated. /help.
Далее можно проверить авторизацию на сайте с помощью Telegram:
Важно, чтобы вы корректно заходили как администратор при входе через телеграмм у себя на сайте, вам нужно перейти в ваш профиль и настроить привязку телеграмм к вашему UID аккаунту.
