Google Sign-In управляет потоком OAuth 2.0 и жизненным циклом токена, упрощая интеграцию с Google API. Пользователь всегда имеет возможность отозвать доступ к приложению в любое время.
В этом документе описывается, как выполнить базовую интеграцию Google Sign-In.
Создать учетные данные для авторизации
Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учетные данные авторизации, которые идентифицируют приложение на сервере Google OAuth 2.0. Следующие шаги объясняют, как создать учетные данные для вашего проекта. Затем ваши приложения могут использовать учетные данные для доступа к API, которые вы включили для этого проекта.
- Go to the Credentials page.
- Щелкните Создать учетные данные > Идентификатор клиента OAuth .
- Выберите тип веб-приложения .
- Назовите свой клиент OAuth 2.0 и нажмите «Создать».
После завершения настройки запишите созданный идентификатор клиента. Вам потребуется идентификатор клиента для выполнения следующих шагов. (Клиентский секрет также создается, но он нужен только для операций на стороне сервера.)
Загрузите библиотеку платформы Google
Вы должны включить библиотеку платформы Google на свои веб-страницы, которые интегрируют Google Sign-In.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Укажите идентификатор клиента вашего приложения
Укажите идентификатор клиента, который вы создали для своего приложения, в Google Developers Console с помощью метаэлемента google-signin-client_id .
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">Добавьте кнопку входа в Google
Самый простой способ добавить кнопку входа Google на свой сайт — использовать автоматически отображаемую кнопку входа. С помощью всего нескольких строк кода вы можете добавить кнопку, которая автоматически настраивается так, чтобы иметь соответствующий текст, логотип и цвета в соответствии с состоянием входа пользователя и запрошенными вами областями.
Чтобы создать кнопку входа в Google с настройками по умолчанию, добавьте элемент div с классом g-signin2 на страницу входа:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Получить информацию о профиле
После входа пользователя в Google с использованием областей по умолчанию вы можете получить доступ к идентификатору Google, имени, URL-адресу профиля и адресу электронной почты пользователя.
Чтобы получить информацию о профиле пользователя, используйте метод getBasicProfile() .
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
Выйти из системы
Вы можете разрешить пользователям выходить из вашего приложения без выхода из Google, добавив кнопку выхода или ссылку на свой сайт. Чтобы создать ссылку для выхода, прикрепите функцию, которая вызывает метод GoogleAuth.signOut() , к событию onclick ссылки.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>