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

2 回答

• 6

  如果您无法使用用户数据登录，则数据如何传递到登录服务存在问题 .

  Plunker

  这是一个例子 with User servic e：

  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>
  
      <input type="email" required
        [(ngModel)]="userEmail" >
      
  
      <label for="userPassword">Password</label>
  
      <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)
    }
  }
  

  Simple user login:

  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;
    });
  }
  

  angularfire2 ：plunker

  登录组件类：

  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));
  

  回复于 2024-05-14T13:38:53+08:00
• 2

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

  PS：使用ngFormModel我在控制台中收到一条信息消息，警告我该指令将在下一个RC中选择加入，并最终将被删除以支持新的表单模块，因此这个实现将不起作用未来

  回复于 2024-05-14T13:38:53+08:00