Недавно Google отказался от Входа в Интернет. Теперь нам нужно добавить логин с помощью Google Identity Series(GSI).

С этим изменением мы не можем создать полную пользовательскую кнопку, следуя документации, у нас есть только генератор кода для новой кнопки с некоторыми свойствами для ее настройки, такими как текст, выравнивание логотипа и ширина (максимальная ширина составляет 400 пикселей).

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

Как решить эту проблему?

Я потратил некоторое время, чтобы понять, как все работает, и, поскольку эта новая кнопка отображается внутри iframe, вы не можете просто отправить javascript click to button и подделать его внутри своего приложения.

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

Итак, как мы можем это сделать? Вот мое решение:

1 — Включить библиотеку GSI в файл точки входа:

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

2 — Инициализируйте вход в Google:

const googleLoginCallback = (response) => {
// handle JWT token inside response...
// https://developers.google.com/identity/gsi/web/guides/handle-credential-responses-js-functions#handle_credential_response
};


// https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration
window.google.accounts.id.initialize({
  client_id: YOUR_GOOGLE_CLIENT_ID,
  ux_mode: "popup",
  callback: googleLoginCallback,
});

3 — Создайте фальшивую обертку кнопки:

const createFakeGoogleWrapper = () => {
  const googleLoginWrapper = document.createElement("div");
  // Or you can simple hide it in CSS rule for custom-google-button
  googleLoginWrapper.style.display = "none";
  googleLoginWrapper.classList.add("custom-google-button");

  // Add the wrapper to body
  document.body.appendChild(googleLoginWrapper);
  
  // Use GSI javascript api to render the button inside our wrapper
  // You can ignore the properties because this button will not appear
  window.google.accounts.id.renderButton(googleLoginWrapper, {
    type: "icon",
    width: "200",
  });

  const googleLoginWrapperButton =
    googleLoginWrapper.querySelector("div[role=button]");

  return {
    click: () => {
      googleLoginWrapperButton.click();
    },
  };
};

// Now we have a wrapper to click
const googleButtonWrapper = createFakeGoogleWrapper();
// ...
// ...
// ...

4 — Создайте свою пользовательскую кнопку:

// A complete custom button
<script>
  // ...
  // ...
  // ...
  // Now we have a wrapper to click
  const googleButtonWrapper = createFakeGoogleWrapper();
  window.handleGoogleLogin = () => {
    // Use wrapper click to prevent Illegal invocation exception
    googleButtonWrapper.click();
    // This will open GSI login and after success you will have
    // a response on googleLoginCallback method previously created
  };
</script>

<button class="my-awesome-button" onclick="handleGoogleLogin()">
  Login with new Google Sign-in
</button>

После этих 4 простых шагов вы можете получить пользовательскую кнопку для использования с новым входом Google для Интернета. И у нас есть страница успешного входа ниже 🎉.

PS: если Google создаст официальный способ полностью настроить эту кнопку, я обновлю этот пост.

На этом все, спасибо за прочтение.

Чау! 🇧🇷