PHP 短信验证码

来源：情诗网 2021-01-17 分类：情话短信

业务操作流程：输入手机号，发送验证码，收到验证码填写提交验证。常用于短信登录和手机号注册账号。

PHP 短信验证码

一、购买短信验证码搭建接口

填写购买的 $appcode等信息，我们只写了随机生成一个六位数，经过加密变成 token 下发给浏览器。

<?php
    $host = "http://yzxtz.market.alicloudapi.com";
    $path = "/yzx/notifySms";
    $method = "POST";
    $appcode = "8ae5612c0e7f4d2ba70ae79e1490bf88";
    $headers = array();
    array_push($headers, "Authorization:APPCODE " . $appcode);

    // 随机6位数
    $shu = rand(100000, 999999);
 
    $querys = "phone=".$_GET['phone']."&templateId=TP18040316&variable=num%3A0000%2Cmoney%3A" . $shu;
    $bodys = "";
    $url = $host . $path . "?" . $querys;

    $curl = curl_init();
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_FAILONERROR, false);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HEADER, true);
    if (1 == strpos("$".$host, "https://"))
    {
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    }
    curl_exec($curl);

    // 向前端反馈加密的结果
    $token = md5(md5(md5($shu. '谁也不知道我是用的密令是啥？')));

    echo '{"token": "' . $token .'"}';
?>

二、前端页面搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>验证码登录</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container{
            width: 500px;
            padding-top:10px;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <div>
            请输入手机号码：
            <div class="row">
                <input class="form-control col-lg-8" type="password" v-model="phone">
            </div>
        </div>
        <div>
            请输入短信验证码：
            <div class="row">
                <div class="col-lg-16">
                    <input class="form-control" type="text" v-model="yzm">
                </div>
                <div class="col-lg-6">
                    <button class="btn btn-success" :disabled="yifa" @click="fsyzm">
                        {{yifa ? `已经发送，重新发送（${time}）` : '发送验证码'}}
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <button class="btn btn-success" :disabled="yzm == '' || phone == ''" @click="tj">
                提交
            </button>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                phone: '',
                time: 6,
                yifa: false,
                yzm: '',
                token: ''
            },
            methods: {
                fsyzm(){
                    this.yifa = true;

                    // 定时器
                    this.timer = setInterval(()=>{
                        this.time --;
                        if(this.time === 0){
                            this.yifa = false;
                            this.time = 6;
                        }
                    },1000)

                    axios.get('/fasong.php?phone=' + this.phone).then(data=>{
                        // 后端负责发验证码，你负责把token存起来
                        this.token = data.data.token;
                    });
                },
                tj(){
                    axios.get('/check.php?shu=' + this.yzm + '&token=' + this.token ).then(data=>{
                        if(data.data === 'ok'){
                            alert('成功')
                        }else{
                            alert('失败')
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

三、提交验证

上一步手机收到的验证码会同时经过加密下发给浏览器，我们在页面把手机验证码填写进去，Ajax 请求会携带 token 和填写的验证码，在我们的服务端再次对填写的验证码进行同样的加密，并和携带的 token 进行对比，相等表示登录成功！

<?php
    $token = $_GET['token'];
    $shu = $_GET['shu'];

    // 再次加密，比对
    if(md5(md5(md5($shu.'谁也不知道我是用的密令是啥？'))) === $token){
        echo 'ok';
    }else{
        echo 'nook';
    }
?>

PHP 短信验证码

一、购买短信验证码搭建接口

二、前端页面搭建

三、提交验证

热门文章