Firebase GAS webapp Google 弹出窗口消失答案

【问题标题】：Firebase GAS webapp Google popup disappearsFirebase GAS webapp Google 弹出窗口消失
【发布时间】：2016-07-18 13:25:32
【问题描述】：

我正在尝试升级我的 firebase GAS webapp，之前我有一个弹出窗口，可以让用户使用 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>

【问题讨论】：

大概你已经剪断了配置变量？
您是否像 Jonathon 指出的那样在配置中传递了正确的 apiKey 和 authDomain 字段？这些是此功能所必需的。还要检查控制台是否有错误。
是的，我把它们删掉了 :)

标签： login google-apps-script firebase firebase-authentication

【解决方案1】：

我遇到了同样的问题，在 localhost 中调试时它运行良好，但是当尝试从“https://www.example.com”登录时，弹出窗口立即消失，我通过在 firebase 控制台中添加“mydomain.com”来修复它 -> 身份验证 - >登录方法选项卡：向下滚动到“OAuth 重定向域” 然后点击“添加域”

【讨论】：

【解决方案2】：

我只是在苦苦挣扎，尝试调试代码并查找 javascript 中是否有任何错误，但什么也找不到。然后根据Kat的回答，我认为它不会那么复杂，它可能来自firebase网站的一些配置错误。因此，进入您的应用程序的 firebase 配置，在“身份验证”选项卡中，有登录方法，就在那里，我的应用程序的所有登录方法都已禁用。

我启用了谷歌身份验证和繁荣，它按预期工作。使用 firebase 为我的应用程序设置身份验证系统是多么容易也令人惊讶。谢谢来自firebase的人:-)

【讨论】：

【解决方案3】：

这是我发现让客户端身份验证在 Apps 脚本中工作所需的最低要求。我创建了一个新的 firebase 项目。我启用了 Google 登录提供程序。我将 webapp 的来源添加到 OAuth 重定向域列表中。我通过启动 webapp 并查看开发工具检查器来得到这个。在元素选项卡下，它将是顶级 iframe 的 src。它看起来像：n-rn4a4ioahvqauYhvzh2nktp3vxnuap6y7htmacq-0lu-script.googleusercontent.com

代码.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>

【讨论】：

我在控制台得到这个：googleapis.com/identitytoolkit/v3/relyingparty/… 加载资源失败：服务器响应状态为 400 () iframe.js:319 [ 1.019s] [firebase-auth] 信息：当前域未被授权进行 OAuth 操作。这将阻止 signInWithPopup、signInWithRedirect、linkWithPopup 和 linkWithRedirect 工作。将您的域添加到 Firebase 控制台中的 OAuth 重定向域列表 -> 身份验证部分 -> 登录方法选项卡。
尝试将“googleusercontent.com”添加到 OAuth 重定向域。注意：仅用于测试这不是生产的好主意。
我尝试添加它，但控制台中仍然出现相同的错误，并且弹出窗口消失了。
我已经尝试将我能想到的每个地址都添加到 OAuth 中。我仍然在控制台中得到这个：这个应用程序，由它托管的域标识，没有被授权使用 Firebase 身份验证和提供的 API

【解决方案4】：

问题解决了。我在 Firebase 遇到了很棒的人，Dane 和我一起努力，直到成功。我的代码很好，问题出在凭据上。如果您有同样的问题，我们所经历的所有步骤：

谷歌配置

转到此链接google developers console
转到屏幕左侧的凭据选项
点击浏览器API密钥并复制
确保您复制的 API 密钥与 Web 应用配置中的 API 密钥相同。如果不匹配，请将代码中的 api 密钥替换为您复制的 API 密钥
在“OAuth 2.0 客户端 ID”下，点击“Web 客户端（由 Google 服务自动创建）”
导航到“授权的 JavaScript 来源”部分
添加您在测试页面时访问的完整 URL，或者可以肯定的是，添加一个更通用的 URL，例如 https://script.google.com/*
点击 oAuth 网络应用程序
对于授权的 javascript 来源，请添加 .firebaseapp.com
对于授权的重定向 URI，请添加 .firebaseapp.com/__/auth/handler
点击“Web 客户端（由 Google 服务自动创建）”
复制客户端 ID 和客户端密码
转到 Firebase 控制台的登录方法页面
点击谷歌
点击Web SDK配置
使用您获得的值更新客户端 ID 和机密
点击保存

Firebase 配置

转到此 Firebase 控制台
选择您的项目，点击屏幕左侧的 Auth 选项，然后选择屏幕顶部的登录方法
向下滚动到 OAuth 重定向域，查看是否列出了您的自定义域
如果没有，请单击添加域，输入您的自定义域并单击添加
打开 Google Chrome 并转到部署应用程序的页面。
右键单击页面并选择“检查”
您将看到一个控制台选项卡和一个向下箭头（看起来像一个倒三角形）。 - 单击向下箭头并选择“userHtmlFrame (...)”
在终端中（蓝色箭头指向右侧），粘贴“window.location.hostname”并点击进入
将显示一个字符串。将其复制并从您的 Firebase 控制台添加到授权域（身份验证 > 登录方法 > OAuth 重定向域）。

【讨论】：

只需将链接添加到 Google Developers Console > 凭据：console.developers.google.com/apis/credentials