php 调用短信 短信宝 手机号验证码登录简单实现

Posted 2021-06-01 IronMenPHP

1.进入短信宝官网进行购买  

点击进入

调用接口短信宝的接口  自己封装成方法

/**
 * 第三方短信宝
 * @param $phone 手机号
 * @param $content 内容 验证码
 * @return array
 */
function phoneCode($phone,$content)
{
    $statusStr = array(
        "0" => "短信发送成功",
        "-1" => "参数不全",
        "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
        "30" => "密码错误",
        "40" => "账号不存在",
        "41" => "余额不足",
        "42" => "帐户已过期",
        "43" => "IP地址限制",
        "50" => "内容含有敏感词"
    );
    $smsapi = "http://api.smsbao.com/";
    $user = "zhangfangbo"; //短信平台帐号
    $pass = md5("zhang520."); //短信平台密码
    $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
    $result =file_get_contents($sendurl) ;
    echo $statusStr[$result];
    return ['code'=>$content];
}

2.实现效果  可以自行考虑 提示验证码过期时间

 /**
     * 点击获取验证码
     * @param Request $request
     * @return \\think\\response\\Json
     */
    public function sendPhoneCode(Request $request)
    {
        $redis = new Redis();
        $phone = $request->param('phone');
        if ($phone == "") return json(['code'=>504,'msg'=>'请输入手机号']);
        $strlen =  strlen($phone);

        if ($strlen == 11) json(['code'=>501,'msg'=>'手机号有问题']);

        if ($phone =='' && $strlen !== 11){
            return  json(['code'=>501,'msg'=>'手机号有问题']);
        }

        //生成随机验证码
        $code = mt_rand(999, 9999);
        $res =  phoneCode($phone,$code);
        $code = $res['code'];

        $redis->set($phone,$code);
        $redis->expire($phone,60);

        if ($res){
            return json(['code'=>200,'msg'=>'发送成功']);
        }
        return json(['code'=>502,'msg'=>'发送失败']);
    }

3.填写完验证证码 前台点击登录

public function phoneLogin(Request $request)
    {
        $redis = new Redis();
        $phoneCode = $request->param('code');
        $phone = $request->param('phone');
        if ($phone == "") return json(['code'=>504,'msg'=>'请输入手机号']);

        if (! $redis->has($phone)) return json(['code'=>501,'msg'=>'请重新输入正确的手机号']);

        $code =  $redis->get($phone);
        if ($phoneCode !== $code ) return  json(['code'=>502,'msg'=>'验证码错误']);

        $ver = Users::where('phone',$phone)->find()->toArray();
        if (!$ver) return  json(['code'=>503,'msg'=>'请注册']);

        $jwt = new GetJwt();
        $token =  $jwt->setToken('userToken',$ver['u_id']);

        return json(['code'=>200,'msg'=>'登录成功','token'=>$token]);

    }

4.小程序前台 js代码部分 

Page({
  /**
   * 页面的初始数据
   */
  data: {
    phone:''
  },
  onChange(e) {
    this.setData({
      phone: e.detail,
    });
  },

  sendcode(e) {
    var phone = this.data.phone
    console.log(this.data)
    wx.request({
      url: 'http://tp51.com/index.php/login/loginapi/sendPhoneCode',
      data:{
        phone : phone
      },
      success: (res) => {
        if (res.data.code == 501) {
          Toast(res.data.msg)
        }
        if (res.data.code == 502) {
          Toast(res.data.msg);
        }
      }
    })
  },

  formSubmit(e) {
    //console.log('form发生了submit事件，携带数据为：', e.detail)
    console.log( e.detail.value.phone)
    wx.request({
      url: 'http://tp51.com/index.php/login/loginapi/phoneLogin',
      data: {
        phone: e.detail.value.phone,
        code: e.detail.value.code
      },
      success: (res) => {
        if (res.data.code == 501) {
          Toast(res.data.msg)
        }
        if (res.data.code == 502) {
          Toast(res.data.msg);
        }
        console.log(res.data.code)
        if (res.data.code == 200) {
          Toast.success(res.data.msg);
          var token = res.data.token;
          Cache.set('userToken',token)
          wx.switchTab({
            url: '/pages/index/index',
          })
        }
      }
    })
  },

5.wxml部分

<!--pages/login/login.wxml-->
<view class="imagebox">
  <van-image class="image" round width="10rem" height="10rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
</view>
<form catchsubmit="formSubmit" catchreset="formReset">
  <van-cell-group>
    <van-field name="phone"  label="手机号" placeholder="请输入手机号"   bindinput="inputPhoneNum"   bind:change="onChange" />
    
    <van-cell-group>
      <van-field name='code'  center clearable label="短信验证码" placeholder="请输入短信验证码" 
        use-button-slot>
        <van-button slot="button" size="small" type="primary" bindtap="sendcode">
          发送验证码
        </van-button>
      </van-field>
    </van-cell-group>
  </van-cell-group>
  <van-button class="clicklogin" color="linear-gradient(to right, #4bb0ff, #6149f6)" size="large" formType="submit">
    登录
  </van-button>
</form>

看完了 千万别忘记三连击