如何使用AngularFire2创建带有电子邮件和密码的用户登录

我已经创建了一个

登录服务

，可以选择使用谷歌、facebook或twitter登录，而且运行良好

我正在尝试创建使用电子邮件和密码登录的选项（该选项在firebase控制台中启用），但我无法使其正常工作

我的登录服务代码如下：

import {Injectable, OnInit} from '@angular/core';
import {AngularFire, AuthProviders, AuthMethods} from "angularfire2/angularfire2";


@Injectable()
export class LoginService implements OnInit {
public isLoged: boolean;

ngOnInit() {

}

constructor(private af: AngularFire) {
  this.af.auth.subscribe(user => {
    if (user) {
      this.isLoged = true;
      console.info("Se ha logueado correctamente")
    } else {
      this.isLoged = false;
      console.info("Se ha deslogueado correctamente");
    }
  });
}

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

loginGoogle() {
  //this is the default login , that it's setup in the main.js
  this.login();
}

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

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

createUser(email: string, password: string) {
  this.af.auth.createUser({ email: email, password: password });
}

loginWithPassword() {
  this.af.auth.login({

    provider: AuthProviders.Password,
    method: AuthMethods.Password
  })
}

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

}

主要的技术指标是：

import { APP_BASE_HREF } from '@angular/common';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';
import {
  FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders,
  AuthMethods
} from "angularfire2/angularfire2";

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

/**
 * Bootstraps the application and makes the ROUTER_PROVIDERS and the APP_BASE_HREF available to it.
 * @see https://angular.io/docs/ts/latest/api/platform-browser-dynamic/index/bootstrap-function.html
 */
bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms(),
  APP_ROUTER_PROVIDERS,
  {
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  },
  FIREBASE_PROVIDERS,
  defaultFirebase({ //this data is replaced
    apiKey: 'apiKey',
    authDomain: 'authDomain',
    databaseURL: 'databaseURL',
    storageBucket: 'storageBucket',
  }),
  firebaseAuthConfig({
    provider: AuthProviders.Google,
    method: AuthMethods.Popup,
  })
]);

在html中，我有：

 <form [ngFormModel]="loginForm" (submit)="loginWithPassword()">
    <div id="DIV_13">
      <div id="DIV_14">
        <span id="SPAN_15"> <i id="I_16">face</i></span>
        <div id="DIV_17">
          <input ngControl="name" type="text" placeholder="First Name..." id="INPUT_18" /><span id="SPAN_19"></span>
        </div>

      </div>
      <div id="DIV_20">
        <span id="SPAN_21"> <i id="I_22">email</i></span>
        <div id="DIV_23">
          <input ngControl="correo"  type="text" placeholder="Email..." id="INPUT_24" /><span id="SPAN_25"></span>
        </div>
      </div>
      <div id="DIV_26">
        <span id="SPAN_27"> <i id="I_28">lock_outline</i></span>
        <div id="DIV_29">
          <input  ngControl="contrasena" type="password" placeholder="Password..." id="INPUT_30" /><span id="SPAN_31"></span>
        </div>
      </div> 
    </div>

    <div id="DIV_32">
      <button type="submit" id="A_33">Get Started</button>
    </div>
    </form>

面对
电子邮件
锁形轮廓
开始

但我得到的价值 this.loginForm.controls['correo'].value.toString（） 等于null，那么我如何获得该值呢

---

知道问题出在哪里吗？关于Roberto。

如果无法使用用户数据登录，则会出现数据如何传递到登录服务的问题

下面是一个使用用户服务的示例：

  import {Injectable} from '@angular/core';

  @Injectable()
  export class UserService {
    public auth: any;
    constructor() {
      this.auth = firebase.auth();
    }

    public login(userEmail: string, userPassword: string) {
      return new Promise((resolve, reject) => {
        this.auth.signInWithEmailAndPassword(userEmail, userPassword)
          .then(userData => resolve(userData),
            err => reject(err));
      });
    }

    public logout() {
      return this.auth.signOut();
    }
  }

登录组件：

import { Component } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';
import { UserService } from './user.service';

