Login Firebase GAS网络应用程序谷歌弹出窗口消失

Login Firebase GAS网络应用程序谷歌弹出窗口消失,login,google-apps-script,firebase,firebase-authentication,Login,Google Apps Script,Firebase,Firebase Authentication,我正在尝试升级我的firebase GAS网络应用程序,之前我有一个弹出窗口,可以让用户通过谷歌登录。我不确定我做错了什么,但我已经升级到了新的firebase,现在正试图使用新的代码格式获得相同的登录 发生的是弹出窗口出现并立即消失。有人能看出我做错了什么吗 谢谢你的帮助 <html lang="en"> <head> <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"&

我正在尝试升级我的firebase GAS网络应用程序,之前我有一个弹出窗口,可以让用户通过谷歌登录。我不确定我做错了什么,但我已经升级到了新的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>

变量配置={
apiKey:“,
authDomain:“”,
数据库URL:“”,
存储桶:“
}; 
firebase.initializeApp(配置);
名字
var provider=new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(提供程序)。然后(函数(结果){
var user=result.user;
document.getElementById(“名称”).value=user;
}).catch(函数(错误){
console.log(错误);
});   

以下是我发现的使客户端身份验证在应用程序脚本中工作所需的最低要求。我创建了一个新的firebase项目。我启用了谷歌登录提供商。我将webapp的源代码添加到OAuth重定向域列表中。我通过启动webapp并查看devtoolsinspector来实现这一点。在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>

//初始化Firebase
变量配置={
apiKey:“AIzaSyADzG0boXmVUJb07K5NbCC0c6SrP8x3Msk”,
authDomain:“testclientauth-57c09.firebaseapp.com”,
数据库URL:“https://testclientauth-57c09.firebaseio.com",
storageBucket:“testclientauth-57c09.appspot.com”,
};
firebase.initializeApp(配置);
var provider=new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/plus.login');
firebase.auth().signInWithPopup(提供程序)。然后(函数(结果){
var token=result.credential.accessToken;
var user=result.user;
console.log(用户)
}).catch(函数(错误){
var errorCode=error.code;
var errorMessage=error.message;
var email=error.email;
var-credential=error.credential;
});

以下是我发现的使客户端身份验证在应用程序脚本中工作所需的最低要求。我创建了一个新的firebase项目。我启用了谷歌登录提供商。我将webapp的源代码添加到OAuth重定向域列表中。我通过启动webapp并查看devtoolsinspector来实现这一点。在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>

//初始化Firebase
变量配置={
apiKey:“AIzaSyADzG0boXmVUJb07K5NbCC0c6SrP8x3Msk”,
authDomain:“testclientauth-57c09.firebaseapp.com”,
数据库URL:“https://testclientauth-57c09.firebaseio.com",
storageBucket:“testclientauth-57c09.appspot.com”,
};
firebase.initializeApp(配置);
var provider=new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/plus.login');
firebase.auth().signInWithPopup(提供程序)。然后(函数(结果){
var token=result.credential.accessToken;
var user=result.user;
console.log(用户)
}).catch(函数(错误){
var errorCode=error.code;
var errorMessage=error.message;
var email=error.email;
var-credential=error.credential;
});

问题解决了。我结识了Firebase的优秀员工,Dane和我一起努力,直到成功。我的代码很好,问题出在凭证上。如果您有相同的问题,我们所经历的所有步骤是:

谷歌配置

  • 转到此链接
  • 转到屏幕左侧的凭据选项
  • 单击浏览器API键并复制它
  • 确保复制的API密钥与web应用程序配置中的API密钥相同。如果不匹配,请将代码中的api键替换为复制的api键
  • 在“OAuth 2.0客户端ID”下,单击“Web客户端(由Google服务自动创建)”
  • 导航到“授权JavaScript来源”部分
  • 在测试页面时添加您正在访问的完整URL,或者可以肯定的是,添加一个更通用的URL,如

  • 单击OAuthWeb应用程序

  • 对于授权的javascript来源,请添加.firebaseapp.com
  • 对于授权的重定向URI,请添加.firebaseapp.com//uuuu/auth/handler

  • 单击“Web客户端(由谷歌服务自动创建)”

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

  • 转到firebase控制台
  • 选择您的项目,单击屏幕左侧的“身份验证”选项,然后选择屏幕顶部的“登录方法”
  • 向下滚动到OAuth重定向域,查看是否列出了自定义域
  • 如果没有,请单击添加域,输入自定义域,然后单击添加

  • 打开Google Chrome并转到部署应用程序的页面

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

    • 问题解决了。我在Firebase结识了很多优秀的人Dane和我一起工作