Регистрация и авторизация через соцсети — Сервисы на

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) следует понимать набор команд (запросов, методов) и формат ответов,
предоставляемых соц. сетью разработчикам и описанных в документации.

Как это работает

Общий механизм такой:

  1. Пользователи нажимают на иконку конкретной социальной сети, например, Facebook или LinkedIn, в окне авторизации.
  2. После чего запускается приложение, передающее данные с приложения или сайта и обратно. Его работа практически незаметна — отображается лишь всплывающее сообщение с запросом на подтверждение регистрации/входа через выбранный сервис.
  3. После подтверждения, нажатия кнопки «Продолжить, как…», соцсеть передает ключ доступа к данным текущего профиля, в зависимости от установленных разрешений.
  4. Ваш ресурс, в свою очередь, запускает процесс регистрации и копирования нужных данных – но лишь тех, сбор которых заранее настроили (или которые установлены в параметрах компонента, отвечающего за авторизацию).

Недостатки регистрации через соцсети

Конечно, они тоже есть:

  • Чем старше ваша целевая аудитория — тем меньше вероятность, что ее представители будут пользоваться этим видом регистрации.
  • Для ресурсов, ориентированных на корпоративных клиентов, подходят далеко не все сервисы, особенно это касается развлекательных соцсетей.
  • Не все провайдеры предоставят вам всю нужную информацию. Поэтому обязательно читайте документацию, проводите тесты, следите за новостями и обновлениями сервисов, через которые настроена авторизация.
  • При удалении или смене аккаунтов пользователи теряют доступ к вашему ресурсу.
  • Все-таки да, даже постоянные клиенты нередко забывают, через какой сервис авторизовались.

Один redirect_uri для всех соц. сетей

Поскольку все соц. сети обращаются методом GET с параметром code на страницу авторизации redirect_uri
их необходимо как-то идентифицировать.

Плагины, виджеты, модули

Варианты, отлично подходящие для решений, созданных на CMS / no-code платформах. Функция авторизации и регистрации необходима как для сайтов, так и для приложений — неважно web или mobile — поэтому даже на непопулярных платформах можно найти множество вариантов, особенно если ваше комьюнити достаточно активно.

Похожее:  Авторизация через ВКонтакте, и другие — 3 (ВКонтакте и OAuth) / Хабр

Правила разработчиков

Какой бы вариант вы не выбрали, стоит придерживаться основных правил.

  1. Если данные передаются через форму на вашем сайте или обрабатываются в вашем приложении — вы несете ответственность за их сохранность.
  2. Условия использования и политика конфиденциальности помогут не только оградить вас от возможных неприятностей, но также добавят лояльности со стороны новых пользователей.
  3. Рядом с кнопкой регистрации коротко расскажите, почему вход через сторонние сервисы лучше. Придумайте бонус для клиентов, который будет дополнительной мотивацией.
  4. Не только соцсети. Аккаунты WhatsApp, Telegram, Amazon, Apple тоже можно использовать для регистрации на сайтах, в мобильных и веб-приложениях.
  5. Если подключить много вариантов авторизации — пользователи будут забывать, какой из них выбрали. Используйте популярные в вашем регионе (но Google в списке будет точно).

С использование api социальных сетей


Принцип авторизации примерно одинаков для всех социальных сетей:

С использованием api сторонних разработчиков

Можно использовать виджеты сторонних разработчиков, например uLogin или другие.

    Преимущества такого подхода:

  • Широкий выбор социальных сетей для авторизации. Нет необходимости собственноручно регистрировать и настраивать
    ваше приложение в социальной сети, можно даже не заводить собственный аккаунт
  • Формат ответа при авторизации будет содержать набор стандартных заголовков полей, нет необходимости кастомизировать
    скрипт авторизации для каждой социальной сети. Вам не придется изучать документацию по методами работы с api
    Недостатками будут:

  • Проблемы с api сторонних разработчиков, как недоступность их серверов, изменение формата ответа, обязательно
    скажутся на работе скрипта авторизации на вашем сайте и на ваших пользователях.
  • api самих социальных сетей дают возможность получить гораздо больше информации о пользователях,
    чем позволяют сторонние разработки
  • Нет гарантии что информация пользователей будет передаваться только вам и не
    будет использована разработчиками в своих интересах. Нет гарантии что вам дадут достоверную информацию о
    пользователях.
  • Для передачи данных в совокупности потребуется выполнить большее количество запросов, что скажется на времени
    работы скрипта.

