Laravel 5: Socialite — все примеры настроек в одном месте

В Laravel 5.0 появился замечательный инструмент для авторизации через социальные сети — Socialite, но на офсайте приведен пример настройки только для GitHub. В это небольшой статье я хочу показать как настроить все сервисы которые идут по умолчанию с данным инструментом. Приступим!

Для начала нам необходимо установить данный пакет

После установки Socialite зарегистрируйте сервис-провайдер Laravel\Socialite\SocialiteServiceProvider в конфигурационном файле config/app.php

Также добавьте фасад Socialite в массив aliases конфигурации:

Установка на этом закончена. Приступим к конфигурации.

Примечание: Т.к. на момент написания данной статьи было доступно только четыре сервиса (GitHub, Google, Facebook и Twitter), то в примерах будут показаны только они.

Для начала создадим два маршрута в app\Http\routes.php

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

GitHub

Для начала авторизуемся на github.com и перейдем в настройки своего профиля в раздел Application. Регистрируем новое приложение и заполняем информацию о приложении

Если все заполнено правильно то вы увидите результат как на третем снимке, где

  1. Идентификатор клиента (client_id)
  2. Секретный ключ (client_secret)
  3. Перенаправление при удачной авторизации (redirect)

Откроем файл config\services.php и добавим туда полученные данные

На этом настройку авторизации через гитхаб можно считать законченной.

Google

Чтобы реализовать авторизацию через Google, вам необходимо иметь учетную запись. Будем считать что у вас  есть там учетная запись. Переходим в консоль разработчика и жмем кнопочку Create project. В появившемся окне указываем название проекта. После того того как проект создастся переходим в его инструменты.

Там нас интересует пункт APIs & auth > Credentials. Для создания ключей нам необходимо заполнить некоторые обязательн даные о авторизации, по этому сначала перейдем в область OAuth consent screen. Там необходимо обязательно указать название продукта (Product name). Этого достаточно для того чтобы можно было сохранить и продолжить. Теперь мы можем добавить учетные данные для авторизации ваших пользователей. Жмем кнопку Add credentials и выбираем пункт OAuth 2.0 client ID. В открывшейся форме выбираем Web application. Указываем адрес перенаправления (Authorized redirect URIs) куда перейти и передать данные о пользователе после удачной авторизации и жмем кнопку Create. Если все заполнено правильно то появится окошко с идентификатором клиента и секретным ключем.

Теперь необходимо добавить данные для сервиса (config\services.php)

С настройками авторизации через Google закончили.

Facebook

Заходим в раздел разработчиков Facebook и создаем новое приложение App > Add a new App. В появившемся окне выбираем Веб-сайт. Далее жмем Skip and Create App ID. В появившемся окне указываем имя и категорию, например бизнес и жмем Create App ID. Проходим проверку безопасности.

Идентификатор клиента (client_id) для нас будет App ID, а секретным ключем (client_secret) App Secret. Что-бы его увидеть и скопировать нажмите кнопку Show. Тепрь нам осталось только указать ссылку перенаправления после подтверждения авторизации. Переходим в настройки (Settings), там выбираем Advanced и пролистывем вниз до раздела Client OAuth Settings и поле Valid OAuth redirect URIs указываем ссылку перенаправления (http://socialite.dev/socialite/facebook/callback). Пролистывем в конец страницы и жмем Save Changes.

В файл config\services.php и добавим данные для Facebook

С Factbook тоже закончили.

Twitter

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

Переходим в консоль управления приложениями Twitter’a (необходимо быть авторизованным в Twitter) и жмем кнопку Create New App. Заполняем обязательные поля (имя приложения, описание, сайт и ссылку а перенаправление после успешной авторизации). Подтверждаем соглашение и жмем кнопку Create your Twitter application.

Готово. Приложение создано. Получаем идентификатор клиента и секретный ключ во вкладке Keys and Access Tokens. Идентификатор клиента это Consumer Key (API Key), а секретный ключ — Consumer Secret (API Secret).

Снова открываем config\services.php и добавляем данные о Twitter’е

С Твиттером тоже закончили!

 

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

Т.к. все было сделано на начисто развернутой версии Laravel 5.1, то просто добавил ссылки в шаблон resources/view/welcome.blade.php

Получилось так

Получилось так2015-09-10 23-36-24 Скриншот экранаВ итоге вы получим авторизацию пользователей через четыре социальных сервиса, драйвера на которые идут в Laravel практически из коробки. При клике на любую из ссылок авторизации через соц сеть у вас будет запрошено разрешение (если у вас там есть аккаунт) и после успешной авторизации вас вернет назад и покажет дамп данных.

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

Полученными данными вы уже распоряжаетесь по своему усмотрению.

На этом пока все.

 

 

2 thoughts on “Laravel 5: Socialite — все примеры настроек в одном месте

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

    Route::get( ‘/socialite/{provider}’, [
    ‘as’ => ‘socialite.auth’,
    function ( $provider ) {
    return \Socialite::driver( $provider )->redirect();
    }
    ] );

    Route::get( ‘/socialite/{provider}/callback’, [
    function ( $provider ) {
    $user = \Socialite::driver( $provider )->user();
    dd( $user );
    }
    ] );

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

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