Как сделать авторизацию на сайте через гугл

Вход через Google

Сервис «Google Аккаунты» позволяет через протокол OAuth 2.0 реализовать авторизацию пользователя на своем сайте. После прохождения авторизации можно получить имя, фамилию, e-mail и юзерпик пользователя.

Регистрация приложения

Далее, прейти в раздел «API и сервисы» → «Окно запроса доступа OAuth».

И заполнить форму, в которой требуется указать: название приложения, email для связи, домен вашего сайта, ссылки на главную сайта и политику конфиденциальности.

После отправки формы будет предложено создать учетную запись, в списке нужно выбрать «Идентификатора клиента OAuth».

Тип: веб-приложение, в «URI перенаправление» нужно указать адрес вашего PHP скрипта-обработчика, например https://example.com/login_google.php .

После этого получим индификатор клиента и ключ.

Ссылка для входа

Сформируем ссылку для авторизации пользователя:

Перейдя по такой ссылки увидим следующий запрос:

Код скрипта

После подтверждения запроса, будет выполнен редирект на указанный PHP-скрипт, в GET-параметр добавится код авторизации, меняем его на токен и получаем данные пользователя.

Adding “Sign in with Google” to your website

Have you ever thought of adding “sign in with google” option to your website?

It’s not tougher than maintaining user information secure with encryption standards.

Also, Do you observe LinkedIn suggesting to connect with your contacts when you sign with your google account?

In this article we will look into OAuth and add “sign in with google” to a simple website!!

OAuth-Open Authorisation

In our daily life, we regularly come across articles “ XYZ hacked ABC website user details” .

So, It’s getting difficult to gain trust of users initially. So, Web Developers leaves a familiar and trusted authentication method such as signing in with google and facebook to user as a option.

OAuth is a standard protocol having following features

Granular Level of Access

When you login with google, you can specify what sort of your information is allowed to access.

We usually come across this

Website will tell you what part of your information is being accessed.

Read/Read + Write access

Websites may ask for either Read only access or both read and write access.

We usually see following when we login through Facebook

“ABC website won’t post anything on Facebook”

“XYZ website would like to post to Facebook for you”

Revoke Access

User must be able revoke the access granted to website.

If user logged in through “Gmail” then he/she must be able to revoke the access through “Gmail” .

Steps after you click on “Sign in with Google”

1. You will be redirected to Gmail sign in page
2. Google will authenticate you with your credentials and send auth code to website.
3. Website will now send back the auth code to Google and will get access token and store it. This access token is useful to obtain information of user.

Done with theory. We will implement this for website made with node.js

Passport

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

Head over to “passport-google-oauth20”strategy which we are going to usein this article.

Set up

Go to your project directory and install “passport-google-oauth20”.

Next, go to Google Developer console and create a project of your own name.

Now go to “OAuth consent screen”

here we will configure everything. Fill out all necessary details.

We will add what details we are going to access in scope section

By default, These 3 details are included. You can select APIs for accessing other information such as contacts etc.

Now create a OAuth Client Id

Fill out application name.

Javascript origin is “https://localhost:5000”

and Redirect URL is where user will be redirected once authenticated.

Then you will receive Client id and Client secret .

import packages and create app.

We need to serialize and de-serialize our user

Set up strategy.Following code is taken from here.

Note : The call back url should match with Redirect URL given inside console.

Once user is authenticated, Google will give you a access token to access information and profile information.

Inside callback in strategy, we are searching for user with profile.id received from google and creating one if doesn’t exist.

Add the following code to your login page to enable register with google button

When user clicks on button, the page will make GET request to “./auth”

We will handle request in app.js

We must also handle GET request from call back url

The profile which we are going to receive from google is as follows

We are going to save Id received from Google in our database.

Conclusion

We understood OAuth standard and added “Sign in with Google” to a website.

In similar way, we can add sign in options with Facebook, LinkedIn and Twitter.

