似乎无法通过Firebase打开Goog​​le弹出式窗口

时间:2016-08-22 14:48:16

标签: javascript html authentication firebase firebase-authentication

我一直在尝试使用Firebase Google Auth系统创建一个Web应用程序门户来记录用户。我在点击登录按钮时尝试调用signInWithPopup()函数,但页面仍然莫名其妙地irresponsive。

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Social Login Button</title>
  <script>
      //my Firebase initialization snippet
      var config = {
          apiKey: "AIzaSyBqscqBBOImd2QqtAWCl3VCuKNF4yNwmnc",
          authDomain: "appvise-25c65.firebaseapp.com",
          databaseURL: "https://appvise-25c65.firebaseio.com",
          storageBucket: "appvise-25c65.appspot.com"
      };
      firebase.initializeApp(config);
  </script>


  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-app.js">      </script>
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-database.js"></script>

<script>
    firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
    }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    });




</script>
    <link rel="stylesheet" href="style.css" type="text/css">




 </head>

    <body>  

这是页面的实际标记。

      <div class="login-box">
        <h2>Social Login Button</h2>
        <a href="#" class="social-button" id="facebook-connect"  > <span>Connect with Facebook</span></a>
        <a href="#" class="social-button" id="google-connect"  onclick="signInWithPopup()" > <span>Connect with Google</span></a>
        <a href="#" class="social-button" id="twitter-connect"> <span>Connect with Twitter</span></a>
        <a href="#" class="social-button" id="linkedin-connect"> <span>Connect with LinkedIn</span></a>
    </div>
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

    </body>
   </html>

当悬停signInWithPopup时,会出现错误提示未解决的功能或方法&#39;弹出,即使Firebase似乎已经安装好了。

感谢您的时间。

1 个答案:

答案 0 :(得分:0)

在您加入Firebase SDK之前,您正在致电firebase.initializeApp。移动这三行:

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-app.js">      </script>
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase-database.js"></script>

高于initializeApp来电。