如何使用 Firebase 进行身份验证以与 Angular2 FINAL 一起使用？

Question

所以，我也升级到了 Angular2 Final。我执行了迁移项目步骤以移动所有内容。我得到零错误，它进行了身份验证。但是，问题发生在身份验证之后。当它重定向回该页面时，它没有获得有用的身份验证数据。就像我没有登录一样。这是在本地和 firebase 托管上发生的。我仔细检查过我没有阻止 cookie。我将身份验证选项剥离到 facebook。它只是行不通。在进入决赛之前没关系。我使用的最后一个版本是 RC5。

我正在使用 Typescript 2.0.2。

我的 app.module 看起来像这样：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, ApplicationRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {CollapseDirective, DropdownDirective, DropdownToggleDirective, DropdownMenuDirective} from 'ng2-bootstrap';
import {
    FIREBASE_PROVIDERS,
    defaultFirebase,
    AngularFire,
    AuthMethods,
    AuthProviders,
    firebaseAuthConfig, AngularFireModule
} from 'angularfire2';
import {RoomlyNavbarComponent} from './shared/roomly-navbar/roomly-navbar.component';
import {RoomlyRoomsComponent} from './roomly-rooms/roomly-rooms.component';
import {RoomlyHomeComponent} from './roomly-home/roomly-home.component';
import {
    routing,
    appRoutingProviders
} from './app.routes';
import {RoomlyRoomComponent} from './roomly-room/roomly-room.component';
import {RoomlyPhotoUploaderComponent} from './roomly-photo-uploader/roomly-photo-uploader.component';
import {RoomlyItemComponent} from './roomly-item/roomly-item.component';
import {RoomlyBuildingComponent} from './roomly-building/roomly-building.component';
import {RoomlyBuildingsComponent} from './roomly-buildings/roomly-buildings.component';
import {BuildingFormComponent} from './building-form/building-form.component';

const myFirebaseConfig = {
    apiKey: "REMOVED",
    authDomain: "REMOVED",
    databaseURL: "REMOVED",
    storageBucket: "REMOVED",
};

const myFirebaseAuthConfig = {
    provider: AuthProviders.Facebook,
    method: AuthMethods.Redirect
};

@NgModule({
    declarations: [
        AppComponent,
        CollapseDirective,
        DropdownDirective,
        DropdownToggleDirective,
        DropdownMenuDirective,
        RoomlyNavbarComponent,
        RoomlyRoomsComponent,
        RoomlyRoomComponent,
        RoomlyHomeComponent,
        RoomlyPhotoUploaderComponent,
        RoomlyItemComponent,
        RoomlyBuildingComponent,
        RoomlyBuildingsComponent,
        BuildingFormComponent,
    ],
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        routing,
        AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig)
    ],
    providers: [appRoutingProviders],
    entryComponents: [AppComponent],
    bootstrap: [
        AppComponent,
        RoomlyNavbarComponent
        ]
})
export class AppModule {

}

我的 app.component 看起来像这样。我正在使用路线，所以它很简单。它只加载一个包含 router-outlet 和导航栏的页面：

import { Component } from '@angular/core';
import * as firebase from 'firebase';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(public af: AngularFire) {
  }
}

最后，实际登录的主页如下所示：

import {Component, OnInit} from '@angular/core';
import {AngularFire, AuthProviders, AuthMethods} from 'angularfire2';
import {AuthUser} from '../shared/AuthUser';

@Component({
    selector: 'app-roomly-home',
    templateUrl: 'roomly-home.component.html',
    styleUrls: ['roomly-home.component.css']
})
export class RoomlyHomeComponent implements OnInit {

    ngOnInit() {
    }

    user = {};
    authUser: AuthUser = new AuthUser('', '');
    loggedin: boolean;

    constructor(public af: AngularFire) {
        this.af.auth.subscribe(auth => console.log('hello ', auth));
        this.af.auth.subscribe(user => {
            if (user) {
                // user logged in
                this.user = user;
                this.loggedin = true;
            }
            else {
                // user not logged in
                this.user = {};
                this.loggedin = false;
            }
        });
    }

    login() {
        this.af.auth.login();
    }

    loginFacebook() {
        this.af.auth.login({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup
        });
    }

    loginGoogle() {
        this.af.auth.login({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup
        });
    }

    loginTwitter() {
        this.af.auth.login({
            provider: AuthProviders.Twitter,
            method: AuthMethods.Popup
        });
    }

    logout() {
        this.af.auth.logout();
    }


}

我不确定 RC5 和 Final 之间发生了什么变化导致它失败。如果有帮助，这是我的 package.json 文件：

{
  "name": "Roomly Home Inventory",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angularfire2": "^2.0.0-beta.4",
    "core-js": "^2.4.1",
    "firebase": "^3.4.0",
    "ng2-bootstrap": "^1.1.4",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.14",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

还有其他人运行了解这个吗？

Answer 1

好的，已修复。有两个步骤。

升级到angularfire2@2.0.0-beta.5-preview
npm install @types/request@0.0.30
利润。

问题已解决，现在一切正常。 :)

如何使用 Firebase 进行身份验证以与 Angular2 FINAL 一起使用？

How can i get Authentication with Firebase to work with Angular2 FINAL?

angularjs

firebase

firebase-authentication

angularfire2

angular