Попытка внедрить Google Sign-In для веб-сайта, но кнопка не появляется

Я пытаюсь реализовать стандартный вариант входа в Google на веб-сайте, как предлагается здесь: https://developers.google.com/identity/sign-in/web/.

Сначала я думал, что просто буду следовать основным инструкциям (https://developers.google.com/identity/sign-in/web/devconsole-project), и я использую только их пример кода:

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
  </body>
</html>

(очевидно, с заменой идентификатора клиента на идентификатор, сгенерированный из их консоли разработчика для моего сайта). Я ввел IP-адрес сайта в качестве допустимого источника JavaScript при создании идентификатора клиента, как описано. Однако кнопка входа даже не появляется.

Я чувствую себя идиотом, потому что я уверен, что есть какой-то очевидный шаг, который я упускаю, но я просто не смог его понять. Есть рекомендации?


person Grey    schedule 03.07.2015    source источник
comment
Я предлагаю вам прочитать эту статью - sanwebe.com/2012/11 /login-with-google-api-php, это хорошо для новичков, потому что предоставляет простую систему входа в систему, которую вы можете копировать и вставлять и играть с ней.   -  person Al.G.    schedule 05.07.2015
comment
У меня точно такая же проблема. Он не появится!   -  person mesqueeb    schedule 20.09.2017


Ответы (5)


Возможно, слишком поздно отвечать, но вот решение.

Удалите «асинхронную отсрочку» при загрузке platorm.js.

person Shirish Gone    schedule 13.06.2017
comment
Это сработало для меня. Может быть, слишком поздно ожидать ответа, но это, вероятно, работает, потому что platform.js ожидает, что функция signOn() будет объявлена? - person noi.m; 06.08.2019
comment
Прошли годы, но я решил, что должен принять это, чтобы оно закрылось. - person Grey; 14.04.2020

У меня была такая же проблема, и она решилась отключением Adblock. Это препятствует правильной загрузке скрипта.

person Niklas Holm    schedule 31.05.2017

API входа в Google работает только на работающем веб-сервере. Вы не сможете увидеть кнопку Sign in, если вы открываете файл напрямую.

Цитата из ответа здесь

Я столкнулся с той же проблемой. Запуск его на сервере xampp работал для меня.

person Amrendra Singh    schedule 20.06.2018

Ваш пример кода сработал для меня. Чтобы заставить его работать:

  1. Создайте временную папку и добавьте файл index.html
  2. Отредактируйте index.html и вставьте в него полное содержимое вашего скрипта.
  3. Запустите веб-сервер на локальном хосте, для моего теста я использовал встроенный веб-сервер Python, python -m SimpleHTTPServer 8000
  4. Перейдите на веб-сервер, работающий на http://localhost:8000.

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

  • Посмотрите, отображается ли контент в другом браузере, я предпочитаю и тестирую в Chrome.
  • Используйте консоль разработчика браузера, чтобы получить информацию об ошибках JavaScript.
  • Убедитесь, что вы правильно настроили клиент в Google Developer Console.
person class    schedule 06.07.2015

У меня тоже была эта проблема. Проблема в том, что я хотел добавить его с помощью javascript, хотя, похоже, Google API запрещает это.

Решение для меня состояло в том, чтобы добавить div в мой файл index.html и установить для него значение display: none;. Затем я могу перемещать его и повторно показывать, когда мне это нужно.

person Nate Levin    schedule 30.08.2020