角火力地堡的LogIn

我有一組數據在火力爲：用戶名：「用戶名」和密碼：「密碼」角火力地堡的LogIn

我已經建立了一個角形式兩個文本框。如何將用戶輸入的值與存儲在我的數據庫中的值進行比較，並在按鈕單擊時返回錯誤（如果不匹配）？請讓我知道，我必須錯過一些非常基本的東西。

下面是我的代碼：成員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; 

    } 

    }

來源

2017-11-11 Pikey

我認爲比較Angular的密碼並不是一個好主意...... getCredentials（）返回的任何內容都可以很容易地暴露出來，因此存在安全風險。你可以做的是將你的登錄憑證發佈到服務器，並讓後端進行邏輯/散列;使用Angular只訂閱匹配結果。 –

嗨，我把憑據推送到服務器。我無法找到使用角度來比較用戶名和密碼的方式。我搜索了使用哈希的方式，但迄今爲止無法成功。 – Pikey

我想說的是Angular是純粹的前端框架，所以它並不意味着要執行後端邏輯，如身份驗證。相反，由於您使用Firebase作爲包裝，因此您可以使用與Firebase配合使用的任何語言（C++，JavaScript，Swift，Java等）來管理邏輯，訪問數據庫，比較哈希，然後將結果作爲可由Angular訂閱的JSON響應（例如，{「success」：true，userName：「foo」}），然後讓Angular處理該視圖。 –

首先你需要有註冊用戶併爲登錄火力控制檯和激活授權。

之後，安裝angularfire2模塊使用auth方法將創建相同的登錄數據在Firebase身份驗證控制檯。

它看起來有點太多的工作，但很簡單。我建議在YouTube上查看教程。

如果您遇到困難，給我留言，我可以解釋一點細節，因爲我知道這可能會讓新人感到沮喪。

ps：auth方法會做比較，所以你不需要在前端做。選中這個：https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md

來源

2018-02-11 13:01:26 Bognar

角火力地堡的LogIn

回答

相關問題