Angular，从存储在 mySql 数据库中的电子邮件中验证用户

Posted 2023-03-07

【中文标题】Angular，从存储在 mySql 数据库中的电子邮件中验证用户

【英文标题】：Angular, verify user from stored email in mySql database

【发布时间】：2018-06-23 17:14:43

【问题描述】：

我正在尝试使用存储在 mysql 数据库中的电子邮件和使用 express JS 进行简单的用户验证。用户必须先输入他/她的电子邮件，然后才能填写其他表格。如果电子邮件未注册/存储在电子邮件表中，用户将无法获得其他表单。这是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);
  )
)

现在我需要做的是让客户端的打字稿识别已经存储在表格中的电子邮件列表（如果可能的话）。客户端将从该电子邮件表中检查哪个电子邮件是true，哪个电子邮件是false（未存储）。这是使用 Angular 和 typescript 的客户端：

//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>

【参考方案1】：

我会审查您的应用程序的设计，这存在严重的安全问题。

验证现有电子邮件是一回事，但要明确的是，这不是充分的身份验证，应使用适当的身份验证机制。

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

但是，如果这不是身份验证，并且要检查电子邮件是否存在于列表中，您可以执行以下操作。

我建议您编写一个 Express 服务来检查电子邮件并返回真/假，而不是返回所有电子邮件（隐私问题）。

例如（仅作为示例）：

//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);
  )
)

【讨论】：

感谢罗素先生的解释：D

【参考方案2】：

首先，如果您要获取所有电子邮件的列表，那么您应该这样做

模板端：

<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);
        )
    

WORKING DEMO

---

但我会建议另一种方式

节点端

首先发出获取请求以发布

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')
    );

组件端与我在上面的代码相同

【讨论】：

请原谅我的愚蠢问题，Vivek Doshi 先生。我得到了Property 'email' doesn't exist in on type string。

@WiraXie,请查看stackblitz.com/edit/…，它将消除您的疑虑。