角火力地堡的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

回答

相关问题