Как решить "idpiframe_initialization_failed" для локального хоста?

Question

Вот мой код инициализации:

            function HandleGoogleApiLibrary() {
                // Load "client" & "auth2" libraries
                gapi.load('client:auth2', {
                    callback: function () {
                        // Initialize client & auth libraries
                        gapi.client.init({
                            apiKey: 'My API Key',
                            clientId: 'My Client ID',
                            scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me'
                        }).then(
                            function (success) {
                                console.log("Yaaay");
                            },
                            function (error) {
                                console.log("Nope");
                                console.log(error);
                            }
                        );
                    },
                    onerror: function () {
                        // Failed to load libraries
                    }
                });
            }

, который выдает мне следующее сообщение об ошибке:

details: "Not a valid origin for the client: http://127.0.0.1 has not been whitelisted for client ID 388774754090-o7o913o81ldb2jcfu939cfu36kh9h0q6.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
error: "idpiframe_initialization_failed"

Мое приложение еще не запущено, поэтому для разработки я использую localhost,Дело в том, что при каждом переполнении стека / ссылке, которую я обнаружил, они указали, что в Authorised JavaScript origins и Authorised redirect URIs я должен использовать http://localhost вместо http://127.0.0.1.Если я это сделаю, я получу эту ошибку и Permission denied to generate login hint for target domain., если я попытаюсь войти в систему.

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

Нет смысла, другого способа указать localhost нет, и я просто не могу использовать API.

Answer 1

В моем случае это была двусторонняя проблема.

1. Необходимо добавить источник в консоль Google.

   Как выглядит источник?http://localhost

2. Очистить кеш.

   Иногда это не работает, и вы можете начать думать, что это не проблема кеша.Подробности ниже.

---

1.Как добавить свое происхождение в консоль Google?

• Перейдите сюда: https://console.cloud.google.com/apis/credentials
• Выберите нужный проект вверху.
• Найти OAuth 2.0 client IDs и в этом разделе выберите (или создайте) идентификатор клиента.
• В открывшемся окне найдите раздел Restrictions -> Authorized JavaScript origins и добавьте либо http://localhost или http://localhost:8000 (указав нужный порт).

2.Очистить кеш.

Если шаг № 1 не решил проблему, необходимо очистить кеш.

Если вы хотите удалить только localhost кеш, в ChromeВы можете сделать это следующим образом:

• Открыть настройки -> Дополнительные инструменты -> Инструменты разработчика;
• Щелкните правой кнопкой мыши кнопку «Перезагрузить» -> Очистить кэш и выполнить полную перезагрузку.

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

Answer 2

Для меня проблема была решена отключением AdBlocker

Answer 3

Чтобы спасти будущих читателей, мне удалось пройти аутентификацию на локальном хосте, набрав ровно http://www.localhost в поле «Авторизованные источники Javascript» при создании идентификатора клиента (Credentials / Developer Console).Абсолютно неочевидный и анти-пользовательский, но ни http://localhost, ни http://127.0.0.1 не сработали.