Angular ,从mysql数据库中存储的电子邮件验证用户

2exbekwf  于 2021-06-24  发布在  Mysql
关注(0)|答案(2)|浏览(416)

我正在尝试使用存储在mysql数据库中的电子邮件和expressjs进行简单的用户验证。用户必须先输入电子邮件,然后再填写其他表单。如果电子邮件未注册/存储在电子邮件表中,用户将无法获取其他表单。下面是mysql中的表示例

.

//app.js 
//select all email
app.get('/AllEmail', (req, res) => {
  let sql = 'SELECT * FROM email';
  let query = db.query(sql, (err, results) => {
    if (err) {
      throw err;
    }
    console.log(results);
    var a = JSON.stringify(results);
    res.send(a);
  })
})

现在,如果可能的话,我需要做的是让客户端的typescript识别表中已经存储的电子邮件列表。客户端将检查哪封电子邮件是 true 哪封邮件是 false (未存储)从该电子邮件表。以下是客户端使用Angular 和类型脚本:

//service.ts
getEmailAPI(): Observable < any > {
  return this.http.get("http://localhost:8000/AllEmail")
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'Server error'))
}

//component.ts
ngOnInit() {
  this.getEmailAPI()
}

Email: string[] = [];
isVerified: boolean = false;
getEmailAPI() {
  this.AppService.getEmailAPI().subscribe(
    data => console.log(this.Email = data),
    error => console.log('server returns error')
  );
}

verifyEmail(formValue) {
  if (this.Email == null) // ||this.email doesn't exist
  {
    this.isVerified = false;
  } else if (this.Email != null) // && this.email exist
  {
    this.isVerified = true;
  }
}
<!--component.html-->
<div class="container" align="center">
  <form ngNativeValidate>
    <label>Please Enter Your Email Below</label>
    <input name="userEmail" type="text" class="form-control" required/>
    <button type="submit" class="btn btn-sm" (click)="isVerified=!isVerified; verifyEmail()">verify</button>
  </form>
</div>

<div *ngIf="isVerified">
  <form>...</form>
</div>
ifsvaxew

ifsvaxew1#

我会审查你的应用程序的设计,这有严重的安全问题。
验证现有电子邮件是一回事,但要清楚,这不是充分的身份验证,应该使用适当的身份验证机制。
expressjs支持各种身份验证机制:https://www.google.com.au/search?q=expressjs+authentication&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=xipcwvmei6tr8af49ls4ca
但是,如果这不是身份验证,而是检查列表中是否存在电子邮件,则可以执行以下操作。
我建议你写一个快速服务,检查电子邮件,并返回真/假,而不是返回所有电子邮件(隐私问题)。
例如(仅示例):

//app.js 
//check email
app.get('/CheckEmail', (req, res) => {
  let sql = 'SELECT * FROM email WHERE email = ?', [req["email"]];
  let query = db.query(sql, (err, results) => {
    if (err) {
      throw err;
    }
    console.log(results);
    var emailExists = results.length > 0;
    res.send(emailExists);
  })
})
whhtz7ly

whhtz7ly2#

首先,如果你正在获取所有电子邮件的列表,那么你应该像这样做
模板侧:

<div class="container" align="center">
  <form #emailVerification='ngForm' ngNativeValidate (submit)='verifyEmail(emailVerification.value)'>
    <label>Please Enter Your Email Below</label>
    <input name="userEmail" type="text" class="form-control" required ngModel />
    <button type="submit" class="btn btn-sm">verify</button>
  </form>
</div>

组件侧:

isVerified = false;

verifyEmail(formValue) {
    if(this.Email.length > 0) {
        this.Email.every(el => {
            return !(this.isVerified = el.email === formValue.userEmail);
        })
    }
}

工作演示
但我建议另一种方法
节点侧
首先发出请求以发布

app.post('/CheckEmail', (req, res) => {
    req.body.email; // get email from client side
    // compare that email with your db entries
    // if it exists return data else null

});

服务方

getEmailAPI(): Observable < any > {
  return this.http.post("http://localhost:8000/AllEmail",data)
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'Server error'))
}

模板侧:

verifyEmail(formValue) {
    this.AppService.getEmailAPI().subscribe(
        data => {
            if(data) {
                // do whatever needed is with returned data
                isVerified = true; 
            } else {
                isVerified = false;
            }
        },
        error => console.log('server returns error')
    );
}

组件端将与上面的代码相同

相关问题