| 前端常见的【手机验证码】【图片验证码】功能实现 | 您所在的位置：网站首页 › js获取短信验证码是什么原理 › 前端常见的【手机验证码】【图片验证码】功能实现 |
前端常见的【手机验证码】【图片验证码】功能实现
|
人们总喜欢”甜“，而忘记”先苦后甜“ 一般在系统的注册、登录、反馈等页面需要验证用户个人身份信息，就需要用到【手机验证码】和【图片验证码】功能。 目录 一. 手机验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 二、图片验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 一. 手机验证码功能 1. 实现思路页面需要实现找回密码功能，点击”获取验证码“,调用后端提供的接口，在60秒内提交找回密码请求，将数据表单和验证码发送给后端，后端校验是否为最新的验证码后返回接口调用成功信息。
（1）页面布局 { width: '15px', height: '20px' }} /> { width: '15px', height: '20px' }} /> { width: '15px', height: '20px' }} /> { color: 'red' }}>*设置密码 {getFieldDecorator('password', { rules: [ { required: true, message: '请输入6-16位字符和数字组合，字符区分大小写', // eslint-disable-next-line pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/ }, { validator: validateToNextPassword } ] })()} { width: '70px' }} > { position: 'relative' }}> { width: '70px' }} > { margin: '30px 50px' }}> { window.history.back() }} className={styles.backButton} > 返回 找回密码（2）使用验证码组件YZMButton import React, { useCallback, useState, useRef } from 'react' import styles from './index.less' import classnames from 'classnames' import { Button } from 'antd' interface YZMButtonProps { onClick: (e: any) => any time: number text?: string className: any } export default function YZMButton({ onClick, time, text, className }: YZMButtonProps) { const [yzime, setYzime] = useState(time) const _yzime = useRef(yzime) _yzime.current = yzime const flag = yzime === time const handleClick = useCallback( (e: any) => { if (flag) { if (!onClick(e)) { return } let timer = setInterval(() => { if (_yzime.current === 0) { clearInterval(timer) setYzime(time) } else { setYzime(value => value - 1) } }, 1000) } }, [flag, onClick, time] ) return ( {flag ? text || '获取验证码' : `还剩${yzime}s`} ) }点击按钮之后，按钮变成不可用状态，与此同时60秒倒计时开始。 （3）调接口获取验证码 在click方法中，调用后端提供的方法获取短信验证码 const onclick = useCallback(() => { let callbackRes = true validateFields(['mobile'], (err: any, fieldsValue: any) => { if (err) { callbackRes = false } let { mobile } = fieldsValue let res = { mobile: mobile, type: 'forget-password' } dispatch({ type: 'login/getyzm', params: [res] }).then((v: any) => { if (v.code === -1) { message.error(v.message) callbackRes = false } else if (v.code === 500) { message.error(v.message) callbackRes = false } else { callbackRes = true } }) }) return callbackRes }, [dispatch, validateFields])（4）提交表单 找回密码 const handlOnsave = useCallback(() => { validateFields((err: any, fieldsValue: any) => { if (err) return let res = { userName: fieldsValue.userName, mobile: fieldsValue.mobile, // password: btoa(fieldsValue.password), newPassword: fieldsValue.password, code: fieldsValue.smsCode } dispatch({ type: 'login/getback', params: [res] }).then((v: any) => { if (v.code === 200) { message.info(v.message) window.location.href = '/#/login/password' } else { message.info(v.message) } }) }) }, [dispatch, validateFields]) 二、图片验证码功能 1. 实现思路
进入页面，前端向后端发送请求（需要UUID），获取一张二维码，之后提交表单的同时提交uuid和验证码，后端请求验证。后端使用到阿里的获取短信验证码的服务。 2. 后端接口
后端需要拿到uuid借助阿里的生成图片验证码的工具进行生成，并将图片验证码返回给前端。最后，需要借助前端提交的uuid和验证码信息进行比对，即可实现提交功能。 3. 前端实现（1）使用uuid UUID 是 通用唯一识别码. 安装依赖：npm install uuid 引入依赖：import { v4 as uuidv4 } from "uuid 生成uuid使用方法：const id =uuidv4() console.log(id) e6a2f201-f720-4e98-8fea-7f473101acd3 （2）进入页面获取验证码图片 const getCode = useCallback(() => { let id = uuidv4() setUuid(id) let result = dispatch({ type: 'global/get1', params: ['/uaa/captcha.jpg', { uuid: id }] }) console.log(result) return result }, [dispatch, setUuid]) useEffect(() => { getCode().then((v: any) => { let a = window.URL.createObjectURL(v) setCode(a) }) }, [getCode])生成图片的请求需要向后端提供一个uuid. 注意 这里的请求就是/uaa/captcha.jpg 你没有看错。 （3）处理后端返回的图片并显示 请求之后后端返回的是一张图片，注意是一张图片，而不是图片的url. 可见在这个页面中。上传附件的请求，返回的是JSON数据
但是对于请求图片验证码的请求，返回的是图片格式。
因此需要使用get1方法进行处理。 找到commonModal文件。可以看到里面封装使用了get 和 post方法。 get: async ( { type, params: [url, remoteValue, options = {}] }: { type: string; params: [string, object, object | string] }, { dispatch, getState } ) => { const { back = false, message: messageFlag = false } = options as any const res = await remote(url, remoteValue, 'get') const { success, message: _messagae } = res if (!success) { return } if (messageFlag) { message.success(_messagae || '操作成功!') } if (back) { history.go(-1) } return res }, get1: async ( { type, params: [url, remoteValue, options = {}] }: { type: string; params: [string, object, object | string] }, { dispatch, getState } ) => { const res = await remote(url, remoteValue, 'get1') return res },并且需要使用let a = window.URL.createObjectURL(v)创建一个新的URL对象，并将其设置，并最终绑定在图片img的src中
至此图片验证码就显示出来了。 （4）提交操作 //提交反馈 const submit = useCallback( (data: any) => { validateFields((err: any, fieldsValue: any) => { if (err) return let data = { ...fieldsValue, uuid: uuid, fileId: file[0] && file[0].id } debugger let result = dispatch({ type: 'global/post', params: ['/api/problemFeedback/create', { data }] }) return result }).then((v: any) => { if (v.code === 200) { //setDetailData(v.data) message.success(v.message) toggleForm() } }) }, [dispatch, file, toggleForm, uuid, validateFields] )提交功能平平无奇，注意加上刚才生成的唯一uuid即可交给后端处理。 |
【本文地址】