Node.js和Vue实现手机验证码 |21xrx.com

Node.js和Vue实现手机验证码

2023-07-11 10:46:41 深夜i 24 0

Node js Vue 手机验证码短信验证前后端配合

随着手机用户量的不断增长，手机验证成为了网站或应用程序中普遍存在的一种验证方法。Node.js是基于Chrome的V8引擎，用于快速构建高性能、可扩展的网络应用程序。而Vue是一款流行的JavaScript框架，可以帮助我们开发交互式用户界面。

在本文中，我们将介绍如何使用Node.js和Vue来实现手机验证码功能。

第一步：创建Node.js项目

在开始之前，我们需要先安装Node.js。安装完成后，我们可以使用命令行工具创建一个新的Node.js项目：

mkdir node-verification-code cd node-verification-code npm init -y

以上命令将创建一个名为“node-verification-code”的文件夹，并在其中初始化一个新的npm项目。

第二步：安装必要的Node.js模块

我们需要安装一些必要的Node.js模块，以便在项目中使用。在项目根目录下，运行以下命令：

npm install express body-parser twilio

以上命令将安装Express框架，Body Parser模块和Twilio的npm包。Twilio可以让我们使用短信API向手机发送验证码。

第三步：创建一个Express服务器

我们将使用Express框架来创建一个简单的服务器，该服务器将负责处理发送验证码和验证验证码的请求。在项目根目录下，创建一个名为“index.js”的文件，并添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const Twilio = require('twilio');
const app = express();
// 配置Twilio的API凭证
const accountSid = 'Your_Account_Sid';
const authToken = 'Your_Auth_Token';
const client = new Twilio(accountSid, authToken);
// 使用Body Parser来解析POST请求中的JSON
app.use(bodyParser.json());
// 发送验证码
app.post('/send-code', (req, res) => {
 const { phoneNumber } = req.body;
 // 生成随机四位数验证码
 const code = Math.floor(Math.random() * 9000) + 1000;
 // 发送验证码
 client.messages
  .create({
   body: `您的验证码是 ${code}`,
   from: '+1XXXXXXXXX', // Twilio分配的手机号码
   to: `+86${phoneNumber}`, // 手机号码，加上国家代码
  })
  .then(() => {
   res.json({ success: true });
  })
  .catch((err) => {
   console.log(err);
   res.json({ success: false });
  });
});
// 验证验证码
app.post('/verify-code', (req, res) => {
 const { code } = req.body;
 // 验证用户输入的验证码是否正确
 if (code === req.session.code) {
  // 验证码正确
  res.json({ success: true });
 } else {
  // 验证码错误
  res.json({ success: false });
 }
});
app.listen(3000, () => {
 console.log('服务器已启动');
});

以上代码中有两个路由：send-code和verify-code。send-code路由将生成一个四位数验证码并通过Twilio的API发送到用户手机上。verify-code路由将通过比较用户输入的验证码和服务器生成的验证码来验证验证码是否正确。

第四步：创建Vue项目

我们将使用Vue框架来创建一个简单的页面，用于收集用户的手机号码和验证码。在项目根目录下，运行以下命令来创建Vue项目：

npm install vue npx vue create client

以上命令将创建一个名为“client”的文件夹，并在其中初始化一个新的Vue项目。

第五步：使用Vue来创建页面

在client/src目录下，打开“App.vue”文件，并添加以下代码：

<template>
 <div>
  <h1>手机号验证</h1>
  <div v-if="!codeSent">
   <input type="text" v-model="phoneNumber" placeholder="请输入手机号码" />
   <button @click="sendCode">发送验证码</button>
  </div>
  <div v-else>
   <input type="text" v-model="code" placeholder="请输入验证码" />
   <button @click="verifyCode">验证</button>
  </div>
  <div v-if="error">{{ error }}</div>
  <div v-if="success">验证成功！</div>
 </div>
</template>
<script>
export default {
 data() {
  return
   success: false;
 },
 methods: {
  sendCode() {
   fetch('/send-code', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ phoneNumber: this.phoneNumber }),
   })
    .then((res) => res.json())
    .then((data) => {
     if (data.success)
      this.codeSent = true;
      else
      this.error = '发送验证码失败
    })
    .catch((err) => {
     console.log(err);
     this.error = '发送验证码失败，请稍后重试。';
    });
  },
  verifyCode() {
   fetch('/verify-code', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code: this.code }),
   })
    .then((res) => res.json())
    .then((data) => {
     if (data.success)
      this.success = true;
      else 请重新输入。';
     
    })
    .catch((err) => {
     console.log(err);
     this.error = '验证码验证失败，请稍后重试。';
    });
  },
 },
};
</script>

以上代码将创建一个简单的UI，该UI允许用户输入其手机号码并发送验证码。一旦发送成功，页面将显示一个输入框，该输入框允许用户输入其收到的验证码。

第六步：运行项目

最后，我们需要将我们的服务器和客户端界面同时运行。

在项目根目录下，运行以下命令：

// 运行服务器 node index.js

在项目根目录下，运行以下命令：

// 运行客户端界面 cd client npm run serve

现在，您可以在浏览器中访问http://localhost:8080，然后测试我们的验证码功能了！

总结

以上就是使用Node.js和Vue实现手机验证码的简单操作步骤，这是一个省时省力、安全可靠的验证方法。不管是在哪个领域，安全问题都是最重要的，希望这篇文章能对您有所帮助。

上一篇: idea打包java可执行jar包

下一篇: C++中如何定义类的指针

评论区

相似文章