laravel-sms 实现阿里云手机发送短信验证码及校验

第一次做手机短信验证码,没有经验,学习好多教程,实现了这个功能,如果各位前辈有比较间洁高效的实现方式可以私信我,或者评论。希望我总结的可以帮助到需要的人。

当前版本

  • PHP 7.3
  • laravel 8
  • Laravel-sms 2.6

一、配置

  • 以阿里云为例配置信息
    购买阿里云短息服务之后,会有一套简单的申请教程,顺着填信息就行,然后就是等待审核,审核大概是1-2两个小时吧,反正我审核的时候是这样一个阶段,审核内容要按标准填,会被打回重新填。

  • 以下审核通过之后的教程

    签名

    laravel-sms 实现阿里云手机短信验证码

模板

laravel-sms 实现阿里云手机短信验证码

  • 需要用到的信息
    accessKeyId
    accessKeySecret
    signName

  • accessKeyId、accessKeySecret的位置如下

laravel-sms 实现阿里云手机短信验证码

laravel-sms 实现阿里云手机短信验证码

  • 建议使用子用户,为什么不直接使用AccessKey,因为什么看图4里面的《黄黄黄》的那些字,子用户可以为其分配一定的权限,比较安全。用就对了别那么多疑惑。记得保存 accessKeyId 和 accessKeySecret,不保存用到的时候特别难受又得验证码这些,特别是验证目标手机号码还不是你自己的,强烈建议保存。

添加权限

laravel-sms 实现阿里云手机短信验证码

laravel-sms 实现阿里云手机短信验证码

二、代码

  • 安装laravel-sms

    composer require toplan/laravel-sms:~2.6

    我用的是2.6,现在应该有比较新的,感兴趣自己去研究。

  • 安装完成之后,在config/app.php文件中providers数组里加入

          //阿里云短信服务
          Toplan\PhpSms\PhpSmsServiceProvider::class,
          Toplan\Sms\SmsManagerServiceProvider::class,

    在config/app.php文件中的aliases数组里加入

    'PhpSms' =>  Toplan\PhpSms\Facades\Sms::class,
    'SmsManager' =>  Toplan\Sms\Facades\SmsManager::class,
  • 生成配置文件,执行以下命令,选取自己要注册的服务就注册两个,找到就注册。

    php artisan vendor:publish

    注册完之后会在config配置文件里面生成 phpsms.php 和 laravel-sms.php

laravel-sms 实现阿里云手机短信验证码

  • 配置参数
    打开 phpsms.php 配置

laravel-sms 实现阿里云手机短信验证码

注意:不是阿里大鱼,别配置错了

laravel-sms 实现阿里云手机短信验证码

打开 laravel-sms.php 找到 templates 数组

laravel-sms 实现阿里云手机短信验证码

laravel-sms 实现阿里云手机短信验证码

到这里就配置完了。

  • 上代码
    新建一个 .js 文件,名字随便起,想起拼音也行,把下面 js 放里面。

    (function($){
      $.fn.sms = function(options) {
          var self = this;
          var btnOriginContent, timeId;
          var opts = $.extend(true, {}, $.fn.sms.defaults, options);
          self.on('click', function (e) {
              btnOriginContent = self.html() || self.val() || '';
              changeBtn(opts.language.sending, true);
              send();
          });
    
          function send() {
              var url = getUrl();
              var requestData = getRequestData();
              $.ajax({
                  url     : url,
                  type    : 'post',
                  data    : requestData,
                  success : function (data) {
                      if (data.success) {
                          timer(opts.interval);
                      } else {
                          changeBtn(btnOriginContent, false);
                          opts.notify.call(null, data.message, data.type);
                      }
                  },
                  error   : function(xhr, type){
                      changeBtn(btnOriginContent, false);
                      opts.notify.call(null, opts.language.failed, 'request_failed');
                  }
              });
          }
    
          function getUrl() {
              return opts.requestUrl ||
                  '/laravel-sms/' + (opts.voice ? 'voice-verify' : 'verify-code')
          }
    
          function getRequestData() {
              var requestData = { _token: opts.token || '' };
              var data = $.isPlainObject(opts.requestData) ? opts.requestData : {};
              $.each(data, function (key) {
                  if (typeof data[key] === 'function') {
                      requestData[key] = data[key].call(requestData);
                  } else {
                      requestData[key] = data[key];
                  }
              });
    
              return requestData;
          }
    
          function timer(seconds) {
              var btnText = opts.language.resendable;
              btnText = typeof btnText === 'string' ? btnText : '';
              if (seconds < 0) {
                  clearTimeout(timeId);
                  changeBtn(btnOriginContent, false);
              } else {
                  timeId = setTimeout(function() {
                      clearTimeout(timeId);
                      changeBtn(btnText.replace('{{seconds}}', (seconds--) + ''), true);
                      timer(seconds);
                  }, 1000);
              }
          }
    
          function changeBtn(content, disabled) {
              self.html(content);
              self.val(content);
              self.prop('disabled', !!disabled);
          }
      };
    
      $.fn.sms.defaults = {
          token       : null,
          interval    : 60,
          voice       : false,
          requestUrl  : null,
          requestData : null,
          notify      : function (msg, type) {
              alert(msg);
          },
          language    : {
              sending    : '短信发送中...',
              failed     : '请求失败,请重试',
              resendable : '{{seconds}} 秒后再次发送'
          }
      };
    })(window.jQuery || window.Zepto);

在你的项目里面引入刚才新建的 js 文件,加入以下代码

laravel-sms 实现阿里云手机短信验证码

<script>
        $('#send-code').sms({
            //laravel csrf token
            token: "{{csrf_token()}}",
            //请求间隔时间
            interval: 60,
            //请求参数
            requestData: {
                //手机号
                mobile: function () {
                    var phone = $('#phone').val()// 输入的手机号,要发给谁

                    return phone;
                },
                //手机号的检测规则
                // mobile_rule : 'mobile_required'
            }
        });
    </script>

这样就能发送短信了

校验

我是直接在 laravel-sms.php 里面对生成的验证码进行缓存,然后再需要的地方取出来进行校验。程序走到这里,就发送成功了。验证码也就确定了,我就在这里缓存了。还有就是如果为该手机号发送短信到了上限,就会发送失败。

laravel-sms 实现阿里云手机短信验证码

这样校验逻辑你自己也就有了方向了。
O 了

我在成都工作,喜欢骑摩托车,喜欢路亚,有相同爱好的朋友,可以私信我,我们一起出去玩。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 1

本地就可以测试发送短信,和校验,我放到线上也没有任何问题,有问题的话私信我,我们可以一起学习。

1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!