Главная » Статьи » Создание страницы авторизации с помощью Google OAuth API

Создание страницы авторизации с помощью Google OAuth API

Создание страницы авторизации с помощью Google OAuth API

От автора: в этой статье я собираюсь объяснить, как интегрировать авторизацию Google на ваш сайт на PHP. Мы будем использовать Google OAuth API, который является простым и мощным способом добавить вход через Google на ваш сайт.

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

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

В этом посте мы будем использовать API авторизации Google OAuth, который позволяет пользователям входить в систему с использованием существующих учетных записей Google. Конечно, пользователи по-прежнему должны иметь возможность зарегистрироваться с помощью обычной формы регистрации на вашем сайте, но предоставление входа через Google или чего-то подобного может помочь сохранить нормальный коэффициент удержания пользователей.

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

Во-первых, давайте разберемся, как работает авторизация через Google на вашем сайте.

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

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

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

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

На этом этапе пользователь вошел в систему с помощью Google, а сторонний сайт имеет доступ к информации профиля пользователя, которую можно использовать для создания учетной записи и входа в систему.

Это основной процесс интеграции авторизации Google на вашем сайте. В оставшейся части поста мы реализуем этот поток входа в рабочем примере на PHP.

Настройка проекта для авторизации через Google

В этом разделе мы рассмотрим основные настройки, необходимые для интеграции авторизации через Google с вашим веб-сайтом на PHP.

Создайте проект Google API

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

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

В верхнем левом меню нажмите на ссылку «Выбрать проект». Откроется всплывающее окно, как показано на снимке экрана.

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

Нажмите кнопку «Создать», чтобы сохранить новый проект. Вы будете перенаправлены на страницу панели инструментов. Нажмите «Учетные данные» в левой боковой панели и перейдите на вкладку настроек OAuth.

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

Затем нажмите «Учетные данные» в левой боковой панели. Должно отобразиться поле «Учетные данные API», как показано на следующем снимке экрана.

Нажмите «Учетные данные клиента»> «Идентификатор клиента OAuth», чтобы создать новый набор учетных данных для приложения. Отобразится панель, в которой вам будет предложено выбрать нужный вариант. В нашем случае выберите опцию «Веб-приложение» и нажмите кнопку «Создать». Вам будет предложено предоставить несколько более подробную информацию.

Введите данные, показанные на снимке экрана выше, и сохраните их! Конечно, вам нужно установить URI перенаправления в соответствии с настройками вашего приложения. Это URL, по которому пользователь будет перенаправлен после входа в систему.

На данный момент мы создали клиентское приложение Google OAuth2, и теперь нам нужно получить возможность использовать это приложение для интеграции на нашем сайте входа в систему через Google. Пожалуйста, запишите идентификатор клиента и секретный ключ клиента, они потребуются при настройке приложения с нашей стороны. Вы всегда можете найти идентификатор клиента и секретный ключ клиента при редактировании приложения.

Установите клиентскую библиотеку Google PHP SDK

В этом разделе мы рассмотрим, как установить клиентскую библиотеку Google PHP API. Есть два варианта установки:

Использовать Composer.

Загрузить и установить файлы библиотеки вручную.

Использовать Composer

Если вы предпочитаете установить его с помощью Composer, вам просто нужно выполнить следующую команду.

$composer require google/apiclient:"^2.0"

И это все!

Скачать релиз

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

К настоящему момент у вас должно быть настроено приложение Google и установлена клиентская библиотека API Google PHP. В следующем и последнем разделе мы рассмотрим, как использовать эту библиотеку на сайте.

Интеграция клиентской библиотеки

Напомним, что при настройке приложения Google мы предоставили URI перенаправления в конфигурации приложения. Мы задали адрес http: //localhost/redirect.php. Теперь пришло время создать файл redirect.php. Создайте файл redirect.php со следующим содержимым.

<?php
require_once 'vendor/autoload.php'; // init configuration
$clientID = '<YOUR_CLIENT_ID>';
$clientSecret = '<YOUR_CLIENT_SECRET>';
$redirectUri = '<REDIRECT_URI>'; // create Client Request to access Google API
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);
$client->addScope("email");
$client->addScope("profile"); // authenticate code from Google OAuth Flow
if (isset($_GET['code'])) { $token = $client->fetchAccessTokenWithAuthCode($_GET['code']); $client->setAccessToken($token['access_token']); // get profile info $google_oauth = new Google_Service_Oauth2($client); $google_account_info = $google_oauth->userinfo->get(); $email = $google_account_info->email; $name = $google_account_info->name; // now you can use this profile info to create account in your website and make user logged in.
} else { echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";
}
?>

Давайте пройдемся по ключевым частям кода. Первое, что нам нужно сделать, это включить файл autoload.php. Это часть Composer, она гарантирует, что классы, которые мы используем в скрипте, загружаются автоматически.

require_once 'vendor/autoload.php';

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

// init configuration
$clientID = '<YOUR_CLIENT_ID>';
$clientSecret = '<YOUR_CLIENT_SECRET>';
$redirectUri = '<REDIRECT_URI>';

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

// create Client Request to access Google API
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);

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

$client->addScope("email");
$client->addScope("profile");

Наконец, у нас есть фрагмент кода, который выполняет магию потока входа в систему.

// authenticate code from Google OAuth Flow
if (isset($_GET['code'])) { $token = $client->fetchAccessTokenWithAuthCode($_GET['code']); $client->setAccessToken($token['access_token']); // get profile info $google_oauth = new Google_Service_Oauth2($client); $google_account_info = $google_oauth->userinfo->get(); $email = $google_account_info->email; $name = $google_account_info->name; // now you can use this profile info to create account in your website and make user logged in.
} else { echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";
}

Во-первых, давайте пройдемся по части else, которая будет запущена при непосредственном доступе к скрипту. Она отображает ссылку, которая ведет пользователя в Google для входа в систему. Важно отметить, что мы использовали метод createAuthUrl из Google_Client для создания URL OAuth.

После нажатия на ссылку для авторизации через Google пользователи будут перенаправлены на сайт Google. После входа в систему Google перенаправляет пользователей на наш сайт, передавая переменную строки запроса code. И вот тогда будет запущен код PHP в блоке if. Мы будем использовать код для обмена токеном доступа.

Получив токен доступа, мы можем использовать сервис Google_Service_Oauth2 для получения информации о профиле вошедшего в систему пользователя.

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

Заключение

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

Автор: Sajal Soni

Источник: https://code.tutsplus.com

Редакция: Команда webformyself.