Firebase GAS Web 应用程序 Google 弹出窗口消失

问题描述 投票：0回答：4

我正在尝试升级我的 firebase GAS Web 应用程序，之前我有一个弹出窗口，可以让用户使用 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>
authentication google-apps-script firebase firebase-authentication
4个回答
7
投票

问题解决了。我认识了 Firebase 的优秀员工，Dane 和我一起完成了这一切，直到成功为止。我的代码没问题，问题出在凭据上。如果您遇到同样的问题，我们经历过的所有步骤都是：

谷歌配置

  • 转到此链接谷歌开发者控制台
  • 转到屏幕左侧的凭据选项
  • 单击浏览器 API 密钥并复制它
  • 确保您复制的 API 密钥与 Web 应用程序配置中的 API 密钥相同。如果不匹配，请将代码中的 api 密钥替换为您复制的 API 密钥
  • 在“OAuth 2.0 客户端 ID”下，点击“Web 客户端（由 Google 服务自动创建）”
  • 导航至“授权 JavaScript 起源”部分

  • 添加您在测试页面时访问的完整网址，或者确保添加更通用的网址，例如 https://script.google.com/*

  • 单击 oAuth Web 应用程序

  • 对于授权的 javascript 来源，请添加 .firebaseapp.com

  • 对于授权重定向 URI，请添加 .firebaseapp.com/__/auth/handler

  • 点击“Web 客户端（由 Google 服务自动创建）”

  • 复制客户端 ID 和客户端密钥
  • 转到 Firebase 控制台的登录方法页面
  • 点击谷歌
  • 点击Web SDK配置
  • 使用您获得的值更新客户端 ID 和密钥
  • 点击保存

Firebase 配置

  • 转到此 Firebase 控制台
  • 选择您的项目，单击屏幕左侧的“身份验证”选项，然后选择屏幕顶部的登录方法
  • 向下滚动到 OAuth 重定向域，查看您的自定义域是否已列出

  • 如果没有，请单击“添加域”，输入您的自定义域，然后单击“添加”

  • 打开 Google Chrome 并转到部署您的应用的页面。

  • 右键单击页面并选择“检查”
  • 您将看到一个控制台选项卡和一个向下箭头（看起来像一个倒三角形）。 - 单击向下箭头并选择“userHtmlFrame (...)”
  • 在终端（指向右侧的蓝色箭头）中，粘贴“window.location.hostname”并单击 Enter
  • 将显示一个字符串。复制它并从 Firebase 控制台将其添加到授权域（身份验证 > 登录方法 > OAuth 重定向域）。
5
投票

我遇到了同样的问题，在本地主机中调试时工作正常，但是当尝试从“https://www.example.com”登录时，弹出窗口立即消失，我通过在 firebase 控制台中添加“mydomain.com”来修复它-> 身份验证 -> 设置选项卡 -> 授权域 -> 单击“添加域”

enter image description here

2
投票

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

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

Firebase configuration

1
投票

这是我发现在 Apps 脚本中进行客户端身份验证所需的最低限度。我创建了一个新的 firebase 项目。我启用了 Google 登录提供商。我将 web 应用程序的来源添加到 OAuth 重定向域列表中。 我通过启动网络应用程序并查看开发工具检查器来得到这个。在 elements 选项卡下，它将是顶级 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.