从零开始搭建群众权益平台(二)

news/2024/10/30 19:27:06/

这篇文章我们要建立的群众权益维护平台需要提供用户注册、登录、提交和查看问题或建议的功能,并且支持电话短信登录。在这个过程中,我们需要存储用户的登录信息。

我们将使用Node.js和Express.js作为后端框架,MongoDB作为数据库,并且使用Twilio服务发送短信验证码来实现手机登录。这个过程涉及到前后端的编程,下面将详细解释如何实现。

后端编码

我们首先创建后端应用和相关的路由,首先需要创建一个新的Node.js应用,然后安装相关的库:

mkdir rights-platform
cd rights-platform
npm init -y
npm install express mongoose bcryptjs jsonwebtoken twilio cors

然后,我们创建一个新的Express应用,并且设置路由处理用户的注册和登录请求。以下是一个非常基本的例子:

// server.js
const express = require('express');
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const Twilio = require('twilio');const app = express();
app.use(express.json());
app.use(cors());// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost:27017/rights-platform', { useNewUrlParser: true, useUnifiedTopology: true });// 创建用户数据模型
const userSchema = new mongoose.Schema({username: String,password: String,phone: String
});
const User = mongoose.model('User', userSchema);// 用户注册
app.post('/api/register', async (req, res) => {const hashedPassword = await bcrypt.hash(req.body.password, 10);const user = new User({username: req.body.username,password: hashedPassword,phone: req.body.phone});try {await user.save();res.send({ message: 'User registered' });} catch (error) {res.status(500).send({ message: 'Error registering user' });}
});// 用户登录
app.post('/api/login', async (req, res) => {const user = await User.findOne({ username: req.body.username });if (!user || !await bcrypt.compare(req.body.password, user.password)) {return res.status(401).send({ message: 'Invalid username or password' });}const token = jwt.sign({ id: user.id }, 'secret');res.send({ token });
});// 启动应用
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}`));

这个代码涉及到了注册和登录的基本功能,包括了密码的哈希,JWT的生成等,但还没有实现手机验证码登录。我们在下一步中将添加手机验证码登录的功能。

我们将使用Twilio服务发送短信验证码。

在开始之前,您需要在Twilio网站注册一个账户,并获取一个Twilio phone number、Account SID和Auth Token。将这些信息存储在环境变量中,或者直接在代码中使用(不推荐)。

我们也需要添加一个新的数据模型来存储验证码,以便验证用户输入的验证码是否正确。我们同样使用mongoose库来创建数据模型。

以下是如何添加手机验证码登录的代码:

// server.js
// 在文件顶部引入相关库
const twilio = require('twilio');// 创建Twilio客户端
const twilioClient = twilio(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);// 创建验证码数据模型
const verificationSchema = new mongoose.Schema({phone: String,code: String,createdAt: { type: Date, expires: '10m', default: Date.now }
});
const Verification = mongoose.model('Verification', verificationSchema);// 发送验证码
app.post('/api/send-verification', async (req, res) => {const verificationCode = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');const verification = new Verification({phone: req.body.phone,code: verificationCode});try {await verification.save();await twilioClient.messages.create({body: `Your verification code is ${verificationCode}`,from: process.env.TWILIO_PHONE_NUMBER,to: req.body.phone});res.send({ message: 'Verification code sent' });} catch (error) {res.status(500).send({ message: 'Error sending verification code' });}
});// 使用验证码登录
app.post('/api/login-with-phone', async (req, res) => {const verification = await Verification.findOne({ phone: req.body.phone, code: req.body.code });if (!verification) {return res.status(401).send({ message: 'Invalid phone number or verification code' });}const user = await User.findOne({ phone: req.body.phone });if (!user) {return res.status(401).send({ message: 'User not found' });}const token = jwt.sign({ id: user.id }, 'secret');res.send({ token });
});

此代码添加了发送验证码和使用验证码登录的功能。验证码在创建10分钟后会自动从数据库中删除,以防止其被重新使用。

请注意,这只是一个基本的实现,还有很多细节需要处理,例如错误处理、安全性考虑等。在实际应用中,可能还需要添加更多的功能,例如用户管理、权限控制等。

后续我们将实现这些功能,请关注我们专栏。


http://www.ppmy.cn/news/424887.html

相关文章

性能测试基础知识(一)性能测试的分类

性能测试的分类 一、什么是性能测试?二、性能测试的目的三、性能测试的分类1、基准测试2、并发测试3、负载测试4、压力测试5、其他测试 一、什么是性能测试? 性能测试是在一定的负载1条件下,系统的响应时间等特性是否满足特定的性能需求。需…

手机界面设计中常用到的9种布局

原文链接 【编者按】本文作者阿沐 ,分享了手机界面设计中常用到的9种布局,我们需要考虑为不同的信息结构来提供相匹配的布局, 手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内…

移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的…

UI设计师必备|Android设计尺寸规范

1、字体使用规范 中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已) 英文字体:Roboto 注意:安卓的字号单位是SP 7201280常见的字体大小: 24px、26px、28px、30px、32px、…

交互设计:界面设计尺寸详解与常用尺寸

基本概念 屏幕尺寸指实际的物理尺寸,为屏幕对角线的测量。单位in(英寸)像素(PX)代表屏幕上一个物理的像素点。屏幕密度density为解决Android 设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素…

【UI设计】移动设备的界面设计尺寸

刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大、文字该用多大才合适、我要做几套界面才可以?什么七七八八的也着实让人有些头疼。 1、尺寸及分辨率 iPhone 界面尺寸:320x480、640x960、640x1136 iPad 界面尺寸…

UI(1)---手机界面设计中12种常用布局

手机界面设计中12种常用布局 手机界面设计中12种常用布局 转载自: 手机界面设计中12种常用布局 - 轩枫阁 总结下手机界面改版要考虑的布局,主要的分为以下2大类 主导航 列表式陈列馆式九宫馆式选项卡式旋转木马行为扩展式多面板图表式 次导航 抽屉式超级…