使用egg.js實(shí)現(xiàn)手機(jī)、驗(yàn)證碼注冊(cè)的項(xiàng)目實(shí)踐
更新時(shí)間：2022年04月18日 09:55:29 作者：@逆風(fēng)boy
本文主要介紹了使用egg.js實(shí)現(xiàn)手機(jī)、驗(yàn)證碼注冊(cè)的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
手機(jī)號(hào)注冊(cè)、驗(yàn)證碼校驗(yàn)
app/contrpoller/pass.js
'use strict';
const Controller = require('egg').Controller;
class PassController extends Controller {
?//登錄
? async login() {
? ? await this.ctx.render('pass/login.html');
? }
? async getCode(){
? ? const { ctx,service } = this;
? ? const captcha=await service.tools.verify(); /* 獲取服務(wù)里面返回的生成的驗(yàn)證碼信息 */
? ? this.ctx.session.identify_code=captcha.text; ?/* 驗(yàn)證碼上面的信息,文字內(nèi)容存放到session里面 */
? ? ctx.response.type = 'image/svg+xml'; ?/* 返回的生成的驗(yàn)證碼的格式 */
? ? ctx.body=captcha.data; ?/* 給頁(yè)面返回一張圖片 */
? }
? ?//注冊(cè)第一步 輸入手機(jī)號(hào)
? async registerStep1() {
? ? await this.ctx.render('pass/register_step1.html');
? }
? //注冊(cè)第二步 ?驗(yàn)證碼驗(yàn)證碼是否正確
? async registerStep2() {
? ? var sign=this.ctx.request.query.sign;
? ? var identify_code=this.ctx.request.query.identify_code;
? ? var add_day=await this.service.tools.getDay(); ? ? ? ? //年月日
? ? var userTempResult=await this.ctx.model.User.UserTemp.find({"sign":sign,add_day:add_day});
? ? if(userTempResult.length==0){
? ? ? this.ctx.redirect('/register/registerStep1');
? ? }else{
? ? ? await this.ctx.render('pass/register_step2.html',{
? ? ? ? sign:sign,
? ? ? ? phone:userTempResult[0].phone,
? ? ? ? identify_code:identify_code
? ? ? });
? ? }
? }
? //注冊(cè)第三步 ?輸入密碼
? async registerStep3() {
? ? var sign = this.ctx.request.query.sign;
? ? var phone_code = this.ctx.request.query.phone_code;
? ? var msg = this.ctx.request.query.msg || '';
? ? var add_day = await this.service.tools.getDay(); ? ? ? ? //年月日
? ? var userTempResult = await this.ctx.model.User.UserTemp.find({ "sign": sign, add_day: add_day });
? ? if (userTempResult.length == 0) {
? ? ? this.ctx.redirect('/register/registerStep1');
? ? } else {
? ? ? await this.ctx.render('pass/register_step3.html', {
? ? ? ? sign: sign,
? ? ? ? phone_code: phone_code,
? ? ? ? msg: msg
? ? ? });
? ? }
? }
? ? //完成注冊(cè) ?post
? async doRegister() {
? ? this.ctx.body='完成注冊(cè)';
? }
? //發(fā)送短信驗(yàn)證碼
? async sendCode(){
? ? var phone=this.ctx.request.query.phone;
? ? var identify_code=this.ctx.request.query.identify_code; ?//用戶輸入的驗(yàn)證碼
? ? if(identify_code.toLowerCase()!=this.ctx.session.identify_code.toLowerCase()){
? ? ? ? this.ctx.body={
? ? ? ? ? success:false,
? ? ? ? ? msg:'輸入的圖形驗(yàn)證碼不正確'
? ? ? ? }
? ? }else{
? ? ? ? //判斷手機(jī)格式是否合法
? ? ? ? var reg =/^[\d]{11}$/;
? ? ? ? if(!reg.test(phone)){
? ? ? ? ? this.ctx.body={
? ? ? ? ? ? success:false,
? ? ? ? ? ? msg:'手機(jī)號(hào)不合法'
? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? var add_day=await this.service.tools.getDay(); ? ? ? ? //年月日
? ? ? ? ? var add_time=await this.service.tools.getTime();
? ? ? ? ? var sign=await this.service.tools.md5(phone+add_day); ?//簽名
? ? ? ? ? var ip=this.ctx.request.ip.replace(/::ffff:/, ''); ? ? //獲取客戶端ip
? ? ? ? ? var phone_code=await this.service.tools.getRandomNum(); ?//發(fā)送短信的隨機(jī)碼
? ? ? ? ? var userTempResult=await this.ctx.model.User.UserTemp.find({"sign":sign,add_day:add_day});
? ? ? ? ? //1個(gè)ip 一天只能發(fā)10個(gè)手機(jī)號(hào)
? ? ? ? ? var ipCount=await this.ctx.model.User.UserTemp.find({"ip":ip,add_day:add_day}).count();
? ? ? ? ? if(userTempResult.length>0){
? ? ? ? ? ? ? if(userTempResult[0].send_count<6 && ipCount<10){ ? ? ? ? ? ? ? ? ? ? //執(zhí)行發(fā)送
? ? ? ? ? ? ? ? ? ? var send_count=userTempResult[0].send_count+1;
? ? ? ? ? ? ? ? ? ? await this.ctx.model.User.UserTemp.updateOne({"_id":userTempResult[0]._id},{"send_count":send_count,'add_time':add_time});
? ? ? ? ? ? ? ? ? ? this.ctx.session.phone_code=phone_code;
? ? ? ? ? ? ? ? ? ? //發(fā)送短信
? ? ? ? ? ? ? ? ? ? this.service.sendmsg.send(phone,phone_code);
? ? ? ? ? ? ? ? ? ? console.log('---------------------------------');
? ? ? ? ? ? ? ? ? ? console.log(phone_code,ipCount);
? ? ? ? ? ? ? ? ? ? this.ctx.body={
? ? ? ? ? ? ? ? ? ? ? success:true,
? ? ? ? ? ? ? ? ? ? ? msg:'短信發(fā)送成功',
? ? ? ? ? ? ? ? ? ? ? sign:sign,
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.ctx.body={"success":false,msg:'當(dāng)前手機(jī)號(hào)碼發(fā)送次數(shù)達(dá)到上限，明天重試'};
? ? ? ? ? ? ? }
? ? ? ? ? }else{
? ? ? ? ? ? ? var userTmep=new this.ctx.model.User.UserTemp({
? ? ? ? ? ? ? ? ? phone,
? ? ? ? ? ? ? ? ? add_day,
? ? ? ? ? ? ? ? ? sign,
? ? ? ? ? ? ? ? ? ip,
? ? ? ? ? ? ? ? ? send_count:1
? ? ? ? ? ? ? });
? ? ? ? ? ? ? userTmep.save();
? ? ? ? ? ? ? this.ctx.session.phone_code=phone_code;
? ? ? ? ? ? ? //發(fā)送短信
? ? ? ? ? ? ? this.service.sendmsg.send(phone,phone_code);
? ? ? ? ? ? ? this.ctx.body={
? ? ? ? ? ? ? ? success:true,
? ? ? ? ? ? ? ? msg:'短信發(fā)送成功',
? ? ? ? ? ? ? ? sign:sign,
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? }
? }
? //驗(yàn)證驗(yàn)證碼
? async validatePhoneCode(){
? ? var sign=this.ctx.request.query.sign;
? ? var phone_code=this.ctx.request.query.phone_code;
? ? var add_day=await this.service.tools.getDay(); ? ? ? ? //年月日
? ? if(this.ctx.session.phone_code!=phone_code){
? ? ? this.ctx.body={
? ? ? ? success:false,
? ? ? ? msg:'您輸入的手機(jī)驗(yàn)證碼錯(cuò)誤'
? ? ? }
? ? }else{
? ? ? var userTempResult=await this.ctx.model.User.UserTemp.find({"sign":sign,add_day:add_day});
? ? ? if(userTempResult.length<=0){
? ? ? ? this.ctx.body={
? ? ? ? ? success:false,
? ? ? ? ? msg:'參數(shù)錯(cuò)誤'
? ? ? ? }
? ? ? }else{
? ? ? ? //判斷驗(yàn)證碼是否超時(shí)
? ? ? ? var nowTime=await this.service.tools.getTime();
? ? ? ? if((userTempResult[0].add_time-nowTime)/1000/60>30){
? ? ? ? ? this.ctx.body={
? ? ? ? ? ? success:false,
? ? ? ? ? ? msg:'驗(yàn)證碼已經(jīng)過(guò)期'
? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? //用戶表有沒(méi)有當(dāng)前這個(gè)手機(jī)號(hào) ? ? ? ?手機(jī)號(hào)有沒(méi)有注冊(cè)
? ? ? ? ? var userResult=await this.ctx.model.User.User.find({"phone":userTempResult[0].phone});
? ? ? ? ? if(userResult.length>0){
? ? ? ? ? ? this.ctx.body={
? ? ? ? ? ? ? success:false,
? ? ? ? ? ? ? msg:'此用戶已經(jīng)存在'
? ? ? ? ? ? }
? ? ? ? ? }else{
? ? ? ? ? ? this.ctx.body={
? ? ? ? ? ? ? success:true,
? ? ? ? ? ? ? msg:'驗(yàn)證碼輸入正確',
? ? ? ? ? ? ? sign:sign
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
? //完成注冊(cè) ?post
? async doRegister() {
? ? var sign=this.ctx.request.body.sign;
? ? var phone_code=this.ctx.request.body.phone_code;
? ? var add_day=await this.service.tools.getDay(); ? ? ? ? //年月日
? ? var password=this.ctx.request.body.password;
? ? var rpassword=this.ctx.request.body.rpassword;
? ? var ip=this.ctx.request.ip.replace(/::ffff:/, '') ;
? ? if(this.ctx.session.phone_code!=phone_code){
? ? ? //非法操作
? ? ? this.ctx.redirect('/pass/registerStep1');
? ? }
? ? var userTempResult=await this.ctx.model.User.UserTemp.find({"sign":sign,add_day:add_day});
? ? if(userTempResult.length==0){
? ? ? //非法操作
? ? ? this.ctx.redirect('/pass/registerStep1');
? ? }else{
? ? ? //傳入?yún)?shù)正確 執(zhí)行增加操作
? ? ? if(password.length<6 || password!=rpassword){
? ? ? ? var msg='密碼不能小于6位并且密碼和確認(rèn)密碼必須一致';
? ? ? ? this.ctx.redirect('/register/registerStep3?sign='+sign+'&phone_code='+phone_code+'&msg='+msg);
? ? ? }else{
? ? ? ? ? var userModel=new this.ctx.model.User.User({
? ? ? ? ? phone:userTempResult[0].phone,
? ? ? ? ? password:await this.service.tools.md5(password),
? ? ? ? ? last_ip:ip
? ? ? ? });
? ? ? ? //保存用戶
? ? ? ? var userReuslt=await userModel.save();
? ? ? ? if(userReuslt){
? ? ? ? ? //跳轉(zhuǎn)到登入頁(yè)面
? ? ? ? ? this.ctx.redirect('/login');
? ? ? ? }
? ? ? ? // if(userReuslt){
? ? ? ? // ? //獲取用戶信息
? ? ? ? // ? var userinfo=await this.ctx.model.User.User.find({"phone":userTempResult[0].phone},'_id phone last_ip add_time email status');
? ? ? ? // ? //用戶注冊(cè)成功以后默認(rèn)登錄
? ? ? ? // ? //cookies 安全 ? ? ?加密
? ? ? ? // ? this.service.cookies.set('userinfo',userinfo[0]);
? ? ? ? // ? this.ctx.redirect('/');
? ? ? ? // }
? ? ? }
? ? }
? }
}
module.exports = PassController;mode/user.js
module.exports = app => {
const mongoose = app.mongoose;
const Schema = mongoose.Schema;
var d=new Date();
const User = new Schema({
/*
ip:ip,
password:password,
phone:phone,
add_time:add_time,
last_ip:last_ip,
status:status
*/
password:{type:String },
phone: {type:Number },
last_ip:{type:String },
add_time: {
type:Number,
default: d.getTime()
},
email:{type:String },
status: {
type:Number,
default: 1
}
});
return mongoose.model('User', User,'user');
};router.js 路由配置
module.exports = app => {
? ? const { router, controller } = app;
? ? //普通用戶登入
? ? router.get('/user/verify', controller.admin.base.verify);
? ? //用戶注冊(cè)登錄
? ? router.get('/login',controller.default.pass.login);
? ? router.get('/register/registerStep1', controller.default.pass.registerStep1);
? ? router.get('/register/registerStep2', controller.default.pass.registerStep2);
? ? router.get('/register/registerStep3', controller.default.pass.registerStep3);
? ? //用戶點(diǎn)擊注冊(cè)
? ? router.get('/pass/sendCode', controller.default.pass.sendCode);
? ? //注冊(cè)前臺(tái)驗(yàn)證碼
? ? router.get('/verify', controller.default.pass.getCode);
? ? //注冊(cè)驗(yàn)證手機(jī)短信碼
? ? router.get('/pass/validatePhoneCode', controller.default.pass.validatePhoneCode);
? ? //注冊(cè)最后一步，輸入賬號(hào)和密碼
? ? router.post('/pass/doRegister', controller.default.pass.doRegister);
};service.js
獲取驗(yàn)證碼
'use strict';
//引入node.js ?生成svg圖形驗(yàn)證碼模塊
const svgCaptcha = require('svg-captcha');
const Service = require('egg').Service;
const md5 = require('md5');
const path=require('path');
const sd = require('silly-datetime');
const mkdirp = require('mz-modules/mkdirp');
const Jimp = require("jimp"); ?//生成縮略圖的模塊
class ToolsService extends Service {
? async verify() { ?/* 生成驗(yàn)證碼 */
? ? const captcha = svgCaptcha.create(
? ? ? {
? ? ? ? size:4, ? ? //驗(yàn)證碼圖片里面的一些信息
? ? ? ? fontSize: 50,
? ? ? ? width: 100,
? ? ? ? height:40,
? ? ? ? background: "#cc9966"
? ? ? });
? ? return ?captcha;
? }
? /*生成隨機(jī)的4位數(shù)字*/
? async getRandomNum(){
? ? ? let num='';
? ? ? for(var i=0;i<4;i++){
? ? ? ? num+=Math.floor(Math.random()*10)
? ? ? }
? ? ? return num;
? ? }
? /*生成當(dāng)年當(dāng)月當(dāng)天的數(shù)字*/
? async getDay(){
? ? const day=sd.format(new Date(), 'YYYYMMDD');
? ? return day;
? }
? /* 生成當(dāng)前時(shí)間*/
? async getTime(){
? ? ?var date=new Date();
? ? ?return date.getTime();
? }
? async md5(string){ ? /* 封裝一個(gè)md5加密*/
? ? ? ? return ?md5(string);
? }
? async getFocusAddPath(filename){
? ? ? /*
? ? ? ? ? 1: 獲取傳遞過(guò)來(lái)的圖片的名字， 獲取當(dāng)前日期 silly-datetime模塊
? ? ? ? ? 2: 根據(jù)當(dāng)前的日期,設(shè)置對(duì)應(yīng)的文件夾，如果存在就不設(shè)置，不存在就設(shè)置 mz-modules模塊
? ? ? */
? ? ?const day=sd.format(new Date(), 'YYYYMMDD');
? ? ?let dir=path.join(this.config.uploadDir,day);
? ? ?await mkdirp(dir);
? ? ?const date=new Date();
? ? ?let d=await date.getTime(); ? /*毫秒數(shù)*/
? ? ?/*圖片保存的路徑*/
? ? ?let uploadDir=path.join(dir,d+path.extname(filename));
? ? ?/*app\public\admin\upload\20190614\1560520826971.png */
? ? return {
? ? ? uploadDir:uploadDir,
? ? ? /* 保存到數(shù)據(jù)庫(kù)的地址 */
? ? ? saveDir:uploadDir.slice(3).replace(/\\/g,'/')
? ? }
? }
? //生成縮略圖的公共方法
? async jimpImg(target){
? ? //上傳圖片成功以后生成縮略圖
? ? Jimp.read(target, (err, lenna) => {
? ? ? if (err) throw err;
? ? ? lenna.resize(200, 200) // resize
? ? ? ? .quality(90) // set JPEG quality
? ? ? ? .write(target+'_200*200'+path.extname(target)); // save
? ? ? lenna.resize(400, 400) // resize
? ? ? ? .quality(90) // set JPEG quality
? ? ? ? .write(target+'_400*400'+path.extname(target)); // save
? ? });
? }
}
module.exports = ToolsService;sendmsg.js
發(fā)送短信驗(yàn)證碼
（需要上云片網(wǎng)購(gòu)買(mǎi)短信服務(wù)）
'use strict';
const Service = require('egg').Service;
var https = require('https');
var qs = require('querystring');
class SendmsgService extends Service {
? async send(mobile,code) {
? ? //apikey自己到云片網(wǎng)上面去買(mǎi)。
? ? var apikey = '092******************eec';
? ? // 修改為您要發(fā)送的手機(jī)號(hào)碼，多個(gè)號(hào)碼用逗號(hào)隔開(kāi)
? ? var mobile = mobile;
? ? // 修改為您要發(fā)送的短信內(nèi)容
? ? var text = '【java學(xué)習(xí)網(wǎng)】您的驗(yàn)證碼是'+code;
? ? // 智能匹配模板發(fā)送https地址
? ? var sms_host = 'sms.yunpian.com';
? ? var send_sms_uri = '/v2/sms/single_send.json';
? ? // 指定模板發(fā)送接口https地址
? ? send_sms(send_sms_uri,apikey,mobile,text);
? ? function send_sms(uri,apikey,mobile,text){
? ? ? ? var post_data = {
? ? ? ? 'apikey': apikey,
? ? ? ? 'mobile':mobile,
? ? ? ? 'text':text,
? ? ? ? };//這是需要提交的數(shù)據(jù)
? ? ? ? var content = qs.stringify(post_data);
? ? ? ? post(uri,content,sms_host);
? ? }
? ? function post(uri,content,host){
? ? ? ? var options = {
? ? ? ? ? ? hostname: host,
? ? ? ? ? ? port: 443,
? ? ? ? ? ? path: uri,
? ? ? ? ? ? method: 'POST',
? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? var req = https.request(options, function (res) {
? ? ? ? ? ? // console.log('STATUS: ' + res.statusCode);
? ? ? ? ? ? // console.log('HEADERS: ' + JSON.stringify(res.headers));
? ? ? ? ? ? res.setEncoding('utf8');
? ? ? ? ? ? res.on('data', function (chunk) {
? ? ? ? ? ? ? ? ?console.log('BODY: ' + chunk); ? ? //如果錯(cuò)誤 ?自己把它寫(xiě)入一個(gè)日志
? ? ? ? ? ? });
? ? ? ? });
? ? ? ? //console.log(content);
? ? ? ? req.write(content);
? ? ? ? req.end();
? ? }
? }
}
module.exports = SendmsgService;到此這篇關(guān)于使用egg.js實(shí)現(xiàn)手機(jī)、驗(yàn)證碼注冊(cè)的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)egg.js 手機(jī)驗(yàn)證碼注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js封裝無(wú)縫輪播功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JavaScript之不可靠的undefined，想深入JS的同學(xué)，可以參考下2021-05-05
cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript設(shè)計(jì)模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之模板方法模式原理與用法,結(jié)合實(shí)例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07
關(guān)于javaScript注冊(cè)click事件傳遞參數(shù)的不成功問(wèn)題
在javaScript中給一個(gè)html元素注冊(cè)click事件處理函數(shù)時(shí)，比如給該處理函數(shù)傳3個(gè)參數(shù)?？墒遣还苁鞘褂孟旅婺欠N方式都不能給事件處理函數(shù)傳遞參數(shù)2014-07-07
利用js給datalist或select動(dòng)態(tài)添加option選項(xiàng)的方法
下面小編就為大家分享一篇利用js給datalist或select動(dòng)態(tài)添加option選項(xiàng)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了微信小程序批量上傳圖片到七牛,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
詳解如何讓InstantClick兼容MathJax、百度統(tǒng)計(jì)等
本篇文章主要介紹了如何讓InstantClick兼容MathJax、百度統(tǒng)計(jì)等，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09