Вход в личный кабинет Socialconf
Настройки приложения сохраним в ассоциативном массиве $socialConf следующего вида:
$socialConf[‘client_id’] = YOUR_CLIENT_ID;$socialConf[‘application_key’] = YOUR_APPLICATION_KEY;$socialConf[‘client_secret’] = YOUR_CLIENT_SECRET;$socialConf[‘redirect_uri’] = YOUR_REDIRECT_URI;
Далее
$usrArr
– ассоциативный массив данных пользователя.
Авторизация через социальные сети
Существует несколько способов авторизации через социальные сети.
Авторизация через соцсети appmaster.io
Сейчас на нашей платформе доступны основной модуль аутентификации и 4 модуля авторизации через сторонние сервисы:
В чем их особенность? Прежде всего, в простоте настройки. Только для модуля LinkedIn нужно указать Секрет клиента, URL перенаправления и ID клиента. Для остальных модулей достаточно ID клиента или приложения — в зависимости от модуля.
Настройка на стороне сторонних сервисов тоже несложно — достаточно зарегистрировать аккаунт разработчика, указав несколько основных параметров. Пошаговые инструкции по настройке модулей авторизации – в наших следующих статьях.
Если не хотите ждать — пишите в телеграм-чат сообщества AppMaster.io, чтобы напрямую задать вопросы нашим разработчикам.
Актуальность данных пользователя
Некоторы данные профиля пользователя могут быть изменены им самим в настройках или же api социальной сети,
при этом id пользователя останется прежнем.
Вновь настроим devise
Существует небольшой недостаток в профиле наших пользователей. Пльзователю нужно вводить текущий пароль для смены настроек. Если он зарегистрирован через один из сервисов, то он не имеет пароля, помните, мы устанавливали его в случайную строку. В Devise Wiki есть статья с тем как полностью убрать пароль.
Но у себя мы хотим оставить пароль только для локальных пользователей. Для остальных пользователей разрешим менять свой профить без использования пароля. В дополнение, они смогут установить локальный пароль если захотят. Это достигается путем модификации метода update для контроллера регистрации:
Код использует дополнительное поле в пользовательской модели, вы можете вернуть и добавить его в миграцию (
t.boolean :haslocalpw, :null => false, :default => true
), измените модель для разрешения массового присваивания для этого поля, измените вьюшку чтобы скрыть поле для ввода текущего пароля если haslocalpw ложно и изменим create метод нашего service контроллера для установки этого поля при создании пользователя:
app/controllers/services_controller.rb
Гостевой и личный профили пользователя
Приложение может получить доступ к информации гостевого или личного профилям пользователя в зависимости
от своих настроек и разрешений пользователя. В гостевом профиле публикуется минимум данных, доступных всем.
В личном профиле публикуется информация доступная друзьям.
Добавляем google
Наконец давайте добавим Google к списку наших сервис провайдеров. Google (и OpenID в частности) требуют постоянного хранилища. Вы можете использовать ActiveRecord или файловую систему как показано ниже. Если вы хотите разворачивать на Heroku, помните, что у вас нету доступа на запись в /tmp. Хотя, как отмечено в
, вы можете писать в ./tmp.
Две строчки конфигураций и четыре для присвоения значений из хеша — это все что нужно для добавления авторизации через Google в вашем коде. Это ли не великолепно? Достаточно Omniauth на сегодня, но если вы хотите использовать его в одном из ваших проектов, вы можете найти много ресурсов в Omniauth Wiki, также Райна Бэйтс сделал великолепные скринкасты по нему.
Задачи социальной интеграции
Сейчас большинство пользователей интернета имеют аккаунты в социальных сетях (одноклассники, фэйсбук, вконтаке и другие).
Эти социальные сети предоставляют свой api для авторизации на сторонних сайтах. Получается очень удобно имея один аккаунт
в социальной сети, им же подписываться на других ресурсах и постить понравившийся контент.
Под api (application programming interface) следует понимать набор команд (запросов, методов) и формат ответов,
предоставляемых соц. сетью разработчикам и описанных в документации.
Как это работает
Общий механизм такой:
- Пользователи нажимают на иконку конкретной социальной сети, например, Facebook или LinkedIn, в окне авторизации.
- После чего запускается приложение, передающее данные с приложения или сайта и обратно. Его работа практически незаметна — отображается лишь всплывающее сообщение с запросом на подтверждение регистрации/входа через выбранный сервис.
- После подтверждения, нажатия кнопки «Продолжить, как…», соцсеть передает ключ доступа к данным текущего профиля, в зависимости от установленных разрешений.
- Ваш ресурс, в свою очередь, запускает процесс регистрации и копирования нужных данных – но лишь тех, сбор которых заранее настроили (или которые установлены в параметрах компонента, отвечающего за авторизацию).
Недостатки регистрации через соцсети
Конечно, они тоже есть:
- Чем старше ваша целевая аудитория — тем меньше вероятность, что ее представители будут пользоваться этим видом регистрации.
- Для ресурсов, ориентированных на корпоративных клиентов, подходят далеко не все сервисы, особенно это касается развлекательных соцсетей.
- Не все провайдеры предоставят вам всю нужную информацию. Поэтому обязательно читайте документацию, проводите тесты, следите за новостями и обновлениями сервисов, через которые настроена авторизация.
- При удалении или смене аккаунтов пользователи теряют доступ к вашему ресурсу.
- Все-таки да, даже постоянные клиенты нередко забывают, через какой сервис авторизовались.
Один redirect_uri для всех соц. сетей
Поскольку все соц. сети обращаются методом GET с параметром code на страницу авторизации redirect_uri
их необходимо как-то идентифицировать.
Плагины, виджеты, модули
Варианты, отлично подходящие для решений, созданных на CMS / no-code платформах. Функция авторизации и регистрации необходима как для сайтов, так и для приложений — неважно web или mobile — поэтому даже на непопулярных платформах можно найти множество вариантов, особенно если ваше комьюнити достаточно активно.
Правила разработчиков
Какой бы вариант вы не выбрали, стоит придерживаться основных правил.
- Если данные передаются через форму на вашем сайте или обрабатываются в вашем приложении — вы несете ответственность за их сохранность.
- Условия использования и политика конфиденциальности помогут не только оградить вас от возможных неприятностей, но также добавят лояльности со стороны новых пользователей.
- Рядом с кнопкой регистрации коротко расскажите, почему вход через сторонние сервисы лучше. Придумайте бонус для клиентов, который будет дополнительной мотивацией.
- Не только соцсети. Аккаунты WhatsApp, Telegram, Amazon, Apple тоже можно использовать для регистрации на сайтах, в мобильных и веб-приложениях.
- Если подключить много вариантов авторизации — пользователи будут забывать, какой из них выбрали. Используйте популярные в вашем регионе (но Google в списке будет точно).
С использование api социальных сетей
Принцип авторизации примерно одинаков для всех социальных сетей:
С использованием api сторонних разработчиков
Можно использовать виджеты сторонних разработчиков, например uLogin или другие.
- Преимущества такого подхода:
- Широкий выбор социальных сетей для авторизации. Нет необходимости собственноручно регистрировать и настраивать
ваше приложение в социальной сети, можно даже не заводить собственный аккаунт - Формат ответа при авторизации будет содержать набор стандартных заголовков полей, нет необходимости кастомизировать
скрипт авторизации для каждой социальной сети. Вам не придется изучать документацию по методами работы с api
- Недостатками будут:
- Проблемы с api сторонних разработчиков, как недоступность их серверов, изменение формата ответа, обязательно
скажутся на работе скрипта авторизации на вашем сайте и на ваших пользователях. - api самих социальных сетей дают возможность получить гораздо больше информации о пользователях,
чем позволяют сторонние разработки - Нет гарантии что информация пользователей будет передаваться только вам и не
будет использована разработчиками в своих интересах. Нет гарантии что вам дадут достоверную информацию о
пользователях. - Для передачи данных в совокупности потребуется выполнить большее количество запросов, что скажется на времени
работы скрипта.
Самостоятельно
Придется делать это отдельно для каждой соцсети, также добавлять блоки кода, зачастую сложные для новичков настройки — как на стороне вашего сайта или приложения, так и внешнего сервиса. Для no-code решений этот вариант не особо подходит, разве что вы пришли в разработку без кода из обычного программирования и у вас уже есть подобный опыт.
Создать интернет-магазин, воронку продаж или лендинг быстро и легко – advantshop
Авторизация через oAuth позволяет авторизоваться на Вашем сайте через данные аккаунта в Facebook*.
Чтобы это было возможно, необходимо настроить кнопку авторизации Facebook*.
Для начала настройки нам необходимо будет перейти в Developers Facebook* и авторизоваться. После входа, нажмите на кнопку “Создать приложение” в кабинете разработчика.
В окне Тип приложения выберите опцию “Потребительское” (рис. 1) и нажмите кнопку “Продолжить”. Введите в форме адрес Вашего сайта и контактный Email-адрес.
Рисунок 1.
На открывшейся странице, нажимаем кнопку “Настроить” в блоке “Вход через Facebook*”. (рис.2)
Рисунок 2.
Выберите опцию “Веб” и введите адрес Вашего сайта (рис. 3).
Рисунок 3.
Мы создали приложение. Теперь нужно произвести его настройку. В кабинете разработчика переходим в раздел “Настройки” – “Основное” и заполняем представленную форму недостающими полями – указываем домен сайта, адрес страницы с нашим пользовательским соглашением, политикой конфиденциальности (могут совпадать), а также ссылку для запроса об удалении данных пользователя. В этом поле можно указать ссылку на обратную связь вида “домен/feedback” (рис. 4).
Рисунок 4.
После заполнения всех данных, сохраняем настройки и переходим в раздел “Вход через Facebook*” – “Настройки” и в поле “Действительные URI перенаправления для OAuth” указываем ссылку вида “домен/login” (рис. 5). Сохраняем настройки.
Рисунок 5.
Теперь нам нужно активировать наше приложение. Это делается переключателем в шапке кабинета разработчика (рис. 6).
Рисунок 6.
На этом настройки на стороне Facebook* завершены.
Переходим в административную панель магазина, в раздел “Настройки” – “Системные настройки” – “Авторизация“. В поле “API Key” вставляем ID нашего приложения, а в поле “Секрет приложения” – ключ, скопированный из кабинета разработчика Facebook* (рис. 7), и выставляем галочку активности формы.
Рисунок 7.
В клиентской части кнопка для авторизации отобразится следующим образом (рис. 8):
Рисунок 8.
Готово. Мы рассмотрели, как настроить на сайте авторизацию через Facebook*.
* Facebook и Instagram принадлежат компании Meta, чья деятельность запрещена на территории России с 21 марта 2022 года.
Через специальные сервисы
Такие сервисы предоставляют не только целые списки различных ресурсов, через которые можно настроить вход, но также удобные инструменты статистики, аналитики, интеграции в личном кабинете. Это сократит время разработки, а также упростит работу с клиентами в уже готовом приложении.
Заключение
Авторизация через социальные сети не является чем-то сложным, процесс авторизации очень похож для разных
социальных сетей и это очень упрощает разработчикам социальную интеграцию приложений.
Загрузка...