微信小程序实现图形验证码登陆+手机验证码登陆

最新推荐文章于 2024-09-07 20:30:00 发布
最新推荐文章于 2024-09-07 20:30:00 发布
阅读量2.6k 收藏 14
点赞数 5
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42631244/article/details/131802338
版权

登陆（图形验证码+手机验证码）

前端界面如下：
在这里插入图片描述

微信小程序wxml代码
<view class="container_register">
    <view class="content" wx:if="{{ !agreementShow && !AntiFraudShow && !illegalShow}}">
        <image class="top_img" src="{{logoUrl}}"></image>
        <ul class="register_list">
            <li>
                <view>
                    <image src="{{phoneUrl}}"></image>
                    <input type="number" placeholder="请输入手机号码" value="{{phone}}" bindinput="getPhone"/>
                </view>
            </li>
            <li>
                <view>
                    <image src="{{ImgCodeUrl}}"></image>
                    <input type="text" placeholder="请输入图形验证码" bindinput="getImgCode"/>
                </view>
                <canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30px;"></canvas>
            </li>
             <li>
                <view>
                    <image src="{{codeUrl}}"></image>
                    <input type="number" placeholder="请输入短信验证码" bindinput="getCode"/>
                </view>
                <button class="vertify_code" wx:if="{{isActive}}" bindtap="getVerifyCode">{{contentTxt}}</button>
                <view class="second" wx:if="{{!isActive}}">
                    {{count}}秒
                </view>
            </li>
        </ul>
        <button bindtap="submitData">确定</button>
    </view>
</view> 

