Создаем регистрационную форму одним кликом

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

Используя этот сервис вы можете значительно упростить процесс авторизации/регистрации для вас и ваших пользователей. Вот некоторые из преимуществ:

• Не нужно создавать и проверять формы регистрации и авторизации;
• Нет необходимости в функции восстановления забытого пароля;
• Очень упрощенная авторизация/регистрация - вы получите электронную почту человека, имя и фото с помощью одного щелчка мыши;
• Адрес уже проверен Google, так что вам не нужно отправлять сообщение для подтверждения.
• Серьезная безопасность со стороны Google.

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

Установка

Первый шаг заключается в создании нового приложения через Google’s API Console. Следуйте инструкциям для получения дополнительной информации. После завершения процесса, скопируйте полученные ключи в файл setup.php.

Запустите код из schema.sql (вы можете найти его в архиве) в PhpMyAdmin или ему подобном инструменте. Он создаст glogin_users таблицу в базе данных, которая будет использоваться для хранения информации об учетных записях пользователей вашего приложения. После этого, напишите свои данные подключения к базе данных в setup.php.

PHP

Форму входа мы делаем используя Google’s Federated login. Это означает, что посетители вашего веб-сайта переходят по ссылке на страницу Google, где они предоставляют приложению доступ к своему аккаунту, и затем будут перенаправлены обратно. После этого вы получаете token для доступа, который можно использовать для запроса информации о них. Вот упрощенное описание процесса авторизации:

Когда пользователь нажимает кнопку "Sign in with Google" в нашем демо, они переходят на страницу авторизации Google, где они видят, какие разрешения просит наше приложение.
После разрешения дать доступ этому приложению, они будут перенаправлены обратно на сайт, при этом специальный параметр code передается в URL. Наше приложение будет использовать этот код, чтобы получить token доступа;

С помощью token, приложение запрашивает информацию о пользователе, которая сохраняется в базу данных.

Для чтения и вставки в базу данных, я использую крошечную библиотеку Idiorm, которую вы можете найти в папке library.

Наш PHP-код организован следующим образом:

• index.php - это основной файл приложения;
• setup.php - этот файл содержит информацию соединения с базой данных и ключи полученные из Google’s API Console;
• Папка library - содержит библиотеку Idiorm, PHP библиотеки Google, и класс для включения метки относительного времени.

Давайте взглянем на код в начале index.php:

require 'setup.php'; // Create a new Google API client
$client = new apiClient();
//$client->setApplicationName("Tutorialzine"); // Configure it
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setDeveloperKey($api_key);
$client->setRedirectUri($redirect_url);
$client->setApprovalPrompt(false);
$oauth2 = new apiOauth2Service($client); // The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset($_GET['code'])) { // This method will obtain the actuall access token from Google,
	// so we can request user info
	$client->authenticate(); // Get the user data
	$info = $oauth2->userinfo->get(); // Find this person in the database
	$person = ORM::for_table('glogin_users')->where('email', $info['email'])->find_one();
	if (!$person) {
		// No such person was found. Register! $person = ORM::for_table('glogin_users')->create();
		// Set the properties that are to be inserted in the db
		$person->email = $info['email'];
		$person->name = $info['name'];
		if (isset($info['picture'])) {
			// If the user has set a public google account photo
			$person->photo = $info['picture'];
		} else {
			// otherwise use the default
			$person->photo = 'assets/img/default_avatar.jpg';
		} // insert the record to the database
		$person->save();
	} // Save the user id to the session
	$_SESSION['user_id'] = $person->id(); // Redirect to the base demo URL
	header("Location: $redirect_url");
	exit;
} // Handle logout
if (isset($_GET['logout'])) {
	unset($_SESSION['user_id']);
}
$person = null;
if (isset($_SESSION['user_id'])) {
	// Fetch the person from the database
	$person = ORM::for_table('glogin_users')->find_one($_SESSION['user_id']);
}

Что происходит здесь, мы проверяем наличие code в $ _GET параметрах. Как я уже упоминал выше, этот параметр установливается Google, когда пользователь перенаправляется обратно после того как разрешит доступ приложению. Затем мы запрашиваем информацию о пользователе и записываем её в базу данных. Идентификатор пользователя (значение идентификатора в базе данных) записывается в сессию. Он сохраняется между запросами и используется в качестве флага, о том что пользователь прошел идентификацию

Если вы хотите узнать больше о OAuth, прочитайте соответствующую информацию от Google по этому вопросу. Там вы также можете увидеть таблицу с полями которые возвращает метод get().

Ближе к концу, мы определяем переменную $person. Она содержит объект, который возвращается библиотекой Idiorm, со свойствами для каждого столбца таблицы glogin_users. Вы можете видеть, как этот объект используется в следующем разделе.

HTML

HTML-код для нашего примера находится в нижней части index.php. Поэтому у нас есть доступ к объекту $person, который пригодиться при выводе на экран имени и фотографии пользователя. Сама страница является стандартным документом HTML5:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Google Powered Login Form</title> <!-- The stylesheets -->
  <link rel="stylesheet" href="assets/css/styles.css" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" />
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  </head>
  <body>
    <h1>Login Form</h1>
    <div id="main">
      <?php if($person):?>
      <div id="avatar" style="background-image: url(/<?php echo $person->photo?>?sz=58)"></div>
      <p class="greeting">Welcome, <b><?php echo htmlspecialchars($person->name)?></b></p>
      <p class="register_info">You registered <b><?php echo new RelativeTime($person->registered)?></b></p>
      <a href="?logout" class="logoutButton">Logout</a>
      <?php else:?>
      <a href="<?php echo $client->createAuthUrl()?>" class="googleLoginButton">Sign in with Google</a>
      <?php endif;?>
    </div>    
  </body>
</html>

Мы проверяем, содержит ли объект переменная $person и затем отображаем имя пользователя и его фотографию. В противном случае, мы выводим URL авторизации, который указывает на страницу аутентификации Google для нашего приложения.
Мы это сделали!

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

Источник