0
그래서 저는 나도 Angular2 Final로 업그레이드했습니다. 모든 것을 이전하기 위해 마이그레이션 프로젝트 단계를 수행했습니다. 제로 오류가 발생했습니다. 인증됩니다. 그러나 문제는 인증 후에 발생합니다. 다시 페이지로 리디렉션되면 맛있는 인증 데이터를 얻지 못합니다. 내가 로그인하지 않은 것처럼 행동합니다. 이것은 로컬에서 일어나고 firebase 호스팅에서 발생합니다. 나는 쿠키를 차단하지 않는다는 것을 두 번 확인했습니다. 나는 페이스 북에 대한 인증 옵션을 제거했다. 그것은 단지 작동하지 않습니다. 결승에 가기 전에 괜찮 았어. 마지막 버전은 RC5였습니다.어떻게 Firebase로 인증을 얻어서 Angular2 FINAL로 작업 할 수 있습니까?
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, 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();
}
}
내가 변경 모르겠어요 :
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) {
}
}
마지막에 실제 기록 장소 소요 홈 페이지는 다음과 같습니다 RC5와 Final 사이에서 실패합니다. 도움이된다면 여기에 내 패키지가 있습니다 .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"
}
}
다른 누구도이 문제를 겪었습니까?
당신이 자신의 문제를 해결할 때 단지 그것을 좋아하지 않습니까? :) –
@RichLinnell 아주 좋은 느낌입니다. :) –