Авторизация с помощью Facebook и Vkontakte в одностраничном приложении на Backbonejs Express / Хабр

Модель.

Я пошел по несколько рискованному и противоречивому пути, объединив в объекте пользователя и

POJO

, и

Контроллер.

В принципе, в терминологии

authenticationauthorization

особой разницы нет – авторизация она и есть авторизация, причем, разные сетевые провайдеры склоняют эти термины на свой лад. Однако я в своем отчете четко различаю 2 понятия – регистрация и непосредственно авторизация или вход (обе основаны на авторизации у социально-сетевого провайдера).

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

И хотя это можно было бы реализовать проще – при входе проверяем – есть или нет такой человек – и создаем пользовательскую структуру в случае первого входа. Но а) существует стандартная регистрация и логично делать визуальное разделение «тут одно, а тут другое» (пресловутый

usability

); б) как ни обидно, но API социальных сетей не единодушны в предоставлении информации о своих клиентах – скажем,

Customauthenticationprovider.java

(класс совершенно бестолковый, но Spring Security необходимо скормить наследника интерфейса

AuthenticationProvider

, но ближайший по смыслу

PreAuthenticatedAuthenticationProvider

не подходит):

Joomla

Модулей авторизации довольно много, а работа с ними одинаковая: установить модуль, зарегистрировать специальное приложение в соцсети и получить ключи, как мы писали в примерах с ВКонтакте и Фейсбуком*, добавить эти данные в настройки модуля и опубликовать.

Модули можно найти в разделе Расширения — Менеджер расширений. Например:

Phpixie social — простая интеграция с соцсетями

Авторизация через соцсети это одна из самих частых задач с которыми сталкиваются разработчики развлекательных сайтов. Казалось бы там и делать нечего, ведь для каждого API существует PHP библиотека от самого вендора. Но что делать если надо подключить сразу несколько? Не хочется тянуть в проект кучу библиотек которые имплементируют один и тот же протокол OAuth, к тому же хотелось бы иметь какой-то единый интерфейс. PHPixie Social — маленькая библиотека с только одной зависимостью, которая позволяет легко работать сразу с Facebook, Twitter, Google и Вконтакте, а если вы используете PHPixie фреймворк то также сразу получаете авторизацию всего в несколько строчек кода.

Но сначала рассмотрим компонент сам по себе.

Конфигурация

<?php
$config = array(
    // Имена провайдеров могут быть произвольными,
    // но для простоты примера имя я взял с типа API
    'facebook' => array(
        'type'      => 'facebook',
        'appId'     => '',
        'appSecret' => '',

        // опционально права которые запросить у пользователя,
        'scope' => array(),
 
        // опционально версия API
        'apiVersion' => '2.3' 
    ),
    'twitter' => array(
        'type' => 'twitter',

        // Twitter работает через OAuth 1.0a
        // поэтому поля отличаются
        'consumerKey' => '',
        'consumerSecret' => ''
    ),
    'google' => array(
        'type'      => 'google',
        'appId'     => '',
        'appSecret' => '',

        // опционально
        'scope'  => array(), 
        'apiVersion' => '2.3' 
    ),
    'vk' => array(
        'type'      => 'vk',
        'appId'     => '',
        'appSecret' => '',

        // опционально
        'scope'  => array(), 
        'apiVersion' => '2.3' 
    ),
);

Инициализация

// та единственная зависимость
$slice = new PHPixieSlice();
$config = $slice->arrayData($config);

$social = new PHPixieSocial($config);

Авторизация пользователя

Итак первое что нам надо сделать это запросить у пользователя авторизацию, для этого нам понадобится придумать какую-то ссылку куда API пришлет нам токен доступа. Тогда мы перенаправляем пользователя на страницу авторизации. Вот простой пример:

$callbackUrl = 'http://localhost.com/callback=1';

if(!isset($_GET['callback'])) {
    //Если параметра нет, далаем редирект

    $loginUrl = $social->get('facebook')->loginUrl($callbackUrl);
    header('Location: '.$loginUrl);

} else {
   // Если параметр есть,  значит это к нам пришел ответ от API,
   // с ним придет еще много параметров которые Social обработает сам.
   // Заметьте, что значение $callbackUrl тут тоже нужно
   $socialUser = $social->get('faceebook')->handleCallback($callbackUrl, $_GET);

   if($socialUser === null) {
        // Пользователь отклонил авторизацию
        echo "You didn't authorize our app";

   }else{
       // Запрос к API от имени пользователя
       var_dump($socialUser->get('me'));
   }
}

