Question

我在firebase中有一组数据：用户名：＆＃39;用户名＆＃39;和密码：＆＃39;密码＆＃39;

我已经构建了一个带有两个文本框的角形。如何将用户输入的值与存储在数据库中的值进行比较，如果不匹配则返回错误，单击按钮？请让我知道，我必须遗漏一些非常基本的东西。

以下是我的代码：构件-credentials.component.ts

       import { Component, OnInit } from '@angular/core';
       import {CredentialService } from '../../services/credential.service';

      import { Credential } from '../../models/credentials';

     @Component({
     selector: 'app-member-credentials',
     templateUrl: './member-credentials.component.html',
     styleUrls: ['./member-credentials.component.css']
     })
     export class MemberCredentialsComponent implements OnInit {
     credentials: Credential[];
     Username ='';
     Password = '';
     public errorMsg = '';

       constructor(private credentialService: CredentialService) { }

      ngOnInit() {
       this.credentialService.getCredentials().subscribe(credentials =>{
       this.credentials=credentials;
      })
    }

  login(){
      //Where I want to implement the click.
   }

    }

   member-credentials.component.html
     <div *ngFor="let credential of credentials" class="container" >
        <div class="title">
            Welcome
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="input-field col s12">
                    <input type="text" class="validate" 
                   [(ngModel)]="credential.Username"  placeholder="User Name">
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input type="password" class="validate" 
              [(ngModel)]="credential.Password"  placeholder="Password">
             </div>
            </div>

            <!--<span>{{errorMsg}}</span>-->
            <button (click)="login()" 
                class="btn waves-effect waves-light" 
                type="submit" name="action">Login</button>
        </div>
    </div>    

   credential.service.ts
    import { Injectable } from '@angular/core';
    import { AngularFirestore, AngularFirestoreCollection, 
           AngularFirestoreDocument } from 'angularfire2/firestore';
    import { Observable } from 'rxjs/Observable';

    import { Credential } from '../models/credentials';

   @Injectable()
 export class CredentialService {
   credentialCollection: AngularFirestoreCollection<Credential>;
   credentials: Observable<Credential[]>;

    constructor(public afs: AngularFirestore) {
    this.credentials = this.afs.collection('MemberDetails').valueChanges();
   }

    getCredentials(){
      return this.credentials;

   }

   }

Answer 1

首先，您需要拥有注册用户并登录firebase控制台并激活授权。

之后安装angularfire2模块以使用auth方法，它将创建相同的登录数据在firebase身份验证控制台中。

它看起来有点太多了，但很简单。我建议在youtube上查看教程。

如果你遇到困难，请告诉我，我可以解释一些细节，因为我知道新人可能会感到沮丧。

Ps：auth方法将进行比较，因此您不需要在前端进行比较。请检查：https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md

Angular-Firebase登录

1 个答案: