0
我有一组数据在火力为:用户名:“用户名”和密码:“密码”角火力地堡的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;
}
}
我认为比较Angular的密码并不是一个好主意...... getCredentials()返回的任何内容都可以很容易地暴露出来,因此存在安全风险。你可以做的是将你的登录凭证发布到服务器,并让后端进行逻辑/散列;使用Angular只订阅匹配结果。 –
嗨, 我把凭据推送到服务器。我无法找到使用角度来比较用户名和密码的方式。我搜索了使用哈希的方式,但迄今为止无法成功。 – Pikey
我想说的是Angular是纯粹的前端框架,所以它并不意味着要执行后端逻辑,如身份验证。相反,由于您使用Firebase作为包装,因此您可以使用与Firebase配合使用的任何语言(C++,JavaScript,Swift,Java等)来管理逻辑,访问数据库,比较哈希,然后将结果作为可由Angular订阅的JSON响应(例如,{“success”:true,userName:“foo”}),然后让Angular处理该视图。 –