如何使用Firebase進行身份驗證以使用Angular2 FINAL？

Question

所以，我也升級到了Angular2 Final。我完成了遷移項目的步驟來移動所有內容。我得到零錯誤，它進行身份驗證。但是，問題發生在認證之後。當它重定向回頁面時，它不會獲得美味的認證數據。它的行爲就像我沒有登錄。這是本地發生的，並在firebase託管。我再次檢查我沒有阻止Cookie。我將身份驗證選項簡化爲臉書。它只是不起作用。在進入決賽之前沒關係。我上的最後一個版本是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

好的，修復它。有兩個步驟。

1. 升級爲angularfire2@2.0.0-beta.5-preview
2. npm install @types/request@0.0.30
3. 利潤。

這解決了這個問題，現在一切正常。 :)