Авторизация через соцсети и регистрация на сайте — Хабр Q&A

Что берёт сайт и зачем

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

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());

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

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

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

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

Telegram

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

1. Создать бота как описано в инструкции.
2. Подключите бота в разделе Мессенджеры.

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

Вконтакте

Нажмите на кнопку «Создать приложение». Откроется страница входа в аккаунт «ВКонтакте»:

Выполните вход. Если вы уже авторизованы, вы сразу увидите страницу «Создание приложения»:

Придумайте название приложения и нажмите на кнопку «Создать». На новой странице укажите подробную информацию о приложении. Она будет отображаться при регистрации пользователей (запросе разрешений):

После сохранения изменений перейдите в настройки приложения и скопируйте «ID приложения» и «Защищенный ключ»:

Скопированные значения укажите в панели управления сайтом и нажмите на кнопку «Сохранить»:

Теперь вернитесь к настройкам приложения на сайте «ВКонтакте» и заполните данные:

• «Open API» — включен;
• «Адрес сайта» и «Базовый домен» — ваш прикрепленный домен.
• “Состояние”, переведите настройку с “Приложение отключено” в “Приложение включено и видно всем” и сохраните изменения.

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

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

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

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

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

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

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

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

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

1. Вы нажимаете на иконку социальной сети на сайте.

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

3. Видимой частью приложения является «поп-ап» всплывающее окно с надписью «Продолжить как (имя)» или «Разрешить».

4. Нажимаете, и социальная сеть посылает сайту ключ доступа. Говорит, что вы согласны дать эти данные.

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

Заглушка на закрытом приложении «ВКонтакте»

Видимая часть закрытого приложения

«Изнанка» сайта выглядит примерно так. Это крохотная часть большого кода. Функция ниже отвечает за обработку ответа провайдера. Тот самый момент, когда вы впервые подтвердили согласие на вход через социальную сеть и нажали «Продолжить как (имя)». После первого и единичного подтверждения со стороны пользователя работает каждый раз автоматически.

Функция обработки ответа от провайдера

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

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

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

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

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

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

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

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

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

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

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

Провайдер

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

Разработчик

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

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

Сохранность данных и ответственность сторон

Ответственность за сохранность персональных данных лежит на четырёх сторонах: разработчик сайта, собственник сайта, социальная сеть и провайдер.

Юридическая сторона

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

«Основные требования Федерального закона N 152-ФЗ «О персональных данных» сформулированы давно. И уже давно есть требование брать письменное согласие при сборе персональных данных.

Текущие изменения связаны не с самим законом, а со штрафами за его неисполнение. Если раньше за нарушение законодательства в области персональных данных предусматривался штраф в размере 10 000 ₽, то сейчас размер штрафа существенно увеличился и зависит от типа нарушений. За обработку персональных данных, несовместимую с целями их сбора, юридическое лицо может получить штраф до 50 000 ₽, за обработку персональных данных без согласия субъекта (если оно требуется) — до 70 000 ₽, за отсутствие в открытом доступе политики конфиденциальности — до 30 000 ₽. Все основания для штрафов и точные формулировки можно посмотреть здесь.

В ФЗ № 152 не предусмотрен термин «общедоступная информация», но есть очень близкий по смыслу — персональные данные, сделанные общедоступными субъектом персональных данных для неограниченного круга лиц. Обработка общедоступных персональных данных допускается законом. При этом получать согласие на обработку таких данных не требуется. (п.1 ст. 6 ФЗ № 152).

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

С 1 июля за обработку персональных данных, несовместимую с целями их сбора, юридическое лицо может получить штраф до 50 000 ₽.

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

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

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

2. В согласии указать:

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

3. Пользователь принимает согласие способом, который предусмотрен в нём (отметка в чекбоксе или нажатие кнопки «зарегистрировать» или какое-то другое действие)».

Яндекс

Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет «Яндекса». После авторизации заполните форму нового приложения:

Установите следующие права для приложения:

Скопируйте из панели управления сайтом «Callback URI», укажите его в поле «Callback URL» приложения и нажмите на кнопку «Создать приложение в самом низу страницы»:

Скопируйте ID и пароль приложения:

Укажите эти данные в панели управления сайтом:

Приложение готово к использованию.