Объект пользователя

$socialUser->id(); // ID пользователя в соцсети

// Дополнительная информация доступна после логина
$socialUser->loginData(); 

// GET Запрос
$socialUser->get('some/endpoint', $queryParams = array());

// POST Запрос
$socialUser->post('some/endpoint', $data = array(), $queryParams = array());

// Произвольный запрос
$socialUser->api('PUT', 'some/endpoint', $queryParams = array(), $data = array());

// Токен авторизации,
// его можно сериализировать и сохранить
// в сессии или в базе
$token = $social->token();

// Получить пользователя по токену
$socialUser = $social->get('facebook')->user($token);

// Кстати запросы можно делать сразу с токеном
$social->get('facebook')->get($token, 'some/endpoint', $queryParams = array());
$social->get('facebook')->post($token, 'some/endpoint', $data = array(), $queryParams = array());
$social->get('facebook')->api($token, 'PUT', 'some/endpoint', $queryParams = array(), $data = array());

Интеграция с фреймворком

Похожее:  SSH-Bastion. Замковые ворота вашей инфраструктуры — KAZARIN OnLine

В фреймворке по умолчанию доступен плагин к модулю авторизации, который обрабатывает логин пользователя и легко включается в его конфигурации. Те кто уже работает с фреймворком не найдут в этом ничего сложного, так что в этот раз вместо описания я оставлю ссылку на демо проект: https://github.com/phpixie/demo-socialauth

В нем пользователь сам выбирает через какую сеть авторизоваться. Если он зашел впервые, ему сразу-же создастся запись в табличке Users и логин запомнится через сессию. При последующем логине будет уже использоваться сущность с базы.

Чтобы попробовать Social, достаточно просто composer require phpixie/social, ну и как всегда, если у вас возникнуть какие-либо вопросы, обращайтесь сразу к нам в чат.

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

– ассоциативный массив данных пользователя.

WordPress

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

• miniOrange Social Login для регистрации через ВКонтакте, Твиттер, Инстаграм*, Фейсбук* и другие соцсети. Есть дополнительные премиальные возможности, например, отправка приветственных писем зарегистрировавшимся;

• Social Login & Register тоже предлагает много соцсетей, среди которых ВКонтакте, Фейсбук*, Инстаграм*, Твиттер и другие. Есть возможность аналитики данных пользователей;

• Social Login by BestWebSoft для добавления формы авторизации через соцсети и комментирования. Работает с Фейсбуком*, Твиттером, аккаунтом Google и LinkedIn;

• Super Socializer включает в себя не только авторизацию, но и возможность делать репосты и комментировать контент на сайте через профили в соцсетях.

Авторизация на сайте

Простенький спринговский

application-context-security.xml

Авторизация через вконтакте api.

Авторизация через социальные сети

Существует несколько способов авторизации через социальные сети.

Актуальность данных пользователя

Некоторы данные профиля пользователя могут быть изменены им самим в настройках или же api социальной сети,
при этом id пользователя останется прежнем.

Битрикс

У CMS Битрикс авторизация на сайте через социальные сети входит в функциональность основного модуля входа на сайт.

Нужно только настроить:

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

2. В настройках Битрикса открыть Настройки модулей — Социальные сервисы — Внешние сервисы, выбрать нужные соцсети и внести данные в настройки панели администрирования.

Посоветуйте плагины и сервисы, которые вам нравится использовать для настройки авторизации через соцсети! Ждем в комментариях.

Вконтакте

Настроить авторизацию на сайте через ВКонтакте можно с помощью API. На странице создания приложения заполните поля, в качестве платформы выберите «Сайт».

Нажмите «Подключить сайт», действие нужно подтвердить через телефон или устройство с приложением. В настройках вы увидите id приложения и ключ — эти данные понадобятся для работы с API.

Список дальнейших действий подробно разобран на странице Документации для разработчиков.

Если вам нужен только ВКонтакте, можно использовать официальный виджет авторизации. На странице создания виджета нужно заполнить поля и скопировать код для вставки на сайт. Подробная документация расскажет, как правильно его вставить.

Гостевой и личный профили пользователя

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

Для чего это нужно

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

