Question

我正在尝试升级我的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>

Answer 1

问题解决了。我找到了Firebase的优秀人才，Dane和我一直在努力工作直到它工作。我的代码没问题，问题在于凭证。如果您遇到同样的问题，我们将采取的所有步骤都是：

Google配置

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

Firebase配置

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

Answer 2

我遇到了同样的问题，它在localhost中调试时工作正常，但是当尝试从＆＃34; https://www.example.com＆＃34;弹出窗口立即消失，我通过添加＆＃34; mydomain.com＆＃34;来修复它。在firebase控制台中 - ＆gt;身份验证 - ＆gt;登录方法标签：向下滚动到＆＃34; OAuth重定向域＆＃34; 然后点击＆＃34;添加域名＆＃34;

Answer 3

以下是我发现在Apps脚本中使用客户端身份验证所需的最低限度。我创建了一个新的firebase项目。我启用了Google登录提供商。我将webapp的来源添加到OAuth重定向域列表中。我通过启动webapp并查看开发工具检查器来获得此信息。在元素选项卡下，它将是顶级iframe的src。它看起来像：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>

Answer 4

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

我启用了Google身份验证和热身，它按预期工作。令人惊讶的是，使用firebase为我的应用程序设置身份验证系统是多么容易。谢谢来自firebase的人： - ）

Firebase GAS webapp Google弹出消失

4 个答案: