Firebase GAS webapp Google popup disappears

2019-08-15 17:36发布

站内问答 / 移动开发
1903 4 4

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>

4条回答
我命由我不由天
2楼-- · 2019-08-15 18:04

I got the same problem , it worked fine while debugging in localhost, but when trying to login from "https://www.example.com" the popup disappear imediately, I fixed it by adding "mydomain.com" in firebase console -> Authentication ->SIGN-IN METHOD tab: scroll down to "OAuth redirect domains" and click "ADD DOMAIN"

enter image description here

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-08-15 18:04

Here is the bare minimum I found needed to get client side auth working in Apps Script. I created a new firebase project. I enabled Google sign-in provider. I added the webapp's origin to the OAuth redirect domain list. I get this by launching the webapp and looking in dev tools inspector. Under the elements tab it will be the src of the top level iframe. It will look something like: 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>
查看更多
0人赞 添加讨论(0) 举报
做个烂人
4楼-- · 2019-08-15 18:11

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).
查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2019-08-15 18:15

I was just struggling, try to debug around the code and find if there is any wrong in javascript but could find nothing. Then base on answer from Kat, I thought it could not be that complicated, and it might come from some configuration mistakes in firebase website. So go into firebase configuration for your app, in the tab Authentication, there is Sign-in method and there it is, all log-in methods to my app was disabled.

I enabled google authentication and boom, it works as expected. It is also amazed how easy it is for setup authentication system for my app using firebase. Thanks guys from firebase :-)

Firebase configuration

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)