Статьи

Социальные логины с Oauth.io — вход с помощью Anything, Anywhere

Эта статья была рецензирована Верной Анчетой . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

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

Учитывая это, сегодня мы рассмотрим OAuth.io , мультиплатформенный SDK для более чем 120 провайдеров социальных сетей, таких как Facebook, Twitter и Google+. Работа с таким SDK не является сложной задачей, но есть некоторые предпосылки для его использования.

Социальные иконки все сливаются в одну

Шаг 1. Настройка предварительных условий

Первый шаг — это создание:

  • Учетная запись разработчика с зарегистрированным приложением в Facebook и Google (или у любого другого поддерживаемого провайдера, которого вы хотите реализовать).
  • Зарегистрированный аккаунт oauth.io (поддерживается 30-дневная бесплатная пробная версия ).

Чтобы создать приложение Facebook, перейдите к руководству по началу работы с приложениями Facebook. Сделайте то же самое для Google, перейдя по этой ссылке .

Если вы застряли или вам нужна дополнительная помощь, просто оставьте комментарий ниже.

Шаг 2: Установите OAuth.io

composer require oauth-io/oauth 

Шаг 3. Настройте API в OAuth.io

Что касается конфигурации и настройки OAuth.io, все, что нам нужно сделать, это зарегистрировать приложение провайдера на его панели инструментов. Это делается путем копирования строк Client ID и Client Secret со страницы приложения провайдера.

Процесс выполнения этого показан в следующем GIF-файле только для Google и Facebook, но он практически одинаков для всех провайдеров.

Анимация добавления ключа и секрета различных провайдеров в Oauth.io

Шаг 4: кодируй

Задачей этого шага является кодирование логики объединенного входа в систему. Oauth.io предоставил демонстрационное приложение, чтобы продемонстрировать, как используется SDK.

Готовый проект этого демонстрационного приложения имеет структуру каталогов, как показано ниже:

 |-Demo-OAuth-IO/ |--app/ |--public/ |--src/ |--vendor/ |--composer.json |--composer.lock 

src и vendor создаются при создании проекта, а app и public создаются на этом пути.

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

Чтобы реализовать это демо, мы начали с создания нового проекта с использованием Composer, включая OAuth.io PHP SDK.

 composer create-project oauth-io/oauth=0.3.2 Demo-OAuth-IO 

Затем мы продолжаем создание каталога app и его файлов.

 |-app/ |--config.inc.php |--OAuthIO.php 

Этот каталог содержит класс с именем OAuthIO. Этот класс является фасадом, который упрощает использование SDK. Его исходный код:

 <?php require_once '../vendor/autoload.php'; require_once 'config.inc.php'; use OAuth_io\OAuth; class OAuthIO { protected $provider; protected $oauth; public function __construct($provider) { $this->provider = $provider; $this->oauth = new OAuth(); } /** * init: Initialise the OAuth_io */ public function init() { $this->oauth->initialize( PUBLIC_KEY, SECRET_KEY ); } /** * auth: Make the authentication process * @param: callback => uri to goto after authentication * @throw: NotInitializedException */ public function auth($callback) { $this->oauth->redirect( $this->provider, $callback ); } /** * getClient: Get a request_object from OAuth_io * @param: opt => options passed to authenticate process * @throw: NotAuthenticatedException * @return: Request object on success */ public function getClient($opt = null) { if ($opt === null) { $client = $this->oauth->auth( $this->provider, [ 'redirect' => true, ] ); } else { $opt['redirect'] = true; $client = $this->oauth->auth($this->provider, $opt); } return $client; } } 

Как видите, класс OAuthIO требует и загружает два файла: файл autoload.php, который автоматически загружает в класс OAuth.io SDK, и файл config.inc.php который содержит определение открытых и секретных ключей, необходимых для внедрить и запустить приложение.

 <?php define('PUBLIC_KEY', 'TKqUBBONEo0em9k0VIXpckwL8Gg'); define('SECRET_KEY', 'FIcEJL5y6hGd3yor13yZCGrwcrE'); 

