Google Sign-In управляет процессом авторизации OAuth 2.0 и жизненным циклом токена, упрощая интеграцию с API Google. Пользователь всегда может отозвать доступ к приложению в любое время.
В этом документе описывается, как выполнить базовую интеграцию входа в систему Google.
Создать учетные данные авторизации
Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учётные данные авторизации, которые идентифицируют приложение на сервере OAuth 2.0 Google. Ниже описано, как создать учётные данные для вашего проекта. Затем ваши приложения смогут использовать эти учётные данные для доступа к API, которые вы включили для этого проекта.
- Go to the Clients page.
- Нажмите «Создать клиента» .
- Выберите тип приложения Веб-приложение .
- Назовите своего клиента OAuth 2.0 и нажмите «Создать».
После завершения настройки запишите созданный идентификатор клиента. Он понадобится вам для выполнения следующих шагов. (Также создаётся секретный ключ клиента, но он нужен только для операций на стороне сервера.)
Загрузить библиотеку платформы Google
Вам необходимо включить библиотеку платформы Google на свои веб-страницы, на которых интегрирована функция входа через Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Укажите идентификатор клиента вашего приложения
Укажите идентификатор клиента, созданный вами для вашего приложения в консоли разработчиков Google с помощью метаэлемента 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>