Firebase GAS веб-приложение Google всплывающее окно исчезает

login google-apps-script firebase firebase-authentication

1272 просмотра

4 ответа

114 Репутация автора

Я пытаюсь обновить свое веб-приложение GAS FireBase, и ранее у меня было всплывающее окно, которое входило в систему с помощью Google. Я не уверен, что делаю не так, но я обновился до новой базы FireBase и сейчас пытаюсь получить тот же логин, работающий с новым форматом кода.

Что происходит, так это то, что всплывающее окно появляется и сразу исчезает. Кто-нибудь может увидеть, что я здесь делаю не так?

Спасибо за помощь.

<html lang="en">
<head>
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

<script>
var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: ""
  }; 
 firebase.initializeApp(config);

</script>
</head>

<body>

<label id="name">First Name</label>

<script>
var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
    var user = result.user;
    document.getElementById("name").value = user;
  }).catch(function(error) {
    console.log(error);
  });   
</script>

</body>
</html>
Автор: Kat Источник Размещён: 18.07.2016 01:25

Ответы (4)


0 плюса

5054 Репутация автора

Вот тот минимум, который я нашел необходимым для работы аутентификации на стороне клиента в Apps Script. Я создал новый проект Firebase. Я включил провайдер входа в Google. Я добавил источник веб-приложения в список доменов перенаправления OAuth. Я получил это, запустив веб-приложение и заглянув в инспектор инструментов разработчика. Под вкладкой elements это будет источник верхнего уровня iframe. Это будет выглядеть примерно так:n-rn4a4ioahvqauYhvzh2nktp3vxnuap6y7htmacq-0lu-script.googleusercontent.com

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  </body>
<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyADzG0boXmVUJb07K5NbCC0c6SrP8x3Msk",
    authDomain: "testclientauth-57c09.firebaseapp.com",
    databaseURL: "https://testclientauth-57c09.firebaseio.com",
    storageBucket: "testclientauth-57c09.appspot.com",
  };
  firebase.initializeApp(config);
</script>
<script>
 var provider = new firebase.auth.GoogleAuthProvider();
 provider.addScope('https://www.googleapis.com/auth/plus.login');
 firebase.auth().signInWithPopup(provider).then(function(result) {
  var token = result.credential.accessToken;
  var user = result.user;  
 console.log(user)

}).catch(function(error) {  
  var errorCode = error.code;
  var errorMessage = error.message;  
  var email = error.email;  
  var credential = error.credential;  
});

</script>
</html>
Автор: Spencer Easton Размещён: 21.07.2016 02:08

5 плюса

114 Репутация автора

Проблема решена. Я познакомился с замечательными людьми в Firebase, и мы с Дейном прорабатывали все это, пока это не сработало. Мой код был в порядке, проблема была в учетных данных. Если у вас есть та же проблема, все шаги, которые мы прошли:

Конфигурация Google

  • Перейти по этой ссылке в консоли разработчиков Google
  • Перейти к опции учетных данных в левой части экрана
  • Нажмите «Ключ API браузера» и скопируйте его
  • Убедитесь, что ключ API, который вы скопировали, совпадает с ключом API в конфигурации вашего веб-приложения. Если он не совпадает, замените ключ API в своем коде на ключ API, который вы скопировали.
  • В разделе «Идентификаторы клиента OAuth 2.0» нажмите «Веб-клиент (автоматически созданный службой Google)».
  • Перейдите в раздел «Авторизованные источники JavaScript»
  • Добавьте полный URL-адрес, к которому вы обращаетесь при тестировании страницы, или, конечно, более общий, например https://script.google.com/*

  • Нажмите на веб-приложение oAuth

  • Для авторизованного происхождения JavaScript добавьте .firebaseapp.com
  • Для авторизованных URI перенаправления добавьте .firebaseapp.com / __ / auth / handler

  • Нажмите «Веб-клиент (автоматически созданный службой Google)»

  • Скопируйте идентификатор клиента и секрет клиента
  • Перейдите на страницу метода входа в консоль Firebase.
  • Нажмите Google
  • Нажмите Конфигурация Web SDK
  • Обновите идентификатор клиента и секрет, используя полученные значения
  • Нажмите сохранить

Конфигурация Firebase

  • Перейти к этой консоли Firebase
  • Выберите ваш проект, нажмите на опцию Auth в левой части экрана, затем выберите метод входа в верхней части экрана.
  • Прокрутите вниз до доменов перенаправления OAuth и посмотрите, указан ли ваш пользовательский домен в списке.
  • Если нет, нажмите Добавить домен, введите свой собственный домен и нажмите Добавить

  • Откройте Google Chrome и перейдите на страницу, где развернуто ваше приложение.

  • Щелкните правой кнопкой мыши страницу и выберите «Осмотреть».
  • Вы увидите вкладку Консоль и стрелку вниз (выглядит как перевернутый треугольник). - Нажмите стрелку вниз и выберите «userHtmlFrame (...)»
  • В терминале (синяя стрелка, указывающая вправо), вставьте 'window.location.hostname' и нажмите Enter
  • Строка будет отображаться. Скопируйте его и добавьте в авторизованные домены с консоли Firebase (Auth> Sign-in Method> OAuth redirect domains).
Автор: Kat Размещён: 09.08.2016 05:14

0 плюса

598 Репутация автора

Я просто боролся, попытался отладить код и найти, есть ли что-то не так в javascript, но ничего не смог найти. Затем, основываясь на ответе Кэт, я подумал, что это может быть не так сложно, и это может произойти из-за некоторых ошибок конфигурации на сайте Firebase. Итак, зайдите в настройку firebase для вашего приложения, во вкладке Authentication есть метод Sign-in и там он есть, все методы входа в мое приложение были отключены.

Я включил гугл аутентификацию и бум, все работает как положено. Также удивляет, насколько легко настроить систему аутентификации для моего приложения, использующего Firebase. Спасибо, ребята из firebase :-)

Конфигурация Firebase

Автор: longbkit Размещён: 22.12.2016 10:02

1 плюс

420 Репутация автора

У меня возникла та же проблема, она работала нормально при отладке в localhost, но при попытке входа с « https://www.example.com » всплывающее окно немедленно исчезло, я исправил его, добавив «mydomain.com» в консоль firebase - > Аутентификация -> вкладка СПОСОБ ВХОДА: прокрутите вниз до «OAuth-перенаправления доменов» и нажмите «ДОБАВИТЬ ДОМЕН»

введите описание изображения здесь

Автор: ykorach Размещён: 19.04.2017 03:43
Вопросы из категории :
32x32