php实现登录短信验证

今天benny要跟大家说这个其实很简单，就是借用某一个平台的短信api接口实现短信验证，说简单呢，那是因为他的官网：http://www.ucpaas.com上有开发文档，它可以教会一个小白很快的运用它的接口，并开发自己的应用。这个官网还算人性化的，因为你一注册，就给了你10块钱的测试费用来尝试使用它的api，你要知道一条短信0.055元，10块钱给你拿来学习测试已经够多啦！

首先，你进入官网，注册，然后你就点击开发文档：

这里有详细的介绍你怎么用它的东西，我就不在这里bb啦，看完后我们就直接下载一个php的demo文件来试试！！

下载后，你就可以看到一个封装的类Ucpaas.class.php和一个index.php的文件：

上面的注释有详细的解释，要用到的参数啥的，你注册了账号后也就自然有了，多看几遍，有点基础的人几分钟内就可以看得懂的啦！

接着，你就开始阅读官网下面目录的内容：

这里有详细的介绍，我就只是做一个引导吧，具体的大家去阅读哦。

最后，我把这个短信验证功能在我的项目上实现了，你可以看下我的代码截图：

<?php

//载入ucpass类

require('library/Db.class.php');

require_once('library/Ucpaas.class.php');

//初始化必填

$options['accountsid']='******';（这个不能给大家看哦）

$options['token']='******';（这个不能给大家看哦）

//初始化 $options必填

$ucpass=new Ucpaas($options);

//开发者账号信息查询默认为json或xml

header("Content-Type:text/html;charset=utf-8");

//短信验证码（模板短信）,默认以65个汉字（同65个英文）为一条（可容纳字数受您应用名称占用字符影响），超过长度短信平台将会自动分割为多条发送。分割后的多条短信将按照具体占用条数计费。

// 验证码短信：同一个手机号1分钟内不能超过2条，24小时内不能超过8条

$appId="****";（这个不能给大家看哦）

$to=$_POST['to'];

$templateId="244286";

$string='';

for ($i=0; $i <4 ; $i++) {

$string.=rand(0,9);

}

$param=$string;

$db=new DB();

$sql="select * from mr_user where username=:username";

$user=$db->row($sql,array('username'=>$to));

//用户名存在

$id=$user['id'];

