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


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';
    }
?>

本站以现代、古代情诗为主,情诗网创办于2013年,以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读;可以放在浏览器的收藏夹中(快捷键Ctrl+D);或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享;情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿!喜欢本站的话请大家把本站告诉给你朋友哦!地址是 www.qingshiwang.com !