Параллельно с этим в интернете есть сервисы, которыми пользуются все: Яндекс, Гугл, фейсбук или Вконтакте. Почему бы не брать данные о пользователе с этих сервисов?

Для этого и придумали OAuth.

Задачи социальной интеграции

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

Под api (application programming interface) следует понимать набор команд (запросов, методов) и формат ответов,
предоставляемых соц. сетью разработчикам и описанных в документации.

Как быть?

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

С документации мы можем узнать что Параметр sig равен md5 от конкатенации следующих строк:

Давайте получим информацию о пользователе через open api, передадим её на сервер, проверим токен, и если все ок запишем в базу:

Как добавить на сайт регистрацию через профили в соцсетях

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

Как работает единая авторизация

Для пользователя всё выглядит просто: нажал «Войти через Яндекс», подтвердил Яндексу своё желание войти на нужный сайт, и всё — вы уже зарегистрировались на новом сайте и можете им пользоваться. Но что происходит под капотом?

Когда посетитель, например, сайта о программировании, нажимает «Войти через Яндекс», этот сайт отправляет в Яндекс запрос и говорит: «Тут кто-то хочет войти на мой сайт через ваш сервис, можете разобраться?»:

Можно ли этому доверять?

Скорее нет, чем да. С OAuth есть проблема: вы никогда не знаете, действительно ли это OAuth или это хакеры сделали штуку, похожую на OAuth, которая хочет украсть ваш пароль. На всякий случай вот техника безопасности: 

⚠️ Во всех важных сервисах включайте двухфакторную авторизацию: чтобы не только вводить пароль, но и получать СМС.

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

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

Плюсы для владельцев сайтов

Получение информации о пользователе

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

Разрешенный доступ к данным пользователя

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

Превращение анонимных посетителей в клиентов «со
знакомыми лицами»

Очень часто посетители сайтов остаются анонимными до тех
пор, пока не захотят совершить покупку, а некоторые ресурсы и вовсе имеют
опцию, с помощью которой можно находиться на сайте в качестве «гостя».
Благодаря авторизации через соцсети у каждого посетителя появляется лицо,
географическое положение, хобби и т.д.

Снижение стоимости техподдержки

Полезно компании: можно собирать данные, больше вероятность репостов

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

Также авторизация через соцсети упрощает репосты материалов с сайта, а значит увеличивает конверсию и реферальный трафик.

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

Проблема 1

Полученный токен(sig) привязывается к ip-адресу, и при попытке использовать его на сервере вам выдаст ошибку:

Проблема 2

При таком способе авторизации нет возможности получить email пользователя, даже если вы запросите нужные права и пользователь даст согласие — вы не получите email в ответе.

Проверка авторизации

Давайте создадим модель, которая будет содержать информацию о пользователе:

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

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

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

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

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

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

Советы по работе с авторизацией пользователей через социальные
сети

Давайте своим клиентам выбор

Способ 1. ручная настройка форм для каждой социальной сети

Каждая соцсеть требует отдельных настроек:

• со стороны соцсети нужно зарегистрировать сайт в системе и получить ключи;

• со стороны сайта нужно настроить интеграцию с социальной сетью.

Способ 3. cms-плагины для регистрации на сайте через соцсети

Если пользуетесь CMS, можно поискать решение через модули и расширения в каталогах.

Требования к сайту по защите личных данных

В ФЗ N152-ФЗ «О персональных данных» описаны правила для законного сбора и обработки данных пользователей. За нарушения предусмотрены штрафы.

Список требований:

Удобно клиентам: меньше заполнять, быстрее регистрация, учетка не теряется

Еще в 2022 году исследование показало, что 77% пользователей считают вход через соцсети хорошим решением. А в 2022 году другие исследователи выяснили, что 93% пользователей чаще выбирают способ авторизации через соцсеть. Остальные опрошенные либо не были зарегистрированы в соцсетях, либо не хотят передавать сайту личные данные профиля, для них нужно оставить возможность авторизации через email.

Регистрация по почте или телефону требует больше действий вручную, а при каждом входе придется вводить данные, если не сохранить их в браузере. Вход через соцсеть быстрее, надо только выбрать соцсеть и нажать «войти».

Фейсбук*

Зарегистрируйтесь в системе Фейсбука* для разработчиков, кликните на «Создать приложение» и выберите «Создание кросс-сервисных функций:

Заключение

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