Регистрация на сайте через Google

Создайте в корне своего сайта 2 папки, например social_login и social_login_callback. В первой будут храниться файлы для использования их в качестве прямых ссылок на инициализацию аутентификации в социальной сети, а во второй обработчики ответов от Google.

Создание нового приложения

Чтобы создать новое приложение перейдите по этой ссылке и нажмите на кнопку "Создать"

Теперь можно изменить название приложения, при необходимости, и нужно нажать на кнопку "Создать"

Процесс создания может занимать некоторое время. Не уходите со страницы.

Теперь выбираем "Создать учетные данные" и Идентификатор клиента OAuth.

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

В разделе Тип приложения выбираем Веб-приложение.

Заполняем поле "Разрешенные URI перенаправления", указав полный путь к файлу обработчика, например https://site.ru/social_login_callback/google.php

Нажимаем кнопку Создать.

На появившейся странице копируем идентификатор и секретный ключ клиента – они понадобятся нам при настройке нашего скрипта.

Переходим к написанию кода

Создаем файл google.php в папке social_login и записываем в него код:

OAuth 2.0 аутентификация через Google: как реализовать вход через Google на сайте

Senior PHP Developer/Team Lead в Tapmedia, Преподаватель Компьютерной школы Hillel.

1. 1. Шаг #1. Регистрация нового проекта
2. 2. Шаг #2. Регистрация приложения
3. 3. Шаг #2.1. Настройка экрана согласия
4. 4. Шаг #2.2. Настройка запрашиваемых прав
5. 5. Шаг #2.3. Настройка тестовых пользователей
6. 6. Шаг #2.4. Сводная информация
7. 7. Шаг #3. Генерация ключей доступа
8. 8. Шаг #4. Создание файла настроек
9. 9. Шаг #5. Генерация ссылки
10. 10. Шаг #6. Получение токена доступа
11. 11. Шаг #7. Получение данных о пользователе
12. 12. Верификация приложения
13. 13. Заключение

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

Для дальнейших шагов вам понадобится активный Google аккаунт

Все шаги будут характерны для локального сервера с тестовым доменом auth.lol

Шаг #1. Регистрация нового проекта

Для начала необходимо создать проект в Google Cloud Platform.

Шаг #2. Регистрация приложения

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

Шаг #2.1. Настройка экрана согласия

Отправляемся на страницу APIs & Services. OAuth consent screen для того, чтобы выбрать режим экрана согласия, на который будут перенаправлены пользователи при попытке входа через Google на вашем сайте.

Выбираем один из режимов работы данного экрана:

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

В нашем случае выбираем пункт External.

После нажатия на кнопку «Create» попадаем на первый шаг: настройку экрана согласия.

Вводим информацию о нашем приложении:

• Название приложения
• Электронную почту технической поддержки
• Загружаем логотип (по желанию)

Далее необходимо ввести подробную информацию о нашем домене. В нашем случае будем вводить тестовые данные:

• Ссылка на главную страницу приложения
• Ссылка на страницу условий конфиденциальности
• Ссылка на страницу с положениями и условиями использования

Далее следует очень важный параметр:

• Домены авторизации

Ну и в конце добавляем контактную информацию разработчика:

Нажимаем на кнопку «Save and continue» и переходим к следующему шагу.

Шаг #2.2. Настройка запрашиваемых прав

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

Нажимаем на кнопку «Add or remove scopes».

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

• . /auth/userinfo.email
• . /auth/userinfo.profile

Прокручиваем блок вниз и нажимаем на кнопку «Update». На основной странице жмём «Save and continue».

Шаг #2.3. Настройка тестовых пользователей

Далее следует добавить одного или несколько тестовых пользователей. Для этого жмём на кнопку «Add users».

В открывшемся блоке добавляем тестовый email и нажимаем на кнопку «Add».

Далее жмём на «Save and continue» и переходим к финальному шагу настройки приложения.

