Firebase（現行バージョン）と角4でサインイン

Question

誰かがFirebase sigin/loginの例をEmail &パスワードで教えてもらえますか？私は非推奨に思える:(

あなたは、この機能でエラーを発見することはできますか？

signup(email: string, password: string) { 
    this._firebaseAuth 
     .auth 
     .createUserWithEmailAndPassword(email, password) 
     .then(value => { 
      console.log('Success!', value); 
     }) 
     .catch(err => { 
      console.log('Something went wrong:',err.message); 
     }); 
} 

とapp.component.tsに

email: string; 
    password: string; 

    constructor(public authService: AuthService) {} 

    signup() { 
    this.authService.signup(this.email, this.password); 
    this.email = this.password = ''; 
    } 

Answer 1

を見つけEveythingがあまりにも私にしばらく時間がかかった、ここです私が発見し、それがうまく機能:)

サービス： -

constructor(private auth: AngularFireAuth) {} 

/** 
* 
* @param email 
* @param password 
* @returns {Observable<any>} 
*/ 
public loginUserObservable(email,password){ //but if still want to use an observable 
    return Observable.fromPromise(<Promise<any>> this.auth.auth.signInWithEmailAndPassword(email, password)) // we need to cast the Promise because for some reason Angularfire returns firebase.Promise 
} 

ログインコンポーネント： -

constructor(public authService: AuthService){} 
public login(): void { 
     let email = this.loginForm.get('email').value; 
     let password = this.loginForm.get('password').value; 
     this.authService.loginUserObservable(email, password) 
      .subscribe(
       (response) => { 
        this.response = response; 
        this._router.navigate(['/admin']); 
       }, 
       (error) => { 
        this.failLogin = true; 
        this.handleError(error); 
       } 
      ); 
    } 

Answer 2

angularfire2 authenticationが

https://github.com/angular/angularfire2

NPMは、その後firebase angularfire2 --save

import * as firebase from 'firebase'; 
import {AngularFireAuth} from 'angularfire2/auth'; 

インストールし、それは非常に簡単になります...

password: string; 
email: string; 

constructor(private afAuth: AngularFireAuth) {} 

signupUser(email: string, password: string) { 
this.afAuth.auth.createUserWithEmailAndPassword(email, password).catch(
    error => console.log(error) 
); 
} 

signinUser(email: string, password: string) { 
this.afAuth.auth.signInWithEmailAndPassword(email, password) 
.catch(
    error => console.log(error) 
); 
} 

logoutUser() { 
    this.afAuth.auth.signOut(); 
    this.user = null; 
} 


onSignin(signInForm: NgForm) { 
    this.email = signInForm.value.email; 
    this.password = signInForm.value.password; 
    this.signinUser(this.email, this.password); 
} 

onSignup(signUpForm: NgForm) { 
    this.email = signUpForm.value.email; 
    this.password = signUpForm.value.password; 
    this.signupUser(this.email, this.password); 
} 

あなたのhtmlがこのクイズの問題ではないと仮定すると、この

<form #signUpForm="ngForm" (ngSubmit)="onSignup(signUpForm)"> 
    <md-card> 
     <md-card-title> 
     Sign Up 
     </md-card-title> 
     <md-card-content> 
     <md-form-field> 
      <input mdInput id="email" placeholder="Email" type="email" name="email" [(ngModel)]="email"> 
     </md-form-field> 
     <md-form-field> 
      <input mdInput id="password" placeholder="Password" type="password" name="password" [(ngModel)]="password"> 
     </md-form-field> 
     </md-card-content> 
     <md-card-actions> 
     <button md-raised-button color="primary" type="submit">Sign In</button> 
     </md-card-actions> 
    </md-card> 
    </form> 

<form #signInForm="ngForm" (ngSubmit)="onSignin(signInForm)"> 
    <md-card> 
     <md-card-title> 
     Sign Up 
     </md-card-title> 
     <md-card-content> 
     <md-form-field> 
      <input mdInput id="email" placeholder="Email" type="email" name="email" [(ngModel)]="email"> 
     </md-form-field> 
     <md-form-field> 
      <input mdInput id="password" placeholder="Password" type="password" name="password" [(ngModel)]="password"> 
     </md-form-field> 
     </md-card-content> 
     <md-card-actions> 
     <button md-raised-button color="primary" type="submit">Sign In</button> 
     </md-card-actions> 
    </md-card> 
    </form>