Эта статья была рецензирована Верной Анчетой . Спасибо всем рецензентам 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, но он практически одинаков для всех провайдеров.
Шаг 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 .