Использовать модель кода

Библиотека Google Identity Services позволяет пользователям запрашивать код авторизации у Google, используя всплывающее окно в браузере или поток перенаправления UX. Это запускает безопасный поток OAuth 2.0 и приводит к созданию токена доступа, используемого для вызова API Google от имени пользователя.

Сводка потока кода авторизации OAuth 2.0:

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

Инициализация клиента кода

Метод google.accounts.oauth2.initCodeClient() инициализирует клиент кода.

Режим всплывающего окна или перенаправления

Вы можете поделиться кодом авторизации, используя пользовательский поток в режиме перенаправления или всплывающего окна . В режиме перенаправления вы размещаете конечную точку авторизации OAuth2 на своем сервере, и Google перенаправляет пользовательский агент на эту конечную точку, передавая код аутентификации в качестве параметра URL. Для режима Popup вы определяете обработчик обратного вызова JavaScript, который отправляет код авторизации на ваш сервер. Режим всплывающего окна можно использовать для обеспечения беспрепятственного взаимодействия с пользователем без необходимости покидать сайт посетителями.

Чтобы инициализировать клиент для:

• Перенаправьте поток пользовательского интерфейса, установите для ux_mode redirect и значение redirect_uri в конечную точку кода авторизации вашей платформы. Значение должно точно соответствовать одному из авторизованных URI перенаправления для клиента OAuth 2.0, который вы настроили в консоли API. Он также должен соответствовать нашим правилам проверки URI перенаправления .

• Поток пользовательского интерфейса всплывающего окна, установите для ux_mode значение popup и значение callback для имени функции, которую вы будете использовать для отправки кодов авторизации на вашу платформу.

Предотвращение атак CSRF

Чтобы предотвратить атаки межсайтовой подделки запросов (CSRF), для потоков пользовательского интерфейса в режимах перенаправления и всплывающего окна используются несколько разные методы. Для режима перенаправления используется параметр состояния OAuth 2.0. Дополнительную информацию о создании и проверке параметра состояния см. в разделе 10.12 «Подделка межсайтового запроса» RFC6749. В режиме Popup вы добавляете к своим запросам собственный HTTP-заголовок, а затем на своем сервере подтверждаете, что он соответствует ожидаемому значению и источнику.

Выберите режим UX, чтобы просмотреть фрагмент кода, показывающий код аутентификации и обработку CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Поток кода триггера OAuth 2.0

Вызовите метод requestCode() клиента кода, чтобы запустить поток пользователя:

<button onclick="client.requestCode();">Authorize with Google</button>

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

Обработка кода авторизации

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

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

В режиме перенаправления запрос GET отправляется на конечную точку, указанную в redirect_url , используя код авторизации в параметре кода URL. Чтобы получить код авторизации:

• Создайте новую конечную точку авторизации , если у вас нет существующей реализации, или

• Обновите существующую конечную точку, чтобы она могла принимать запросы GET и параметры URL. Ранее использовался запрос PUT со значением кода авторизации в полезных данных.

Конечная точка авторизации

Конечная точка вашего кода авторизации должна обрабатывать запросы GET со следующими параметрами строки запроса URL:

Пример запроса GET с параметрами URL к конечной точке с именем auth-code , размещенной на сайте example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Когда поток кода авторизации инициируется более ранними библиотеками JavaScript или прямыми вызовами конечных точек Google OAuth 2.0, используется запрос POST .

Пример POST запроса, содержащего код авторизации в качестве полезной нагрузки в теле HTTP-запроса:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Подтвердить запрос

На своем сервере выполните следующие действия, чтобы избежать атак CSRF.

Проверьте значение параметра состояния для режима перенаправления.

Убедитесь, что заголовок X-Requested-With: XmlHttpRequest настроен на всплывающий режим.

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

Получите доступ и обновите токены

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

Следуйте инструкциям, начиная с шага 5. Обмен кода авторизации для обновления и токенов доступа руководства «Использование OAuth 2.0 для веб-серверных приложений» .

Управление токенами

Ваша платформа надежно хранит токены обновления. Удалять сохраненные токены обновления при удалении учетных записей пользователей или отзыве согласия пользователя с помощью google.accounts.oauth2.revoke или непосредственно с https://myaccount.google.com/permissions .

При желании вы можете рассмотреть возможность использования RISC для защиты учетных записей пользователей с помощью защиты между учетными записями .

Обычно ваша серверная платформа вызывает API Google, используя токен доступа. Если ваше веб-приложение также будет напрямую вызывать API Google из браузера пользователя, вам необходимо реализовать способ совместного использования токена доступа с вашим веб-приложением, но это выходит за рамки данного руководства. При использовании этого подхода и использовании клиентской библиотеки API Google для JavaScript используйте gapi.client.SetToken() , чтобы временно сохранить токен доступа в памяти браузера и разрешить библиотеке вызывать API Google.