Ошибка FedCM и GSI: форма авторизации закрывается при клике

При интеграции Google Sign-In (GSI) на сайте разработчики нередко сталкиваются с ситуацией: после инициализации формы любой клик на странице приводит к её закрытию с ошибкой в консоли: The request has been aborted и [GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason. Это происходит из-за особенностей работы Federated Credential Management (FedCM) - нового API от Google, который заменил сторонние cookie и iFrame.

Почему возникает AbortError при клике на странице?

FedCM использует AbortController для управления запросами к браузеру. Когда пользователь кликает в любом месте документа, браузер может автоматически отменять (abort) активный запрос FedCM, если он считает, что взаимодействие с пользователем завершилось. Это защитный механизм, предотвращающий фоновый сбор данных. В вашем случае проблема усугубляется тем, что скрипт GSI загружается с задержкой (setTimeout), и к моменту его активации контекст страницы уже нестабилен.

Как исправить интеграцию Google Sign-In?

1. Уберите динамическую вставку скрипта через setTimeout

Загрузка GSI через setTimeout с задержкой 1 секунда (в вашем коде) нарушает жизненный цикл FedCM. Лучше подключать скрипт статически в или сразу при загрузке DOM:

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. Используйте правильный контейнер для кнопки

Вместо динамического создания div#g_id_onload лучше разместить элемент заранее в HTML и инициализировать через google.accounts.id.initialize():

<div id="g_id_onload" data-client_id="YOUR_CLIENT_ID" data-context="signin" data-login_uri="YOUR_URI" data-auto_select="false"></div>

3. Откажитесь от условной загрузки по cookie

Проверка checkCookie('Device') может приводить к тому, что GSI инициализируется в неподходящий момент. Рекомендуется всегда подгружать библиотеку, а показывать форму только при необходимости через CSS или JavaScript.

Дополнительные причины ошибки FedCM

• Несколько одновременных запросов FedCM: если на странице есть другие вызовы FedCM (например, от других сервисов), они могут конфликтовать.
• Блокировка браузером: Chrome может блокировать FedCM в режиме инкогнито или при определённых настройках конфиденциальности.
• Устаревшая версия GSI: используйте последнюю версию библиотеки (актуальная - 1.0.1).

Пример корректной реализации

Вставьте следующий код в или перед закрывающим </body>:

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="YOUR_CLIENT_ID" data-context="signin" data-login_uri="YOUR_URI" data-auto_select="false"></div>
<script>
  window.onload = function() {
    google.accounts.id.initialize({
      client_id: 'YOUR_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(
      document.getElementById('buttonDiv'),
      { theme: 'outline', size: 'large' }
    );
  };
</script>

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