Небольшой how-to по созданию приложений в популярных соцсетях для авторизации пользователей.
На данный момент существует множество способов реализации авторизации посредством социальных сетей. Не секрет, что существуют прокси-сервисы, вроде loginza или ulogin, для упрощения разработки социальной авторизации, и вы можете их смело использовать в своих проектах, однако иногда возможность использовать провайдеров отсутствует и вы сталкиваетесь с API соцсетей лицом-к-лицу.
Вконтакте
Создать приложение ВК достаточно просто. Для создания нового приложения, нужно воспользоваться пунктом левого меню "Управление " (если по какой-то причине у вас этого нет — вот прямая ссылка https://vk.com/editapp?act=create):
ВК предоставляет три типа приложений "Standalone", "Веб-сайт" и "Встраиваемое приложение", подробнее о типах приложений можно прочитать в официальной документации , нам же для авторизации, нужно выбрать "Веб-сайт".
После выбора этого пункта, система потребует также ввести адрес сайта и базовый домен. При необходимости эти параметры можно будет изменить в дальнейшем.
Доверенный redirect URI, это пути, на которые ВКонтакте разрешено перенаправлять пользователя в процессе авторизации. URI передаётся сети в процессе авторизации с вашего сайта.
Эти пути зависят от используемой вами библиотеки, но как правило, URL авторизации и redirect URI — одни и те же (например, в модуле opencart 1.5 social login это сделано именно так ).
Facebook предоставляет достаточно удобный интерфейс для создания приложений. Для реализации приложения, Вам нужно перейти в раздел для разработчиков и создать новое приложение:
Система требует ввести ID приложения, это название. С названием не переусердствуйте — у Facebook есть ограничение на количество символов в названии приложения.
Приложение создано, теперь приступаем к настройке. Сперва нужно подключить к приложению возможность авторизации.
Для этого на странице "Добавить продукт ", выбираем "Вход через Facebook " и кликаем по кнопке "Настроить ":
Подобно ВКонтакте, потребуется указать тип вашего приложения. Для нас актуален пункт "Веб ":
После этих манипуляций, в левом меню, у вас появится новый продукт "Вход через Facebook ", выбираем пункт "настройки " и вписываем пути в поле "Действительные URL-адреса для перенаправления OAuth ".
Когда это сделано, переходим в настройки приложения:
В этом разделе вы можете получить всю необходимую информацию для доступа к API, а именно Идентификатор приложения и Секретный ключ приложения :
Честно говоря, с API щебетальни, у меня ранее часто возникали непонятные проблемы, но сейчас, кажется, у них всё более менее стабилизировалось.
Для создания нового приложения переходим в раздел для разработчиков и кликаем по "Create New App ". Система потребует ввести основную информацию о приложении и подтвердить согласие с условиями предоставления сервисов.
После того, как вы это заполните — перед вами откроется страница настроек приложения:
Если вашему приложению требуется получать email пользователя, то переходим в раздел Permissions и ставим галочку "Request email addresses from users ". Также, тут можно выставить права для приложения — нам для авторизации достаточно прав на чтение "Read only ".
Для приложений, взаимодействующих с API Twitter, как правило, требуется три элемента авторизации: Consumer key, consumer secret и AppID.
Первые два находятся прямо на этой странице, а вот AppID нужно скопировать из строки браузера (число, между app/ и /keys ):
Одноклассники
Регистрация приложения в ok.ru не отличается сложностью, но тут есть несколько нюансов.
Нюанс #1: стать разработчиком на ok.ru
Если вы в первый раз имеете дело с API одноклассников, то имейте в виду — сперва вам необходимо активировать режим разработчика. Делается это на странице https://ok.ru/devaccess .
После того, как вы получите права разработчика, вы сможете создать своё первое приложение.
Нюанс #2: где мои приложения?
В одноклассниках все приложения лежат в разделе игр. Т.е. если у вас нет прямой ссылки в список приложений — переходим в свой профиль, выбираем раздел "игры ", переходим в подраздел "мои загруженные "
Настройка приложения в одноклассниках в разы проще — вам всего лишь нужно указать список разрешённых redirect_url и выставить приложению нужные права. При создании приложения, все необходимые ключи и идентификаторы будут отправлены вам на почту.
И вот тут мы подходим к наиболее интересному нюансу API этой соцсети. Разработчики Одноклассников очень бережно относятся к своим пользователям, поэтому не дают доступ к email кому попало.
Нюанс #3: как получить права на чтение email
Для получения прав к чтению email адреса пользователя, нужно запросить эту пермиссию у тех.поддержки API одноклассников. В письме кратко поясните, в каких целях собираетесь использовать email и укажите ID ваших приложений.
Ответ, по моему опыту, приходит от 2 до 24 часов, поэтому если у вас несколько приложений, проще заранее создать их и запросить пермиссию одним письмом для всех сразу.
Пакетный запрос прав
К слову, AppID приложения, аналогично Твиттеру, берётся из URL адресной строки браузера:
Instagram (бонус)
Во-первых, скорее всего, мало кто будет этим пользоваться, во-вторых социальные приложения в инсте очень жёстко регулируются и вывести своё приложение из sandbox режима бывает довольно проблематично, ну и в-третьих, API обители селфаков может банально оказаться несовместимым с ожиданиями вашего приложения.
На заметку
Вы не сможете получить email пользователя из instagram API. Если ваше приложение требует использование email, то придётся отказаться от авторизации через instagram!
Тем не менее, для создания нового приложения переходим в раздел для разработчиков и выбираем пункт "Manage Clients ":
На странице кликаем по "Register a New Client " и заполняем требуемые поля:
В поле Valid redirect URIs вбиваем через пробел список разрешённых к редиректу URL, указываем Company name, Contact Email и ссылку на Privacy Policy на вашем сайте. Заолнять поля сразу необязательно, но без этих данных, вы не сможете отправить приложение на модерацию.
Пока приложение находится в режиме песочницы (sandbox mode ), у вас есть полный доступ ко всем API методам, но с одним ограничением — вы не сможете получать какую-либо персональную информацию. После того, как вы закончите разработку и отладку вашего приложения, вам будет необходимо отправить приложение на модерацию.
Отправка на модерацию производится в разделе "Permissions ", рекомендую перед этим очень внимательно ознакомиться с правилами создания запросов на модерацию в
Уже достаточно давно многие сайты предоставляют наряду со стандартной авторизацией, авторизацию через социальные сети и веб-сервисы. Перед вами стоит выбор:
- Пройти относительно длинный путь регистрации - ввод email/пароля/капчи и активация по email.
- Просто нажать на иконку социальной сети, в которой у вас заведён аккаунт, и подтвердить доступ.
Но не всё так радужно, как может показаться на первый взгляд. Выделим положительные и негативные стороны социальной авторизации с учётом того, что мы собираемся полностью отказаться от регистрации по комбинации email/пароль.
Достоинства:
- Быстрая авторизация на сайте.
- Данные о пользователе от провайдера авторизации.
- Отсутствие паролей.
- Отсутствие активации аккаунта.
- Единственная форма - форма авторизации.
- Некоторые провайдеры авторизации не отдают email.
- Разный формат предоставляемых данных о пользователе.
- Предпочтения аудитории.
- Можно забыть через какой сервис проходил авторизацию.
С достоинствами этого подхода всё ясно. Нас же больше интересуют недостатки и пути их решения.
Недостатки
Некоторые провайдеры авторизации не отдают email
Да, самая важная информация, которую нам надо знать о пользователе, у некоторых провайдеров может быть недоступна. В частности Вконтакте и Одноклассники в общедоступном API не отдают его. Facebook и Google более лояльно относятся к email адресу и с помощью определённых разрешений успешно вернут вам эту информацию.Решение:
- Одно из популярных решений проблемы - просто спросить его у пользователя после авторизации. Это добавит дополнительный диалог и придётся делать процедуру активации.
- В зависимости от целевой аудитории отказаться от провайдеров авторизации, которые не отдают email.
- Не использовать электронный адрес. Опять же не везде можно так легко отказаться от практически единственного средства обратной связи с пользователем. Допустим соц. сеть Вконтакте использует для регистрации номер мобильного телефона. Тут нужно подумать о том - как пользователь восстановит доступ к сайту, если он удалит аккаунт в социальной сети.
Разный формат предоставляемых данных о пользователе
Иногда требуется знать о пользователе немного больше, чем просто идентификатор в соц. сети. К таким данным могут относиться: имя, фамилия, ник, пол, аватар, дата рождения. Так как протоколы OAuth и OpenID не предназначены для получения каких-либо данных о пользователе, то придётся использовать API каждого конкретного сервиса и возвращаемые данные будут везде разные. В частности провайдеры авторизации Google, Вконтакте, Facebook и Одноклассники предоставляют все перечисленные выше данные. Осталось их только обработать.Решение: если очень нужны дополнительные данные о пользователе - сделайте их запрос у сервиса авторизации. Если нужно ещё более специфичные данные - попросите пользователя ввести их самостоятельно после авторизации.
Предпочтения аудитории
Ну, вот мы и добрались до самого проблемного вопроса - а не отобьёт ли такой отказ от стандартной регистрации вашу целевую аудиторию? Моё мнение по этому поводу такое: даже если человек наотрез не хочет проходить авторизацию через социальные сервисы, но альтернатив вашему сервису нет, то он в конечном итоге сдастся. Я же лично придерживаюсь такого алгоритма: если я планирую пользоваться каким-то конкретным сервисом в будущем, то я обязательно регистрируюсь там через логин и пароль. Если же на сайте не будет такой возможности, то я буду авторизоваться через соц. сети.Даже если пользователя нет в социальных сетях, то у него по любому должен быть почтовый аккаунт gmail, mail.ru или других сервисов. Следовательно, случай, когда у пользователя просто нет ни одного аккаунта у предоставляемых сервисов авторизации, маловероятен.
Можно забыть через какой сервис проходил авторизацию
Если ваш ресурс даёт возможность авторизоваться через over9000 провайдеров, а у пользователя есть как минимум 2 аккаунта у этих провайдеров, то он может просто забыть каким конкретно способом он входил на сайт. В случае ошибки будет создана никому не нужная запись о новой регистрации в БД.Решение: записать в cookies сервис авторизации и выделять его на странице входа. Возможно, это создаёт какую-то угрозу безопасности, но я не могу сходу придумать, как можно серьёзно этим воспользоваться.
Заключение
Идея отказа от обычной регистрации очень соблазнительна, но всё зависит от того сможете ли вы избавиться от описанных проблем.P.S. Немного статистики от uLogin можно прочитать
Подавляющее большинство сайтов сегодня вместе с основной системой авторизации предоставляют пользователям возможность авторизоваться через социальные сети. Такой подход очень удобен для посетителя сайта, так как ему вообще не нужно заполнять никаких полей. Вместо этого достаточно выбрать кнопку социальной сети, в которой у него уже есть профиль, и за три щелчка мышкой стать авторизованным пользователем сайта.
Как это работает
Возле формы авторизации под надписью «Войти при помощи» установлены кнопки самых популярных сетей. У большинства пользователей есть профиль в той или иной социальной сети. Посетитель выбирает кнопку с иконкой сервиса, с помощью которого он хотел бы зарегистрироваться на сайте.
После того, как посетитель нажал соответствующую кнопку, на экране монитора появляется окно, в котором Facebook запрашивает у пользователя разрешение на то, чтобы сайт, с которого проводится авторизация, получил необходимые данные. Для того, чтобы выразить свое согласие, пользователю достаточно нажать на соответствующую кнопку. Когда посетитель дает свое разрешение данные из социальной сети передаются на сайт и записываются в профиле пользователя.
Теперь посетитель является зарегистрированным пользователем Вашего интернет-магазина.
Сервисы авторизации
С каждым годом в Интернете становится все больше и больше социальных сетей. Чтобы веб-мастера могли дать возможность пользователям регистрироваться через различные социальные сети, существуют специальные службы, предоставляющие скрипты (мини-программы), которые веб-мастер устанавливает на свой сайт. Таким образом, посетители его сайта могут авторизоваться используя профиль одной из самых популярных социальных сетей.
Самые популярные из таких служб - Loginza и ULogin .
Достоинства метода:
- Легкая интеграция.
- Экономия времени. Устанавливая единожды скрипт одной из этих служб, Вы автоматически делаете возможной авторизацию сразу через множество социальных сетей.
Недостатки:
- Данные авторизованного пользователя передаются не Вам, а службе, которая предоставила скрипт.
- Вы лишены возможности «настраивать» свое взаимодействие с пользователями. Например, предоставляя авторизацию через сеть Вконтакте, Вы не можете «привязать» пользователя к своей группе или публичной странице в этой сети.
- Вы используете преимущества социальных сетей лишь частично.
Создание собственного приложения в социальной сети
Для того, чтобы Ваш сайт и социальная сеть могли обмениваться данными, необходимо каким-то образом «обозначить» присутствие своего сайта в социальной сети. Для этого, в социальных сервисах существует такое понятие, как регистрация приложения. Зарегистрировав приложение, Вы связываете свой сайт с социальной сетью. После этого получаете авторизационные данные приложения, которые необходимо использовать для настройки системы управления сайтов. Теперь пользователи могут проходить авторизацию через данную социальную сеть.
Часто вашим клиентам может быть неудобно запоминать свой пароль и авторизоваться с ним при оформлении очередного заказа. В то же время, большинство из них имеют аккаунты в Facebook и/или ВКонтакте, почту на Gmail или Яндекс.Почте.
В таком случае вы можете делегировать задачу аутентификации пользователя этим сервисам. Скорее всего ваши клиенты уже залогинены в одном из них, поэтому им вообще не придется вводить свой пароль, только согласиться на передачу некоторых их персональных данных, таких как email, вам.
Более подробно о протоколе такой аутентификации вы можете ознакомиться, например, на википедии , мы же в этой статье рассмотрим технические детали реализации подобного механизма на InSales.
- Регистрация интернет-магазина в социальной сети и получение специальных ключей;
- Настройка социальной сети в интернет-магазине.
Важно : интернет-магазин должен быть с , то есть, его адрес должен начинаться на https
Раздел "Приложения для авторизации через соцсети"
Для того, чтобы сделать авторизацию через какой-либо упомянутый выше сайт вам необходимо добавить данные соответствующего приложения на платформе выбранного вами сайта (условимся называть этот сайт провайдером авторизации или просто провайдером).
Сначала вам необходимо перейти в необходимый раздел БО:
Нажав кнопку "Добавить" вы увидите форму добавления данных о приложении:
После указания всех необходимых данных кнопка авторизации через данного провайдера сама появится у вас на сайте.
Важно: вы можете добавить не более одного приложения каждого провайдера.
Давайте теперь рассмотрим подробнее как же все-таки создавать подобные приложения у самих провайдеров.
Вконтакте
Важно : для создания приложения ВКонтакте у вас должен быть аккаунт в этой социальной сети.
Yandex
Mail.ru
Многие сайты и приложения требуют от пользователей регистрации. Иногда они предлагают выбор — зарегистрироваться или зайти с помощью одной из социальных сетей. Для пользователей это удобно — не нужно каждый раз заполнять регистрационные формы, достаточно нажать кнопку входа и подтвердить доступ.
Как работает вход через соцсеть?
Очень просто: достаточно выбрать «социалку», через которую вы хотите зарегистрироваться, нажать на соответствующую кнопку, а потом подтвердить разрешение на доступ к вашим личным данным. Чаще всего сайт или приложение сами предлагают несколько социальных сетей на выбор. После этого все нужные данные поступят на сайт, и поля в форме регистрации будут заполнены автоматически.
При этом сайт не «узнает» пароль от вашего аккаунта в социальной сети.
Нужно отметить, что при этом сайт не «узнает» пароль от вашего аккаунта в социальной сети — передается только информация из профиля, которая необходима для регистрации . Если сайт кажется вам подозрительным и давать ему доступ к данным вы не хотите, просто выберите обычную регистрацию.
Обратите внимание
Иногда приложения и сайты запрашивают разрешение не только на регистрационные данные из социальных сетей, но и на доступ к списку ваших друзей или публикацию от вашего имени в ленте событий. В таких случаях вы часто можете выбрать, какие действия вы разрешаете, а какие блокируете. Если однажды вы передумаете и решите, что позволили сайту слишком много, вы всегда можете заблокировать доступ к данным социальной сети в настройках этого сайта или приложения.
Многие организации и производители стараются максимально войти в жизнь пользователей, и социальные сети — один из путей.
В целом это удобный способ сэкономить время и не вбивать заново все свои данные, которых бывает много для регистрации. При этом некоторые сайты дают возможность не только заполнить свой аккаунт, но и действовать от него, например, в комментариях, заодно отмечать публикации с этого сайта у себя на странице социальной сети . Часто подобной социальной авторизацией пользуются спортивные приложения и сайты, где после авторизации можно найти друзей, следить за их спортивными успехами, делиться с ними достижениями, соревноваться. Многие организации и производители стараются максимально войти в жизнь пользователей, и социальные сети — один из путей.
Технически это очень распространенное решение, но всегда надо доверять только проверенным сайтам, внимательно обращать внимание на предупреждения и инструкции при авторизации.
По материалам службы поддержки Агента Mail.Ru
