可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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

回答2:

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"

回答3:

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>

回答4:

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