Регистрация в один клик от Google

Здравствуйте, уважаемые читатели Easy-Code.ru. В этом уроке мы сделаем регистрацию для сайта с помощью Google. Сервисы Гугла предоставляют множество полезных возможностей, одна из них — это регистрация с помощью аккаунта Google. Все у кого есть аккаунт могут нажатием одной кнопки зарегистрироваться у вас на сайте с их почтой, именем и фото.

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

Использование подобной системы упрощает процесс регистрации/авторизации пользователей на сайте и уменьшает объем вашей работы:

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

Конечно, все это работает, только если у человека есть аккаунт Google.

Настройка

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

Запустите schema.sql (найдете его в исходниках) с помощью phpMyAdmin или другой системы для управления MySQL. Так мы создадим таблицу glogin_users, в которой будем хранить информацию о пользователях. После необходимо занести информацию для соединения с бд в файл setup.php.

PHP

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

• Когда посетитель жмет на “Sign in with Google” его перенаправляет на страницу авторизации Google, где он видит к каким данным требует доступ наше приложение.
• Если пользователь соглашается, он перенаправляется обратно на наш сайт, со специальным кодом в URL, используя который мы получаем информацию о нем.
• Далее мы записываем полученную информацию в базу на нашем сервере.

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

Структура нашего PHP кода следующая:

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

Рассмотрим код index.php

require 'setup.php';

// создаем клиент Google API
$client = new apiClient();

// настраиваем
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setDeveloperKey($api_key);
$client->setRedirectUri($redirect_url);
$client->setApprovalPrompt(false);
$oauth2 = new apiOauth2Service($client);

// если задан этот параметр, то пользователь был перенаправлен обратно на сайт
if (isset($_GET['code'])) {

	// после вызова этого метода мы можем получить информацию о пользователе
	$client->authenticate();

	// получаем информацию
	$info = $oauth2->userinfo->get();

	// ищем пользователя в базе
	$person = ORM::for_table('glogin_users')->where('email', $info['email'])->find_one();

	if(!$person){
		// если не нашли, зарегистрируем его

		$person = ORM::for_table('glogin_users')->create();

		// достаем значения, которые будут занесены в бд
		$person->email = $info['email'];
		$person->name = $info['name'];

		if(isset($info['picture'])){
			// если у пользователя есть фото
			$person->photo = $info['picture'];
		}
		else{
			// если нет, используем стандартную
			$person->photo = 'assets/img/default_avatar.jpg';
		}

		// запись в бд
		$person->save();
	}

	// создаем сессию с идентификатором пользователя
	$_SESSION['user_id'] = $person->id();

	// редирект на страницу демонстрации
	header("Location: $redirect_url");
	exit;
}

// выход
if (isset($_GET['logout'])) {
	unset($_SESSION['user_id']);
}

$person = null;
if(isset($_SESSION['user_id'])){
	// достаем пользователя из бд
	$person = ORM::for_table('glogin_users')->find_one($_SESSION['user_id']);
}

Разберем, что происходит в данном коде. Мы проверяем задан ли элемент code в массиве $_GET. Как говорилось выше, этот элемент указывает на то, что пользователь разрешил доступ и был перенаправлен обратно. После мы запрашиваем информацию о пользователе и записываем в базу. Идентификатор пользователя мы записываем в сессию, таким образом мы будем знать, что пользователь авторизован.
Также мы создаем переменную $person. В ней содержится объект, который вернула библиотека для работы с бд (Idiorm library), этот объект содержит все поля из таблицы glogin_users. Использовать этот объект мы будем ниже.

HTML

HTML код также содержится в index.php, поэтому мы имеем доступ к переменной $person, которую будем использовать для вывода имени и фотографии пользователя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Google Powered Login Form | Tutorialzine Demo</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>Welcome, <b><?php echo htmlspecialchars($person->name)?></b></p>
            	<p>You registered <b><?php echo new RelativeTime($person->registered)?></b></p>
            	<a href="?logout">Logout</a>
			<?php else:?>
            	<a href="<?php echo $client->createAuthUrl()?>">Sign in with Google</a>
            <?php endif;?>

        </div>

    </body>
</html>

Мы проверяем, инициализирована ли переменная $person и выводим имя и фото. В противном случае выводим форму для регистрации.

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