Вы можете найти эти ключи в разделе «Ключи приложения» на странице панели инструментов OAuth.io.

Публичные и секретные ключи

Функции, определенные в этом классе, говорят сами за себя и выполняют процесс аутентификации и создания клиента, соответственно auth() и getClient() .

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

  • Объект client является не чем иным, как экземпляром класса RequestObject который поставляется вместе с SDK. Он используется для выполнения запросов к API Oauth.io. Его можно легко создать из учетных данных, полученных в процессе аутентификации. Доступ к getCredentials() осуществляется с getCredentials() метода getCredentials() в экземпляре RequestObject . Хранение этих учетных данных в базе данных, их повторная загрузка и вызов auth() — рекомендуемый способ повторного использования клиента без повторной аутентификации.

 $provider->auth( [ 'credentials' => $credentials, ] ); 

После того, как мы закончили в каталоге app , мы создаем public каталог.

 |-public/ |--tmpl/ |----footer.php |----header.php |--index.php |--login.php 

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

  • login.php реализует объединенную страницу входа в систему и перенаправляет пользователя на страницу индекса, если аутентификация прошла успешно, в противном случае он останавливается и печатает сообщение об ошибке.

     <?php session_start(); require '../app/OAuthIO.php'; if (isset($_SESSION['oauthio']['auth']) && count($_SESSION['oauthio']['auth']) > 0 ) { 
     header('Location: /index.php'); exit(); 

    }

    if (isset ($ _ GET ['p']) &&
    пусто ($ _ GET ['p']) == false
    ) {

     $provider_name = $_GET['p']; $provider = new OAuthIO($provider_name); $provider->init(); try { // Execute authentication process $provider->auth('/index.php'); } catch (Exception $e) { die($e->getMessage()); } 

    }

  • index.php проверяет, прошел ли пользователь аутентификацию, пытаясь получить экземпляр RequestObject с помощью getClient() из OAuthIO. В случае сбоя выводится сообщение об ошибке и ссылка на страницу входа, в противном случае выводится имя поставщика, объединенное с сообщением об успехе.

     <?php session_start(); require '../app/OAuthIO.php'; $provider_name = ''; $errors = []; if (isset($_SESSION['oauthio']['auth']) && count($_SESSION['oauthio']['auth']) > 0 ) { 
     reset($_SESSION['oauthio']['auth']); $provider_name = key($_SESSION['oauthio']['auth']); 

    }

    $ provider = новый OAuthIO ($ provider_name);
    $ Provider-> Init ();

    пытаться {

     $client = $provider->getClient(); 

    } catch (\ Exception $ e) {
    $ errors [] = $ e-> getMessage ();
    }

И часть печати сообщения:

 if (count($errors) > 0) { print '<div class="alert alert-danger" role="alert">' . $errors[0] . '. Goto <a href="login.php">login page</a> to authenticate.</div>'; } else { if ($client !== false) { $me = $client->me(); print '<div class="alert alert-success" role="alert">' . sprintf( 'Well done %s! You have authenticated using %s.', $me['name'], ucfirst($provider_name) ) . '</div>'; } } 

public каталог содержит другой каталог с именем tmpl . В этом каталоге мы можем найти статический верхний и нижний колонтитулы основного шаблона приложения. Они не содержат никакой логики, поэтому их исходный код не показан в этом руководстве, и их можно безопасно включать в общую папку.

Это все, что нам нужно было сделать — если мы сейчас проверим, мы увидим следующий результат.

Тестирование Демо

Вывод

В этой короткой статье мы узнали, как реализовать объединенную социальную регистрацию, используя OAuth.io.

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

Чтобы узнать, как сделать больше вызовов API для провайдеров, ознакомьтесь с документацией . Исходный код приложения, созданного в этом руководстве, можно найти на Github .