if ($user){

$password=md5($param);

$update_sql="update mr_user set password='$password' where id='$id'";

$result_id=$db->query($update_sql);

if ($result_id){

$data=$ucpass->templateSMS($appId,$to,$templateId,$param);

$re='';

$arr=json_decode($data,true);

foreach ($arr as $key=> $value) {

if ($key=='resp') {

foreach ($value as $key2=> $value2) {

if ($key2=='respCode') {

$re=$value2;

}

if ($re=='000000') {

echo 1;//短信已发送！

}elseif ($re=='105147') {

echo 3;//短信发送太频繁

}else{

echo 2;//号码输入有误

}

exit(0);

}

else{

echo 0;//短信发送出错！

}

}else {

$data=$ucpass->templateSMS($appId,$to,$templateId,$param);

$re='';

$arr=json_decode($data,true);

foreach ($arr as $key=> $value) {

if ($key=='resp') {

foreach ($value as $key2=> $value2) {

if ($key2=='respCode') {

$re=$value2;

}

if ($re=='000000') {

$addtime=time();

$insert_sql="insert into mr_user(username,password,addtime) value(:username,:password,$addtime)";

$result_id=$db->query($insert_sql,array('username'=>$to,'password'=>md5($param)));

if ($result_id){

echo 1;//短信已发送！

}else{

echo 0;//短信发送出错！

}

}elseif($re='105147'){

echo 3;//短信发送太频繁

}else{

echo 2;//号码输入有误

}

图|来源截图

不当你的世界只作你的肩膀

○

Benny

○

技术帖

这样的一个样式很简单, 整体思路是首先在布局中要有一个真实的输入框, 通过透明度隐藏掉。然后覆盖层上开始写自定义样式, 通过动画布局模拟出你想要的输入框样式。

下图为美团App等短信验证码布局

接下来使用 vue3 + typescript 实现该功能

<!-- 模版布局 -->
<template>
  <div class="input-diy">
    <p>美团App验证码输入框DEMO</p>
    <div class="input-wrap">
      <input 
        maxlength="4" 
        type="number" 
        v-model="currentPwd"
        />
      <span 
        v-for="(val, index) in pwdList" 
        :key="index"
        :class="customClass(index)">
        {{ pwdArr[index] }}
        </span>
    </div>
  </div>
</template>

// 逻辑代码
<script lang="ts">
import { 
  ref, 
  watch,
  reactive, 
  defineComponent, 
} from 'vue';
export default defineComponent({
  setup() { 
      let currentPwd=ref<string>(''), // 输入的验证码值
      pwdArr=reactive<string[]>([]), // 输入框内的值
      pwdLength=ref<number | null>(0),  // 已经输入的验证码长度，默认为0，显示光标
      pwdList=reactive<boolean[]>([false, false, false, false]); // 初始化验证码数据
    
    watch(()=>{
      return currentPwd.value;
    }, (val)=>{
      watchCurrentPwd(val);
    })

    /**
     * 监听input验证码改变
     */
    const watchCurrentPwd=(newVal: String)=> {
        let nval=newVal.toString().replace(/\s+/g,"");
        pwdLength.value=nval.length || 0; 
        pwdList.forEach((val: boolean, i: number)=> {
          pwdArr[i]=nval.slice(i, i + 1); // 获取输入inputvalue放入验证码框
        });
        if(nval.length > 4) { // 截取四位数据
          currentPwd.value=nval.slice(0, 4);
        } else if( nval.length===4 ) {
          pwdLength.value=null; // 输完验证码 取消光标
        }
    } 

    /**
     * 自定义类名
     */
    const customClass=(index: Number)=> {
      return  index===pwdLength.value ? 'active' : '';
    }
    return {
      pwdArr,
      pwdList,
      pwdLength,
      currentPwd,
      customClass
    }
  }
});
</script>

/* CSS 样式 */
<style  scope>
  .input-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    overflow: hidden;
  }

  /* 真实输入框 */
  .input-wrap input {
    opacity: 0;
    color: transparent;
    position: absolute;
    top: 0;
    left: -50%;
    /*bottom: 0;*/
    width: 750px;
    height: 150%;
    z-index: 2;
    text-align: left;
  }

  /* 模拟验证码输入框 */
  .input-wrap span {
    width: 60px;
    height: 60px;
    border-bottom: 2px solid #BDC2CC;
    margin-right: 25px;
    position: relative;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    color: #303747;

  }

  .input-wrap span:last-child {
    margin-right: 0;
  }

  /*模拟光标底部*/
  .input-wrap .active {
    border-bottom: 2px solid #22242A;
  }

  /*模拟光标闪烁*/
  .input-wrap .active:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 30px;
    display: block;
    width: 2px;
    height: 30px;
    background-color: #22242A;
    transform: translate(-50%, -50%);
    animation: focus 1s infinite;
  }

  .input-wrap-diy{
    position: relative;
  }

  /* 光标动画 */
  @keyframes focus {
    0% {
      opacity: 1
    }
    50% {
      opacity: 1
    }
    51% {
      opacity: 0
    }
    99% {
      opacity: 0
    }
  }
</style>

你学废了么? 如果想了解更多的web小程序开发知识, 请点赞收藏加关注啊。手撸不易！持续更新...

DEMO效果图

了密码加密之外，验证码也是安全性的保障之一。开发B/S的同学，应该很清楚，它可以防止不法分子在短时间内用机器批量的重复操作，防止机器人程序暴力登录或攻击。

如今，为了提高破解难度，有12306购票验证那种，还有众多平台拼图那种，常见的是咱们这次要说的，由随机数字和字母组成这种。

1

在Django框架中，你可以自己写一个生成验证码的类，也可以别人已经写好并且开源的第3方验证码库：captcha。

不懂得偷懒的程序猿不是好工程师，在能满足需求的前期下，考虑先用现成的。要让django项目支持captcha，请打开【终端】，输入：pip3 install django-simple-captcha命令。

2

安装完captcha开发库后，打开django项目，进行配置。目标定位到settings.py文件中的INSTALLED_APPS节点，在其最后添加上captcha。

还记得上一次，在此添加sales后，咱们做了什么动作么？--没错，就是生成数据库表结构，这次也不例外，还是执行：python3 manage.py makemigrations和python3 manage.py migrate命令。

有了数据表还不够，还得提供访问路径，否则没办法获取验证码。打开sales/urls.py文件，改成如下内容。

from django.urls import include, path

from . import views

# 进行方法和请求名称绑定

urlpatterns=[

path('index/', views.index),

path('reg/', views.reg),

path('captcha/', include('captcha.urls')),

]

3

配置好了以后，接着就是应用了。打开views.py文件，导入生成验证码需要用到的模块并调整返回登录界面时的代码，完整代码贴出来，拿走不谢。

from django.shortcuts import render

from sales.models import UserInfo # 导入models文件

from erpsite.utils.EncryptUtil import MD5Encrypt

# 验证码需要导入的模块

from captcha.models import CaptchaStore

from captcha.helpers import captcha_image_url

login_result=''

reg_result=''

def reg(request):

global reg_result

if request.method=='POST':

account=request.POST.get('account', '')

password=request.POST.get('password', '')

#密码进行加密

password=MD5Encrypt.encrypt(password)

print('password:', password)

try:

# 将数据保存到数据库

UserInfo.objects.create(account=account, password=password)

reg_result='恭喜你,注册成功!'

except Exception as e:

reg_result='注册失败,错误信息：'+str(e)

return render(request, 'sales/reg.html', {'result': reg_result})

def index(request):

global login_result

if request.method=='POST':

account=request.POST.get('account', '')

password=request.POST.get('password', '')

#密码进行加密

password=MD5Encrypt.encrypt(password)

user=UserInfo.objects.filter(account=account, password=password)

if user.exists():

login_result='恭喜你,登录成功!'

else:

login_result='登录账号或密码不正确!'

return render(request, 'sales/index.html', {'result': login_result})

else:

#验证码，第一次请求

hashkey=CaptchaStore.generate_key()

image_url=captcha_image_url(hashkey)

captcha={'hashkey': hashkey, 'image_url': image_url}

return render(request, 'sales/index.html', {'captcha': captcha})

生成好验证码后，总得显示的。打开登录界面index.html，新增验证码显示的内容。完整代码也粘贴在此，拿走不谢。

<!DOCTYPE html>

<head>

</head>

<body>

{% csrf_token %}

<h3 style="color:red;">{{ result }}</h3>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</form>

</body>

</html>

4

好了，好了。终于可以运行看看效果了, Yeah! Yeah!结果如你所愿，成功显示出了验证码。

当然，在这个颜值的时代，效果可能没那么好看，但实际上是可以调整的。有关验证码的格式，可到进行设置，给出部分参数，请自行调整去吧。

# 图片大小

CAPTCHA_IMAGE_SIZE=(80, 30)

CAPTCHA_BACKGROUND_COLOR='#ffff00'

# 图片中的文字为随机英文字母

CAPTCHA_CHALLENGE_FUNCT='captcha.helpers.random_char_challenge'

# 图片中的文字为数字表达式

# CAPTCHA_CHALLENGE_FUNCT='captcha.helpers.math_challenge'

# 字符个数

CAPTCHA_LENGTH=4

# 超时(minutes)

CAPTCHA_TIMEOUT=1

在线咨询

上一篇：Skeleton.css源码解读，一个只有419行代
下一篇：H5的爬虫设计示例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

php实现登录短信验证

1

2

3

4

您的项目需求