Интеграция входа в Google в ваше веб-приложение

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

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

Создать учетные данные для авторизации

Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учетные данные авторизации, которые идентифицируют приложение на сервере Google OAuth 2.0. Следующие шаги объясняют, как создать учетные данные для вашего проекта. Затем ваши приложения смогут использовать учетные данные для доступа к API, которые вы включили для этого проекта.

  1. Go to the Credentials page.
  2. Нажмите Создать учетные данные > Идентификатор клиента OAuth .
  3. Выберите тип приложения веб-приложения .
  4. Назовите свой клиент 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>
,

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

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

Создать учетные данные для авторизации

Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учетные данные авторизации, которые идентифицируют приложение на сервере Google OAuth 2.0. Следующие шаги объясняют, как создать учетные данные для вашего проекта. Затем ваши приложения смогут использовать учетные данные для доступа к API, которые вы включили для этого проекта.

  1. Go to the Credentials page.
  2. Нажмите Создать учетные данные > Идентификатор клиента OAuth .
  3. Выберите тип приложения веб-приложения .
  4. Назовите свой клиент 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>