Firebase GAS webapp Google弹出消失 [英] Firebase GAS webapp Google popup disappears

查看:149
本文介绍了Firebase GAS webapp Google弹出消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

< / body>
< / html>


解决方案

问题解决了。我接触到了Firebase的精彩人物,而我和丹麦人一直在努力。我的代码很好,问题在于证书。如果您遇到同样的问题,那么我们的所有步骤都是:

Google配置


  • 转到此链接 Google开发者控制台

  • 转至屏幕左侧的凭证选项

  • 点击浏览器API密钥并将其复制

  • 确保您复制的API密钥与您的网络应用程序配置中的API密钥相同。如果不匹配,请将代码中的api键替换为您复制的API键

  • 在OAuth 2.0客户端ID下,单击Web客户端(由Google服务自动创建)'

  • 导航到授权的JavaScript来源部分
  • 添加您在测试页面时访问的完整网址或者可以肯定的是,这是一个更普遍的,比如 https://script.google.com/* 点击oAuth网络应用程序

  • 对于授权的JavaScript来源,请添加.firebaseapp.com / li>
  • 对于授权的重定向URI,请添加.firebaseapp.com / __ / auth / handler

  • 客户端(由Google服务自动创建)'


  • 复制客户端ID和客户端密钥 Firebase控制台

  • 点击Google

  • 点击Web SDK配置

  • 更新客户端ID和使用您获得的值的秘密

  • 点击保存



Firebase配置转到此Firebase控制台
选择您的项目,单击身份验证选项,然后选择屏幕顶部的登录方法

  • 向下滚动到OAuth重定向域,查看您的自定义域是否已列出
  • >
  • 如果没有,请点击添加域名,输入您的自定义域名并点击添加

  • 打开Goog​​le Chrome并转到您的应用程序部署的页面。右键单击页面并选择检查
  • 您将看到一个控制台选项卡和一个向下箭头(看起来像一个倒转三角形)。 - 点击向下箭头,选择'userHtmlFrame(...)'在终端(蓝色箭头指向右边),粘贴'window.location.hostname',然后点击
  • / li>
  • 会显示一个字符串。将其复制并从Firebase控制台(Auth>登录方法> OAuth重定向域)将其添加到授权的域中。


  • I am trying to upgrade my firebase GAS webapp, and previously I had a popup which would log the user in with Google. I'm not sure what I'm doing wrong, but I have upgraded to the new firebase, and am now trying to get the same login working with the new code format.

    What is happening, is that the popup comes up and immediately disappears. Can anyone see what I am doing wrong here?

    Thanks for you help.

    <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>
    

    解决方案

    The problem is solved. I got onto the wonderful people at Firebase, and Dane and I worked through it all till it worked. My code was fine, the issue was in the credentials. If you have the same issue, are all the steps we went through:

    Google Configuration

    • Go to this link google developers console
    • Go to the credentials option on the left hand side of the screen
    • Click Browser API Key and copy it
    • Ensure the API key you copied is the same as the API key in your web app configuration. If it doesn't match, replace the api key in your code with the API key that you copied
    • Under 'OAuth 2.0 client IDs', click 'Web client (auto created by Google Service)'
    • Navigate to 'Authorised JavaScript origins' section
    • Add the full URL you're accessing when you're testing the page, or to be sure, a more general one like https://script.google.com/*

    • Click on the oAuth web application

    • For authorized javascript origins please add .firebaseapp.com
    • For authorized redirect URIs please add .firebaseapp.com/__/auth/handler

    • Click 'Web client (auto created by Google Service)'

    • Copy the Client ID and Client Secret
    • Go to the sign In method page of Firebase Console
    • Click Google
    • Click Web SDK configuration
    • Update the Client ID and Secret with the values you obtained
    • Click save

    Firebase Configuration

    • Go to this firebase console
    • Select your project, click on the Auth option on the left hand side of the screen, then select sign in method at the top of the screen
    • Scroll down to the OAuth redirect domains and see if your custom domain is listed
    • If not, click Add domain, input your custom domain and click Add

    • Open Google Chrome and go to the page where your app is deployed.

    • Right click the page and select 'Inspect'
    • You will see a Console tab and a down arrow (looks like an inverted triangle). - Click the down arrow and select 'userHtmlFrame (...)'
    • In the terminal (blue arrow pointing to the right), paste 'window.location.hostname' and click enter
    • A string will be displayed. Copy it and add it to the authorized domains from your Firebase console (Auth > Sign-in Method> OAuth redirect domains).

    这篇关于Firebase GAS webapp Google弹出消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