使用Firebase认证与Facebook联合登录

Question

在我的安卓手机上测试登录我的网页应用程序时，我收到以下消息：

“firebase.js:75 Uncaught Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http or https..”

我已将我的firebase url添加到我的fb应用程序的有效OAuth重定向URI中 - https://.firebaseio.com/。我在firebase的auth部分中添加了我的应用程序ID和名称。我是否漏掉了什么？谢谢。

我在这里使用chrome远程调试：file:///android_asset/www/index.html#/app/people

这可能是它抗议的原因吗？

var provider = new firebase.auth.FacebookAuthProvider();

console.log(provider);
  firebase.auth().signInWithPopup(provider).then(function(result) {
 // This gives you a Facebook Access Token. You can use it to access theFacebook API.
   var token = result.credential.accessToken;
// The signed-in user info.
  var user = result.user;
  console.log(user, token);
  UserService.setUser(user, token);
// ...
}).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;
  console.log(errorCode);

  });

- Bill Pope

---

认证在使用 file:// 加载文件时无法工作。您需要从一个适当的 Web 服务器加载 HTML 才能使其正常工作。 - Frank van Puffelen

是的，我也这样想。我正在使用PhoneGap的轻量级adb在我的手机上运行应用程序。也许，我可以通过某种方式在node上运行它。有什么建议吗？谢谢。 - Bill Pope

只需启动本地服务器。 有许多适用于此的Node模块，请在npm上搜索即可。 - andyrandy

我正在使用Ionic 2框架，在Android上遇到了相同的问题！在浏览器中，它工作正常。 - saiy2k

好的。谢谢。我会这么做的。你必须将deviceReady更改为documentReady才能在你的浏览器中运行吗？ - Bill Pope

它似乎正在工作（即，重定向正确），但是当它调用getRedirectResult时，我现在遇到了内部服务器错误。我在fb的oAuth重定向中使用这个：https://my-app-name.firebaseapp.com/__/auth/handler。 - Bill Pope

Answer 1

针对 Facebook 登录问题，我找到了一个解决方法，适用于 Ionic 1 并且理论上也适用于 Ionic 2。

添加 Cordova 插件 cordova-plugin-facebook4。 在认证代码中，我添加了以下内容：

if ((window.cordova && device.platform == 'iOS') || (window.cordova && device.platform == 'Android')) {
    facebookConnectPlugin.login(['public_profile'], function(result) {
        provider = firebase.auth.FacebookAuthProvider.credential(result.authResponse.accessToken);
        Auth.$signInWithCredential(provider).then(function(authData) {
            // User successfully logged in
        }).catch(function(error) {
            // Login error
        });
    }, function(error) {
        // Login error
    });
} else {
    provider = new firebase.auth.FacebookAuthProvider();
    Auth.$signInWithPopup(provider).then(function(authData) {
        // User successfully logged in
    }).catch(function(error) {
        // Login error
    });
}

基本上，这会确保在设备上使用Facebook登录SDK，而在浏览器中运行时将使用Firebase signInWithPopup。

- Alexis Susset

Answer 2

以下操作：signInWithPopup、signInWithRedirect、linkWithPopup、linkWithRedirect 和 getRedirectResult 仅在http/https环境中支持。您可以在文件环境中使用其余的API。

- bojeil