Главная » Блог » Создание приложений для компонента ZАвторизация

Создание приложений для компонента ZАвторизация
18 марта 2019

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

ВНИМАНИЕ! Все скриншоты представлены в качестве примера и понимания. Домен сайта надо менять, разумеется, на свой.
Ваш сайт должен работать по протоколу https. 

Вконтакте VK

Сперва нужно настроить приложение во вконтакте. Создаем приложение по ссылке https://vk.com/editapp?act=create

Заполняем по аналогии со скриншотом ниже. Давайте такое название, которое будет ассоциироваться у пользователя с вашим сайтом.

Жмем Подключить сайт. Приложение создастся, вы будете перемещены в список ваших приложений, открывается по ссылке https://vk.com/apps?act=manage

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

Откроется страница типа такой

С этой страницы в настройки нам понадобится id приложения и защищенный ключ.

Одноклассники OK

Процесс создания приложения для одноклассников подробно описан в документации на странице https://apiok.ru/dev/app/create В момент заполнения полей формы, выбирайте пункт 2, т.е. Подключить Oauth Заполненная форма приложения должна выглядеть по аналогии со скриншотом ниже

Жмете Сохранить и получаете на почту все ключи (публичный и секретный) и ID приложения. Получать токены доступа для создателя приложения не нужно.

Facebook Фейсбук FB

Тут с настройками немного сложнее. Идем по ссылке https://developers.facebook.com/apps/ Сперва нужно зарегистрироваться в качестве разработчика, для этого надо будет всего-навсего поделиться номер мобильного.

После этого вам будет предложение создать свое первое приложение. Давайте такое название, которое будет ассоциироваться у пользователя с вашим сайтом.

После откроется список возможностей для вашего приложения. Нас интересует Авторизация Oauth. Жмем и настройки выставляем следующим образом

Сохраняем. Пытаемся включить наше приложение (зеленый ползунок справа, напротив id приложения). Facebook сообщит, что мы не указали ссылку на политику конфиденциальности. Переходим по предложенной ссылке в общие настройки приложения, указываем ссылку. Включаем приложение. Если приложение все еще не включается, читайте внимательно, что не нравится facebook в настройках вашего приложения. С этой страницы для настройки нам понадобится ID приложения и секрет.

Яндекс Yandex YA

Первоначально надо создать приложение. Идем по ссылке https://oauth.yandex.ru/client/new

Дайте понятное пользователю Название приложению, заполните Ссылка на сайт приложения, поставьте галочку Веб-сервисы, по аналогии укажите callback URL


Укажите права доступа к API паспорта, как на скриншоте, т.е. доступ к е-майл, логин, портрет


В самом низу нажмите создать. Вас переместит на страницу с данными приложения. Запишите ID. Его надо указать в настройках компонента. В дальнейшем созданное вами приложение будет доступно по ссылке https://oauth.yandex.ru/

Гугл Google GL

Создадим приложение. Для этого идем по ссылке https://console.developers.google.com/ в консоль разработчиков Google.

Жмем Create Project

На открывшейся странице даем проекту название

Затем через меню открываем API и сервисы, там Панель управления, и попадаем на страницу https://console.developers.google.com/apis/dashboard

На открывшейся странице слева выбираем Учетные данные, затем справа Окно запроса доступа OAuth

В этом окне надо указать: название приложения, выбрать адрес электронной почты службы поддержки, домен в списке авторизованных доменов


Жмем сохранить

Вас переместит на вкладку Учетные данные. На вкладке создайте учетные данные. Выберите вариант «Идентификатор клиента OAuth».


В открывшемся окне выберите "Веб-приложение", дайте ему название (понятное пользователю) и в самом низу в списке разрешенные URL перенаправления укажите https://bergorod.ru/zauth/gl заменив bergorod.ru на свой домен

Жмем Создать

В открывшемся окне скопируйте значения «Ваш идентификатор клиента» и «Ваш секрет клиента». Их надо указать в настройках компонента.

Ожидайте, пока Состояние подтверждения сменится на подтверждено. У неподтвержденного приложения лимит на 100 запросов к апи.

Проверять Состояние подтверждения можно так:

1. выбираем проект
2. в меню слева выбираем API и сервисы, там Панель управления
3. слева выбираем Учетные данные, затем справа Окно запроса доступа OAuth