js文件代码
let countDown = null; //自定义一个倒计时的函数
import {get_verification_code,login} from '../../assets/api/login'
import APIConfig from "../../config/api";
var ctx;
Page({
    data:{
        isActive:true,
        count:0,
        code:'',//手机验证码
        phone:'',//手机号码
        contentTxt: '获取验证码', //按钮中展示的内容
        countTime: 60, //倒计时的时间
        text:"",
        value:'',
        imgCode:'',//图形验证码
    },
    onLoad(options) {
        // 判断是否存在token--存在则直接跳转到到列表页面
        let type = options.serviceBaseUrl
        if (wx.getStorageSync("token"))
        return wx.redirectTo({
            url: "/pages/questionList/list",
        });
        var that = this;
        this.drawPic(that);
        let arr ={arr:1}
        
    },
    change: function() {
        var that = this;
        this.drawPic(that);
    },
    randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
        },
        /**生成一个随机色**/
        randomColor(min, max) {
        let r = this.randomNum(min, max);
        let g = this.randomNum(min, max);
        let b = this.randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    },
    /**绘制验证码图片**/
    drawPic(that) {
        ctx = wx.createCanvasContext('canvas');
        /**绘制背景色**/
        ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, 90, 28)
        /**绘制文字**/
        var arr;
        var text = '';
        var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
        for (var i = 0; i < 4; i++) {
        var txt = str[this.randomNum(0, str.length)];
        ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
        ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小
        var x = 5 + i * 20;
        var y = this.randomNum(20, 25);
        var deg = this.randomNum(-20, 20);
        //修改坐标原点和旋转角度
        ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 5, 0);
        text = text + txt;
        //恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
        }
        /**绘制干扰线**/
        for (var i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));
        ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));
        ctx.stroke();
        }
        /**绘制干扰点**/
        for (var i = 0; i < 20; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);
        ctx.fill();
        }
        ctx.draw(false, function() {
        that.setData({
            text: text
        })
        });
    },
    //手机号验证码输入
    getCode(e){
        let number_code = e.detail.value;
        if(number_code.length > 6){
            number_code = number_code.slice(0,6)
        }
        this.setData({
            code:number_code
        })
    },
    //图形验证码输入
    getImgCode(e){
        let imgCode = e.detail.value;
        imgCode = imgCode.toUpperCase()
        this.setData({
            imgCode
        })
    },
    //手机号输入
    getPhone(e){
        let phone = e.detail.value;
        this.setData({
            phone
        })
    },
    //获取手机号验证码
    getVerifyCode(){
        if(this.data.phone == ''){
            wx.showToast({
                title: '手机号不能为空',
                icon: 'none',
                duration: 3000
            })
            return
        }
        if(this.data.imgCode != this.data.text){
            wx.showToast({
                title: '请输入正确的图形验证码',
                icon: 'none',
                duration: 3000
            })
            return
        }
        let that = this; //防止this指向问题
        get_verification_code(this.data.phone, this.data.team_code,this.data.user_name).then(res=>{
            if(res.status == 200){
                wx.showToast({
                    title: '验证码已发送，请注意查收',
                    icon: 'none',
                    duration: 3000
                })
                let countTime = that.data.countTime
                countDown = setInterval(function () {
                    countTime--; // 倒计时开始递减
                    // 更新按钮中的显示内容
                    that.setData({
                        isActive: false
                    })
                    that.setData({
                        count: countTime
                    })
                    // 如果倒计时时间小于或者等于0，也就是倒计时结束，显示 “重新发送” 字样
                    if (countTime <= 0) {
                    clearInterval(countDown); //停止执行countDown函数
                    // 更新按钮中的显示内容
                    that.setData({
                        contentTxt: '重新发送',
                        countTime: 60,
                    })
                    that.setData({
                        isActive: true
                    })
                    }
                }, 1000)
            }else{
                wx.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none',
                    duration: 3000
                })
            }
        })
    },
    //提交数据
    submitData(){
        if(this.data.phone == ''){
            wx.showToast({
                title: '手机号码不能为空',
                icon: 'none',
                duration: 3000
            })
            return
        }
        // if(this.data.value == ''){
        //     wx.showToast({
        //         title: '请阅读并同意授权协议',
        //         icon: 'none',
        //         duration: 3000
        //     })
        //     return
        // }
        if(this.data.imgCode == ''){
            wx.showToast({
                title: '图形验证码不能为空',
                icon: 'none',
                duration: 3000
            })
            return
        }
        if(this.data.code == ''){
            wx.showToast({
                title: '手机验证码不能为空',
                icon: 'none',
                duration: 3000
            })
            return
        }
        if(this.data.imgCode != this.data.text){
            wx.showToast({
                title: '请输入正确的图形验证码',
                icon: 'none',
                duration: 3000
            })
            return
        }
        let obj = {
            code:this.data.code,
            phone:this.data.phone
        }
        login(this.data.phone,this.data.code).then(res=>{
            if(res.status == 200){
                let token = res.data.access_token
                let type = res.data.token_type
                wx.setStorageSync('token',type + ' ' + token);
                wx.navigateTo({
                    url: `/pages/questionList/list`
                })
            }else{
                wx.showToast({
                    title: res.message,
                    icon: 'none',
                    duration: 3000
                })
            }
        }).catch(err=>{
            wx.showToast({
                title: '服务器错误',
                icon: 'none',
                duration: 3000
            })
        })
    }
})
乐一吖
关注
微信小程序中短信验证码登录全流程及代码
chuanshenqm74397的博客
07-26 1736
才开始学习小程序，用到短信验证码登录，使用榛子云短信(smsow.zhenzikj.com) 效果: 我是java开发者，后端使用了springMvc 短信验证码实现流程 1、构造手机验证码，生成一个6位的随机数字串； 2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验...
微信小程序实现滑块验证码
热门推荐
Jarry007的博客
03-14 1万+
老规矩，先上Demo: 思 路 创建2个canvas，一个当作背景，一个当作拼图。 传入3个参数，x:canvas中裁剪区域的横坐标，y:canvas中裁剪区域的纵坐标，l:拼图的边长 背景图使用fill()的方法裁剪出一个洞 拼图使用wx.canvasToTempFilePath的方法裁剪成一个拼图图片。 小程序中的触控事件bindtouchmove,bindtouchend分别记录移动的...
图形验证码从设计到实现
最新发布
qq_41934990的博客
09-07 888
获取前端传过来的手机号以及图形验证码，根据ip以及网络地址相关西信息获取缓存key,根据key获取验证码，然后比较验证码是否一致，如果一致验证通过，删除缓存，执行发送短信相关业务。获取验证码的接口非常简单，调用验证码配置类获取验证码，将获取到的验证码缓存到redis中并设置过期时间，然后调用配置类传入验证码获取到图形验证码，通过IO流返回。上述我们主要讲述了用户登录获取验证码的逻辑，用户注册，找回密码逻辑都是差不多一样的，只是后续的处理不太一样，在这里就不再过多讲述了。再去看下校验验证码的这个接口，
小程序手机号登录，手机号验证码登录以及注册登录
weixin_35819549的博客
08-12 176
前言目前大多数常用的小程序都有手机号一键登录这个功能一，手机号登录在微信小程序中，可以通过调用 wx.login() 获取用户的登录凭证 code，然后将 code 发送给后端服务器，由后端通过微信提供的接口获取用户的手机号码。具体步骤如下：登录后复制 // 前端页面的逻辑层 wx.login({ success: ...
小程序图形验证码
bulaider的博客
06-17 530
该篇文章介绍了如何在微信小程序中使用JavaScript和canvasAPI实现动态验证码的生成，包括随机代码生成、字符颜色和位置的随机变化，以及干扰线和点的绘制。最近需要使用到图形验证码，起初使用旧版的api。发现官方已经弃用了，不能实现需要的效果了，折腾好久终于使用新版的api做了出来。以上代码为微信小程序原生代码，可直接复制粘贴就可以运行使用。以及css中的width和height属性，进行大小调整。
图形验证码 uniapp 微信小程序
AAAXiaoApple的博客
07-17 595
【代码】图形验证码 uniapp 微信小程序。
微信小程序中的图形验证码
weixin_43835827的博客
07-14 1873
可以在utils中新建一个mcaptcha.js 代码如下 module.exports = class Mcaptcha { constructor(options) { this.options = options; this.fontSize = options.height * 3 / 6; this.init(); this.refresh(); } init() { this.ctx = wx.createCanvasContext(this.options.el); this.ctx.setT
微信小程序，图形验证码.zip
01-06
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好...
【纯前端】微信小程序验证码
10-11
本教程将详细讲解如何在微信小程序中实现验证码功能。 一、验证码的基本原理 验证码（CAPTCHA）全称“全自动区分计算机和人类的图灵测试”，它的核心目标是区分用户是人还是自动化程序。常见的验证码形式有图像...
微信小程序——有关图形验证码的所有信息
少爷、的博客
04-19 2521
今天写一个有关图形验证码的笔记，先看效果图： 第一个问题图形验证码怎么制作出来的呢？看代码： wxml: <canvas canvas-id="canvas" bindtap='change' style="width:200rpx;height: 70rpx;" ></canvas> CSS 样式写在这里就是随手，方便。 JS： // indexSecond/pages/helpTake/helpTake.js var app = getApp(); var baseUrl
微信小程序 云笔记（邮箱或手机号+验证码注册&登录）
12-30
实现基本的云笔记功能，用户将笔记存储在云端，使用leancloud实现免费的用户系统，使用富文本编辑实现随意的图片添加。支持邮箱或手机号注册
vue+uniapp实现图形验证码功能-插件（附源码）
03-06
vue+uniapp实现图形验证码功能-插件（附源码） 在登录系统时，除了密码登录，还需要提供验证码登录。 涉及验证码，为了安全，一般会加入图形验证码，然后再发短信验证码。 一般是前端请求，通过服务后台生成图形码流...
小程序手机号验证码登录
mengmeng12138的博客
07-17 2143
<view class="container"> <view class="title">登录</view> <form catchsubmit="login"> <view class="inputView"> <input class="inputText" placeholder="请输入手机号" maxlength="11" name="phone" bindblur="phone" /> </view&
小程序基本命令
aiven1637的博客
10-30 3327
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序图形验证码
javaScript_sky的博客
06-27 9538
&lt;canvas class='canvas' style="width:{{cvs.width}};height:{{cvs.height}};" canvas-id="canvas" bindtap='onReady'&gt;&lt;/canvas&gt;定义类的时候最好定义成canvas类，便于可以进行css样式调节字母和数字的组合（4个）let Mcaptcha = require(...
uniapp微信小程序canvas画验证码
honeymoon_的博客
04-11 459
【代码】uniapp微信小程序canvas画验证码。
微信小程序图形验证码,canvas,type为2d
烂人醉
10-30 1193
微信小程序图形验证码,canvas,type为2d index.wxml <!--index.wxml--> <view class="canvas"> <canvas type="2d" id="myCanvas" bindtap='crash'></canvas> </view> index.wxss /**index.wxss**/ .canvas { overflow: hidden; width: 89px; .
微信小程序-手机号验证码登录
SDAW_1的博客
03-31 3464
wxml: <view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手机号</label> <input class="int" name="phone" type="number" placeholder="请输入手机号码" ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值