@Component({
  selector: 'login',
  template: `
  <form (ngSubmit)="login()">
    <label for="userEmail">Email</label><br/>
    <input type="email" required
      [(ngModel)]="userEmail" >
    <br/>
    <label for="userPassword">Password</label><br/>
    <input type="password" required
      [(ngModel)]="userPassword" >
    <hr/>
    <button type="submit">Login!</button>
  </form>
  `,
  directives: [FORM_DIRECTIVES],
  providers: [UserService]
})
export class LoginComponent {
  public userEmail: string;
  public userPassword: string;
  constructor(private _user: UserService) {}

  public login() {
    this._user.login(this.userEmail, this.userPassword)
  }
}

角火2：

登录组件类：

export class App {
    email: string;
    pw: string;
    authed: boolean;
    constructor(private _us: UserService) {
        this.authed = false;
    }

    signup() {
        this._us.signUp(this.email, this.pw);
    }

    login() {
        this._us.login(this.email, this.pw).then((res) => {
            console.log(res);
            if (res.provider === 4)
                this.authed = true;
        });
    }

}

服务：

    import { Injectable } from '@angular/core';
    import { AngularFire, FirebaseAuth } from 'angularfire2';

    @Injectable()
    export class UserService {
        public db: any;
        constructor(private af: AngularFire, private auth: FirebaseAuth) {

        }

        signUp(email: string, password: string) {
            var creds: any = { email: email, password: password };
            this.af.auth.createUser(creds);
        }

        login(email: string, password: string): Promise<boolean> {
            var creds: any = { email: email, password: password };
            var res: Promise<boolean> = new Promise((resolve, reject) => {
                this.auth.login(creds).then(result => {
                    resolve(result);
                })
            });
            return res;
        }

    }

---

我发现了问题，问题是我需要将html中的ngFormModel的指令放入“[]”中，并将指令“FORM_directions”添加到logig.component.ts上的组件中

PS：使用ngFormModel，我在控制台中收到一条信息消息，警告我该指令将在下一个RC中选择加入，并且 最终将被删除，取而代之的是新的表单模块，因此此实现在未来将无法工作

请参阅使用Angular 2 Final的文章。

export class App {
    email: string;
    pw: string;
    authed: boolean;
    constructor(private _us: UserService) {
        this.authed = false;
    }

    signup() {
        this._us.signUp(this.email, this.pw);
    }

    login() {
        this._us.login(this.email, this.pw).then((res) => {
            console.log(res);
            if (res.provider === 4)
                this.authed = true;
        });
    }

}

    import { Injectable } from '@angular/core';
    import { AngularFire, FirebaseAuth } from 'angularfire2';

    @Injectable()
    export class UserService {
        public db: any;
        constructor(private af: AngularFire, private auth: FirebaseAuth) {

        }

        signUp(email: string, password: string) {
            var creds: any = { email: email, password: password };
            this.af.auth.createUser(creds);
        }

        login(email: string, password: string): Promise<boolean> {
            var creds: any = { email: email, password: password };
            var res: Promise<boolean> = new Promise((resolve, reject) => {
                this.auth.login(creds).then(result => {
                    resolve(result);
                })
            });
            return res;
        }

    }

    //main entry point
    import {bootstrap} from '@angular/platform-browser-dynamic';
    import {App} from './app';
    import {
        FIREBASE_PROVIDERS,
        defaultFirebase,
        firebaseAuthConfig,
        AuthMethods,
        AuthProviders
    } from 'angularfire2';
    import { UserService } from './user.service';

    bootstrap(App, [
        FIREBASE_PROVIDERS,
        // Initialize Firebase app  
        defaultFirebase({
            apiKey: "AIzaSyD6v-fYdZgeHtLfBctFqEQ4Ra7ZDpLZKug",
            authDomain: "plnkr-1a222.firebaseapp.com",
            databaseURL: "https://plnkr-1a222.firebaseio.com",
            storageBucket: "plnkr-1a222.appspot.com",
        }),
        firebaseAuthConfig({
            provider: AuthProviders.Password,
            method: AuthMethods.Password
        }),
        UserService
    ])
        .catch(err => console.error(err));