Шаг #2.4. Сводная информация

На последней странице настройки приложения вы увидите всю сводную информацию, которую вводили на предыдущих шагах. Если какой-то блок требует редактирования, то жмём кнопку «Edit». В противном случае можем приступать к следующим шагам.

Шаг #3. Генерация ключей доступа

Далее необходимо отправиться на страницу APIs & Services. Credentials и сгенерировать данные, которые будут использоваться для аутентификации созданного приложения.

После загрузки страницы нажимаем на кнопку «Create credentials» и выбираем пункт «OAuth client ID», чтобы сгенерировать новый ключ доступа.

На открывшейся странице заполняем очередную форму:

• Тип приложения: Web application
• Название

В секции «Authorized redirect URIs» вводим адрес, на который пользователь будет направляться после экрана согласия. То есть, это должна быть какая-то страница на нашем сайте, которая будет отвечать за обработку данных пользователя.

Далее жмём на кнопку «Create» и получаем ключи доступа.

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

Шаг #4. Создание файла настроек

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

Создадим файл settings.php и добавим все необходимые URI, которые нам понадобятся для полного прохождения процедуры аутентификации и запросе данных о пользователе:

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

Шаг #5. Генерация ссылки

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

Для начала подключаем файл настроек из шага #4:

Формируем массив параметров. Нам понадобится несколько параметров, которые мы получили в результате регистрации приложения:

Собираем URI, используя константу с фрагментом адреса и массив параметров:

Теперь в нужном месте страницы выведем данную ссылку:

На самой странице это будет выглядеть примерно так:

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

Далее пользователь будет перенаправлен обратно на ваш сайт по адресу, указанному в секции «Authorized redirect URIs» шага #3.

Шаг #6. Получение токена доступа

На последнем шаге мы были перенаправлены обратно на наш сайт GET запросом со специальными параметрами. В них зашит код (code), который поможет достать токен доступа (Access Token). С помощью него мы сможем общаться с Google API и доставать нужную информацию о пользователе.

Чтобы получить токен доступа, необходимо отправить POST запрос с полученным кодом и дополнительными параметрами. Для того, чтобы отправлять HTTP запросы из скрипта было проще, подключим библиотеку Guzzle.

Далее подключим авто-загрузчик и файл настроек в файле callback.php:

Формируем массив параметров для подключения токена доступа. На этот раз нам понадобится секретный ключ (GOOGLE_CLIENT_SECRET) и GET-параметр code:

Инициализируем HTTP клиент и делаем запрос на получение токена:

Обратите внимание, что данный POST запрос должен отправляться как будто через форму. Именно поэтому мы передали параметры в специальном ключе form_params . Если вы будете делать аналогичное действие не через Guzzle, то убедитесь, что форма будет отправлена с заголовком application/x-www-form-urlencoded

Ответ от Google мы получим в формате JSON, поэтому конвертируем его в ассоциативный массив:

В результате получим следующие данные, среди которых есть и токен доступа ( access_token ):

Шаг #7. Получение данных о пользователе

Первым делом можем сохранить токен доступа в отдельную переменную:

Чтобы получить информацию о пользователе, необходимо отправить GET запрос со специальным заголовком Authorization , указав в качестве значения Bearer <token> . Пробел обязателен!

В качестве ответа получим JSON с информацией о пользователе. Конвертируем его в ассоциативный массив для дальнейших действий.

Верификация приложения

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

Для прохождения верификации необходимо вместо тестовых доменов указать реальные, с использования протокола https. В этом случае на странице редактирования экрана согласия, в секции «Publishing status» вы сможете переключиться с режима Testing на In Production.

После замены тестовых доменов на реальные с использованием HTTPS, кнопка «Publish App» станет активной, и вы сможете отправить запрос на верификацию.

Заключение

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

Senior PHP Developer/Team Lead в Tapmedia, Преподаватель Компьютерной школы Hillel.