Недавно 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 создаст официальный способ полностью настроить эту кнопку, я обновлю этот пост.
На этом все, спасибо за прочтение.