Использование службы Google Identity Service для создания кнопки регистрации, но во всплывающем окне ничего не отображается

Когда я нажимаю на кнопку подписаться с помощью google, во всплывающем окне браузера появляется надпись

Я просмотрел несколько предыдущих сообщений в SO, но они не решили эту проблему:

Посещаемые ссылки

Вот вывод :

Pop up window

Это конфигурация JS Authorized Origin Configuration

Authorized Origin Image

Я использую Django в качестве бэкенда и вот код для отображения google sign up button :

<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
  </head>
  <body>
    <div id="g_id_onload"
                    data-client_id="client_id"
                    data-context="signup" data-ux_mode="popup"
                    data-login_uri="http://localhost:8000/users/register/signinWithGoogle" data-nonce=""
                    data-auto_prompt="false">
                </div>

                <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline"
                    data-text="signup_with" data-size="large" data-logo_alignment="left">
                </div>
                
  </body>
</html>

Почему кнопка sign up with google не работает, я что-то упустил и как мы можем это исправить?

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

Сначала создайте button, который будет содержать элемент HTML:

<button id="btnGoogleSignIn" style="border:none;background: none;"> </button>

Вы можете использовать приведенный ниже сценарий и связанные с ним функции, в которых я получаю JWT-токен от Google и затем декодирую его, чтобы получить необходимую информацию, например, адрес электронной почты и т.д. Обратите внимание, что я вызываю функцию onSignInGSI в качестве обратного вызова при инициализации кнопки.

<script>  
    function decodeJwtResponseFromGoogleAPI(token) {
            let base64Url = token.split('.')[1]
            let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            let jsonPayload = 
           decodeURIComponent(atob(base64).split('').map(function (c) {
                return '%' + ('00' + 
           c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
            return JSON.parse(jsonPayload)
        }

    function onSignInGSI(response) {
        //console.log(response)
        responsePayload = decodeJwtResponseFromGoogleAPI(response.credential);
        console.log("ID: " + responsePayload.sub);
        console.log('Full Name: ' + responsePayload.name);
        console.log('Given Name: ' + responsePayload.given_name);
        console.log('Family Name: ' + responsePayload.family_name);
        console.log("Image URL: " + responsePayload.picture);
        console.log("Email: " + responsePayload.email);
    }

    window.onload = function () {

        google.accounts.id.initialize({
            client_id: client_id,
            context: 'signin',
            callback: onSignInGSI
        });

        google.accounts.id.prompt();
        
        google.accounts.id.renderButton(document.getElementById("btnGoogleSignIn"), 
        {
            type: "standard",
            text: "signin_with",
            logo_alignment: "left",
            width: 375
        });
    };
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>

Для получения дополнительной информации о конфигурации кнопки вы можете обратиться к здесь:

Из деталей, которые вы указали, поток кода Auth потерпел неудачу, как только он начался из-за неавторизованного происхождения.

В соответствии с сообщением "m=credential_page_library:45 [GSI_LOGGER]: The given origin is not allowed for the given client ID", о котором вы упомянули, вам необходимо добавить "http://localhost:8000/users/register/signinWithGoogle" к разрешенным javascript origin.

Также вам необходимо проверить, что идентификатор клиента, который вы используете, правильный.

Ошибка возникает, когда ваш "Authorized JavaScript origin" начинается не с https://, а с http://.

  • http://my.server.name:8000 не принимается, выдается сообщение:

    Неверное происхождение: Это приложение имеет статус публикации "В производстве". URI должен использовать https:// в качестве схемы.

  • http://localhost:8000 не показывает такого сообщения, но все равно приводит к ошибке.
  • https://my.server.name:8000 работает.
Вернуться на верх