Firebase 3.0 + Ember 2.0：Torii 适配器必须实现 `open` 才能打开会话

Question

我在使用 torii 适配器进行 Facebook 身份验证时遇到问题，错误是：“Torii 适配器必须实现 open 才能打开会话”。

我访问了很多教程，并尝试了所有介绍的方法，但其中大多数通常是旧的 ember 代码，而且似乎没有一个真正有效。

当前状态：我可以登录，我得到了 facebook 弹出窗口，我可以授权。

使用 fiddler，我还可以看到来自 API 的响应，其中包含一个 JSON 响应，其中包含来自我进行身份验证的用户的所有凭据。 在 Firebase 控制台中，我可以看到授权用户、重置其密码、拒绝访问、...

所有这一切让我相信这“仅仅是”一个前端问题，我似乎无法建立一个合适的“会话”来处理。

我的最终目标是获取相关的用户数据并将其作为“用户”条目传输到我的 Firebase 后端，从而允许网站访问者快速注册，但我会非常高兴有一个活跃的会话所以我可以自己解决剩下的问题。

作为一个前端菜鸟（我通常编写 C# 代码），Ember 可能不是掌握它的最佳选择，但我已经到此为止了，我不打算让一切顺其自然建立一个不同的框架。

我的代码：

config/environment.js

firebase: {
    apiKey: 'xxxxxxx',
    authDomain: 'myappname.firebaseapp.com',
    databaseURL: 'https://myappname.firebaseio.com',
    storageBucket: 'myappname.appspot.com',
    messagingSenderId: '1234567890'
  },

    torii: {
      sessionServiceName: 'session'
    }

torii-adapters/application.js（我已经改变了很多，我什至不记得原始代码是什么，因为我在这里更改/添加/删除的内容似乎根本没有做任何事情。）

import Ember from 'ember';
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';

export default ToriiFirebaseAdapter.extend({
  firebase: Ember.inject.service(),
});

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
    beforeModel: function() {
    return this.get('session').fetch().catch(function() {
    });
  },

  actions:{

    login: function(provider) {
      this.get('session').open('firebase', {
        provider: provider,
      }).then(function(data) {
        console.log(data.currentUser);
      });
    },

    logout: function() {
      this.get('session').close().then(function() {
        this.transitionTo('application');
      }.bind(this));
    }
  }
});

应用程序.hbs

<div class="container">
  {{partial 'navbar'}}
<a {{action "signIn" "facebook"}} class="btn">{{fa-icon "facebook"}}</a>
<a {{action "signIn" "twitter"}} class="btn">{{fa-icon "twitter"}}</a>
<a {{action "signIn" "github"}} class="btn">{{fa-icon "github"}}</a>
<a {{action "signIn" "google"}} class="btn">{{fa-icon "google"}}</a>
  {{outlet}}
</div>

编辑 1

重启 ember 服务器后，上面的代码给了我更多的错误。这就是我烦恼的原因吗？所有看似没有改变的更改，直到服务器重新启动后才注册？如果是这样的话，我可能已经通过了大约一百次正确的解决方案......

编辑 2

更改了代码以反映实际问题。之前的代码被搞砸了，但我从来没有意识到它，因为它直到服务器重新启动后才恢复。

编辑 3 找到并尝试了这个，但无济于事：https://stackoverflow.com/a/32079863/4309050

Answer 1

这是Lorem Ipsum Dolor's answer，但已针对 Ember 3.16+ 进行了更新

---

// Inside routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute Route {
  @service session;
    
  async beforeModel() {
    try {
      return this.session.fetch();
    } catch {}
  }
}

请注意，在 Ember 3.16+ 中，不建议向您的 Route 添加操作。 相反，您可以将它们添加到控制器或组件上下文中：

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class LoginLogout extends Component {
  @service session;
  @service router;

  @action
  async login(provider)  {
    let data = await this.session.open('firebase', { provider });

    console.log(data.currentUser);
  }

  @action
  async logout() {
    await this.session.close();

    this.router.transitionTo('application');
  }
}

注意添加了router service。 Router 服务是我们在应用中与路由交互的方式。

import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
    
export default class MyAdapter extends ToriiFirebaseAdapter {

}

Answer 2

我遇到了同样的问题，我注意到我的 torii-adapters/application.js 位于 pods 结构下（因为我使用它）。所以我将torii-adapters 文件夹移动到app 文件夹，一切都开始工作了。

Answer 3

注意：对于 Ember 3.16+ 应用程序，这里是相同的代码，但具有更新的语法/模式：https://stackoverflow.com/a/62500685/356849

以下适用于 Ember

---

尝试在您的应用程序路由中注入服务并将beforeModel移到actions哈希之外，

// Inside routes/application.js

export default Ember.Route.extend({
  session: Ember.inject.service(), // (1)

  beforeModel: function() {
    return this.get('session').fetch().catch(function() {});
  },

  actions:{
    login: function(provider) {
      this.get('session').open('firebase', {
        provider: provider,
      }).then(function(data) {
        console.log(data.currentUser);
      });
    },

    logout: function() {
      this.get('session').close().then(function() {
        this.transitionTo('application');
      }.bind(this));
    }
  }
});

我昨天完成了同样的事情（Firebase Torii Auth），请尝试仔细按照指南进行操作。指南中唯一缺少的是手动注入session 服务。

还记得你在environment.js 文件中声明的session 吗？您必须注入它才能使其可用

session: Ember.inject.service(), // (1) 

https://github.com/firebase/emberfire/blob/master/docs/guide/authentication.md

在我的 ToriiFirebaesAdapter 中，

import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';

export default ToriiFirebaseAdapter.extend({
});