微信小程序 + laravel8 手机号获取验证码 登录鉴权

1.wxml

<!-- 手机号码 -->
<form bindsubmit="onSubmit">
<text class="text1">手机号码</text>
<view class="phoneNum">
<input type="text" placeholder="请输入手机号码" bindinput="phone" name="phone"></input>
</view>
<!-- 验证码 -->
<text class="text1">验证码</text>
<view class="phoneCode">
<input type="text" placeholder="请输入验证码" name="code" ></input>
<button type="primary" size="mini" bind:tap="setCode" disabled="{{button}}">{{text}}</button>
</view>
<!-- 登录 -->
<view class="loadButton">
<button type="primary" form-type="submit">登录</button>
</view>
</form>

2.wxss

.text1{
  margin:20rpx;
}
.phoneNum input{
  margin: 20rpx;
  padding-left: 10rpx;
  height: 80rpx;
  border: 1rpx solid #c3c3c3;
}
.phoneCode{
  display: flex;
  align-items: center;
}
.phoneCode input{
  width: 60%;
  margin: 20rpx;
  border: 1rpx solid #c3c3c3;
  padding-left: 10rpx;
  height: 80rpx;
}
.phoneCode button{
  height: 80rpx;
  vertical-align: middle;
}

.loadButton button{
  margin-top: 50rpx;
  width: 94% !important;
}

3.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone:'',
    button:false,
    text:'发送验证码'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 手机号
   * @param {*} e 
   */
  phone(e){
    let phone = e.detail.value;
    this.setData({
      phone:phone
    })
  },

  /**
   * 验证码
   * @param {*} e 
   */
  setCode(e){
    let that = this;
    let phone = that.data.phone;
    console.log(phone);
    //验证手机号格式是否正确
    var phone_reg = /^1[35789]\d{9}$/;
    if(!phone_reg.test(phone)){
      wx.showToast({
        title: '手机号格式错误',
        icon:"none"
      })
      return ;
    };
    //发送接口
    wx.request({
      url: '获取短信验证码接口',
      data:{
        phone:phone
      },
      method:"POST",
      success (res) {
        //获取返回来的验证码
        console.log(res.data)
        let time = 60;
        setInterval(function(){
          time--;
          if(time > 0){
            that.setData({
              text:time,
              button:true
            })
          }else{
            that.setData({
              text:'发送验证码',
              button:false
            })
          }
        },1000);
      }
    })
  },
  onSubmit:function(e){
    let params = e.detail.value;
    wx.request({
      url: '手机号登录接口',
      data:params,
      method:"POST",
      success:res=>{
        console.log(res);
        if(res.data.status==200){
          wx.setStorageSync('token', res.data.token)
          wx.switchTab({
            url: '/pages/user/user',
          })
        }else{
          wx.showToast({
            title: res.data.msg,
            icon:"none"
          })
        }
      },fail(e){
        wx.showToast({
          title: res.data.msg,
          icon:"error"
        })
      }
    })
  },
})

4.效果图

5.laravel8 方法

/**
     * 获取验证码 短信宝
     * @param Request $request
     * @return array
     */
    public function getCode(Request $request)
    {
        //接收手机号
        $phone = $request->input('phone');
        //验证手机号
        if (!preg_match("/^1[345678]\d{9}$/",$phone)){
            //手机号格式错误
            return ['status'=>500,'msg'=>'手机号格式错误','data'=>[]];
        }
        //判断请求频率
        if (Cache::has('time_'.$phone)){
            //判断当前请求时间和上次请求时间的间隔
            if (time() - Cache::get('time_'.$phone) < 60){
                //小于60秒 表示请求次数频繁
                return ['status'=>500,'msg'=>'请求次数频繁','data'=>[]];
            }else{
                //大于60 表示时间可以再次请求 将上次的时间 和 验证码删除
                Cache::forget('time_'.$phone);
                Cache::forget('code_'.$phone);
            }
        }
        //判断请求次数
        if (Cache::has('clicks_'.$phone)){
            if (Cache::has('clicks_'.$phone) > 20){
                //一天请求次数太多
                return ['status'=>500,'msg'=>'请求次数已达上限，请明天再来','data'=>[]];
            }
        }
        //发送验证码
        $code = mt_rand(1000,9999);//验证码
        //短信内容
        $content = "您的验证码为{$code},三分钟内有效"; //要发送的短信内容
        $statusStr = array(
            "0" => "短信发送成功",
            "-1" => "参数不全",
            "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
            "30" => "密码错误",
            "40" => "账号不存在",
            "41" => "余额不足",
            "42" => "帐户已过期",
            "43" => "IP地址限制",
            "50" => "内容含有敏感词"
        );
        $smsapi = "http://api.smsbao.com/";
        $user = ""; //短信平台帐号
        $pass = md5(""); //短信平台密码
        $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
        $result =file_get_contents($sendurl) ;
        if ($result == 0){
            //发送成功
            //将验证码 当前发送时间 请求次数缓存
            Cache::put("code_".$phone,$code,180);
            Cache::put("time_".$phone,time());
            Cache::increment("clicks_".$phone);

            return ['status'=>200,'msg'=>$statusStr[$result],'data'=>['code'=>$code]];
        }
        return ['status'=>500,'msg'=>$statusStr[$result],'data'=>[]];
    }

    /**
     * 登录 生成token
     * @param Request $request
     * @return array
     */
    public function login(Request $request)
    {
        //验证
        $validator = Validator::make($request->all(),[
            'phone'=>'required',
            'code'=>'required',
        ],[
            'phone.required'=>'手机号码不能为空',
            'code.required'=>'验证码不能为空',
        ]);

        //判断是否验证成功
        if ($validator->fails()){
            return ['status'=>500,'msg'=>$validator->errors()->first(),'data'=>[]];
        }

        //接收手机号 和 验证码
        $phone = $request->input('phone');
        $code = $request->input('code');

        //判断验证码是否过期
        if (!Cache::has("code_".$phone)){
            return ['status'=>500,'msg'=>"验证码以过期，请重新获取",'data'=>[]];
        }

        //将手机号 存入表中
        $model = User::where('phone',$phone)->first();
        if (!$model){
            $result = User::create(['phone'=>$phone]);
            $userId = $result->id;
        }else{
            $userId = $model->id;
        }

        //根据用户id 生成token
        $token = JwtServer::createToken($userId);
        return ['status'=>200,'msg'=>'success','token'=>$token];
    }

生成jwt 鉴权请参考 

laravel8 实现接口鉴权封装使用JWT