Авторизация через социальные сети — простой способ взаимодействия с аудиторией. Он позволяет избежать долгой процедуры регистрации и получить доступ к возможностям сайта намного быстрее.
Также при желании можно получить доступ к личной информации пользователя изучая их данные и предпочтения.
Введение
В дополнение к обычной аутентификации на основе форм, Laravel также предоставляет простой и удобный способ аутентификации у поставщиков OAuth с использованием Laravel Socialite. Socialite поддерживает аутентификацию через множество социальных сетей. Для Российского пользователя будет приятно, что существуют адаптеры для yandex, vkontakte , odnoklassniki, mailru. И достаточно популярные сети facebook, google, instagram, twitter, youtube.
Адаптеры для других платформ перечислены на веб-сайте сообщества провайдеров Socialite .
Процесс установки различных адаптеров в целом идентичный. Покажу на примере яндекса.
Подготовка
Вначале давай создадим простое приложение с обычной авторизацией.
Установим Laravel глобально (если его ещё нет) и создадим проект.
composer global require laravel/installer
laravel new laravel-socialite
Проверим что все установилось. Включим dev сервер введя в консоли команду.
php artisan serve
Далее добавим базовую авторизацию.
php artisan make:auth
Для версии начиная с 6.0 (как у меня) вначале нужно добавить пакет авторизации (в версии начиная с 6.0 авторизация была вынесена в отдельный пакет).
composer require laravel/ui --dev
И включим авторизацию.
php artisan ui vue --auth
И перестроим страницы авторизации/регистрации выполнив команду (должен быть установлен nodejs в системе).
npm install && npm run dev
Для разработки я обычно использую базу данных sqlite, для этого в файле .env изменим строки.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
На.
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=laravel
#DB_USERNAME=root
#DB_PASSWORD=
И создадим пустой файл database.sqlite в папке database. И запустим миграцию.
php artisan migrate:fresh
И добавим ссылку на страницу авторизации. Для этого добавим в файл resources\views\auth\login.blade.php код.
Обновим страницу авторизации.
Теперь можно переходить к настройке socialite.
Установка Laravel Socialite
Вначале нужно добавить в зависимости требуемый пакет адаптера и сам socialite.
composer require laravel/socialite
composer require socialiteproviders/yandex
Для версии laravel 6.0 укажем.
composer require socialiteproviders/yandex dev-master
Удалите Laravel\Socialite\SocialiteServiceProvider из массива providers в config\app.php, если вы его добавили.
Добавьте \SocialiteProviders\Manager\ServiceProvider::class в ваш массив providers в config\app.php.
Добавьте событие SocialiteProviders\Manager\SocialiteWasCalled в свой массив listen в app/Providers/EventServiceProvider.php.
Добавьте слушателя в только что созданный SocialiteProviders\Manager\SocialiteWasCalled.
Слушатель, которого вы добавляете для этого провайдера, называется «SocialiteProviders\\Yandex\\YandexExtendSocialite@handle».
Вам нужно будет добавить запись в файл конфигурации служб, чтобы после того, как файлы конфигурации были закэшированы для использования в производственной среде (команда Laravel artisan config: cache), все настройки все еще доступны.
Добавить в config/services.php.
И пропишите эти настройки в ваш .env файл.
Теперь вы сможете использовать его так же, как если бы вы регулярно использовали Socialite (при условии, что у вас установлен фасад). Для этого добавим в наш файл app\Http\Controllers\Auth\LoginController.php добавим строки.
подключим socialite добавив перед классом LoginController строку.
Добавим маршруты в routes\web.php.
Создание Yandex OAuth App
Переходим по ссылке https://oauth.yandex.ru/client/new.
Заполняем анкету, в блоке платформы выбираем "Веб-сервисы" и указываем Callback URI который указали в маршрутах (я буду использовать ngrok).
После добавления вы увидите ID приложения, пароль и Callback URL, сразу запишите их в ваш .env файл.
Интеграция Socialite и Yandex
Теперь при нажатии на кнопку авторизации через яндекс при первом входе запросится разрешение на доступ.
Нажав на кнопку Разрешить, нас перенаправит на сайт, где мы получим информацию о пользователе.
Теперь сделаем проверку пользователя по емейл и если такой пользователь есть, то авторизуем его, а если нет, то создадим, а потом авторизуем.
Для этого заменим строку dd($user); в контроллере LoginController функции handleProviderCallback на код.
И немного изменим миграцию таблицы пользователей, заменив строку.
$table->string('password');
На.
$table->string('password')->nullable();
Перезапустим миграцию и можем тестировать.
php artisan migrate:fresh
Перейдем по ссылке http://localhost:8000/login, и нажмем кнопку авторизации через яндекс.
Большинство адаптеров также поддерживают и Lumen.
Заключение
Добавление авторизации через социальные сети выгодно и как для пользователя, так и для владельца сайта.
Пользователю такой функционал экономит время и не нужно заполнять длинные формы и запоминать логины и пароли.
Большее число пользователей будет проходить регистрацию.
Пользователю не нужно запоминать пароль от сайта, так что тех кто забыл пароль будет меньше.
Вход на сайт через социальные сети дает доступ к персональным данным пользователей.
Если вам понравилось подписывайтесь на канал, ставьте лайки, комментируйте!