Самостоятельно

Придется делать это отдельно для каждой соцсети, также добавлять блоки кода, зачастую сложные для новичков настройки — как на стороне вашего сайта или приложения, так и внешнего сервиса. Для no-code решений этот вариант не особо подходит, разве что вы пришли в разработку без кода из обычного программирования и у вас уже есть подобный опыт.

Создать интернет-магазин, воронку продаж или лендинг быстро и легко – advantshop

Авторизация через oAuth позволяет авторизоваться на Вашем сайте через данные аккаунта в Facebook*.

Похожее:  auth_redirect() – Проверяет авторизован ли пользователь, перед тем как допустить его на любую страницу сайта.

Чтобы это было возможно, необходимо настроить кнопку авторизации Facebook*.

Для начала настройки нам необходимо будет перейти в Developers Facebook* и авторизоваться. После входа, нажмите на кнопку “Создать приложение” в кабинете разработчика.

В окне Тип приложения выберите опцию “Потребительское” (рис. 1) и нажмите кнопку “Продолжить”. Введите в форме адрес Вашего сайта и контактный Email-адрес.

Для настройки нам необходимо будет перейти и авторизоваться
Рисунок 1.

На открывшейся странице, нажимаем кнопку “Настроить” в блоке “Вход через Facebook*”. (рис.2)

Далее переходим к самой настройке, нажав на кнопку "Начать"
Рисунок 2.

Выберите опцию “Веб” и введите адрес Вашего сайта (рис. 3).

Затем создаем новый ID приложения
Рисунок 3.

Мы создали приложение. Теперь нужно произвести его настройку. В кабинете разработчика переходим в раздел “Настройки” – “Основное” и заполняем представленную форму недостающими полями – указываем домен сайта, адрес страницы с нашим пользовательским соглашением, политикой конфиденциальности (могут совпадать), а также ссылку для запроса об удалении данных пользователя. В этом поле можно указать ссылку на обратную связь вида “домен/feedback” (рис. 4).

Создание ID приложения
Рисунок 4.

После заполнения всех данных, сохраняем настройки и переходим в раздел “Вход через Facebook*” – “Настройки” и в поле “Действительные URI перенаправления для OAuth” указываем ссылку вида “домен/login” (рис. 5). Сохраняем настройки.

Приложение создано! Затем осуществляем переход к его настройке
Рисунок 5.

Теперь нам нужно активировать наше приложение. Это делается переключателем в шапке кабинета разработчика (рис. 6).

Здесь необходимо выбрать свое созданное приложение и перейти к его настройке, нажав на кнопку "Панель"
Рисунок 6.

На этом настройки на стороне Facebook* завершены.

Переходим в административную панель магазина, в раздел “Настройки” – “Системные настройки” – “Авторизация“. В поле “API Key” вставляем ID нашего приложения, а в поле “Секрет приложения” – ключ, скопированный из кабинета разработчика Facebook* (рис. 7), и выставляем галочку активности формы.

Затем выберите платформу приложения “Веб”
Рисунок 7.

В клиентской части кнопка для авторизации отобразится следующим образом (рис. 8):

Указываем адрес сайта
Рисунок 8.

Готово. Мы рассмотрели, как настроить на сайте авторизацию через Facebook*.

* Facebook и Instagram принадлежат компании Meta, чья деятельность запрещена на территории России с 21 марта 2022 года.

Через специальные сервисы

Такие сервисы предоставляют не только целые списки различных ресурсов, через которые можно настроить вход, но также удобные инструменты статистики, аналитики, интеграции в личном кабинете. Это сократит время разработки, а также упростит работу с клиентами в уже готовом приложении.

Заключение

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector