小程序手机号登录(功能基本实现，但有欠缺，可在基础上进行优化)
login.wxml
<view class="container"> <view class="page-body"> <form catchsubmit="formSubmit"> <view class="weui-cell__bd" style="margin: 30rpx 0" > 手机号： <input class="weui-input" name="phone" model:value="{{phone}}" placeholder="请输入手机号" /> </view> <view class="weui-cell__bd" style="margin: 30rpx 0" > 验证码： <input class="weui-input" name="code" placeholder="请输入验证码" /> <button class="btn-code" type="primary" bind:tap="code" >获取验证码</button> </view> <view class="btn-area"> <button class="btn" type="primary" formType="submit">立即登录</button> </view> </form> </view> </view>
login.js
// pages/login/login.js Page({ /** * 页面的初始数据 */ data: { phone:'' }, // 点击立即登录的方法 formSubmit(evt){ //console.log(evt.detail.value); var param=evt.detail.value; wx.request({ url: 'http://www.tp6.com/login/login', //仅为示例，并非真实的接口地址 data: param, method:"POST", header: { 'content-type': 'application/json' // 默认值 }, success (res) { // console.log(res.data) if (res.data.code == 200) { wx.setStorageSync('uid', res.data.data); wx.switchTab({ url: '/pages/index/index', }) }else{ wx.showToast({ title: res.data.msg, duration: 2000//持续的时间 }) } } }) }, // 验证码发送的方法 code(evt){ var phone=this.data.phone; if(phone==''){ wx.showToast({ title: '手机号不可以为空', }) } console.log(phone); wx.request({ url: 'http://www.tp6.com/login/send', //仅为示例，并非真实的接口地址 data: { phone:phone }, method:"POST", header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) if (res.data.code == 200) { }else{ wx.showToast({ title: res.data.msg, duration: 2000//持续的时间 }) } } }) } })
后端tp5框架控制器进行短信发送
// 发送验证码 public function send(Request $request){ // 接受手机号 $phone=$request->post('phone'); // 定义4位数的验证码 $code=rand(1000,9999); // 存入缓冲 cache($phone,$code,60); $statusStr = array( "0" => "短信发送成功", "-1" => "参数不全", "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！", "30" => "密码错误", "40" => "账号不存在", "41" => "余额不足", "42" => "帐户已过期", "43" => "IP地址限制", "50" => "内容含有敏感词" ); $smsapi = "http://api.smsbao.com/"; $user = "13610663855"; //短信平台帐号 $pass = md5("191273214"); //短信平台密码 $content="【好乐迪】您的验证码为".$code."，在20分钟内有效";//要发送的短信内容 $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content); $result =file_get_contents($sendurl) ; return Base::jsonData(200,$statusStr[$result]); } //用户点击登录的触发点击事件 public function login(Request $request){ $params=$request->post(); $userInfo=\app\login\model\Login::userInfo($params['phone']); if (!$userInfo){ return Base::jsonData(500,'手机号不存在');//这里可以跳转至注册页面，在进行登录 } // 去除缓冲的中的手机号 $code=cache($params['phone']); // 发送过来的验证码和缓冲里的验证码进行比较， if ($params['code'] !=$code){ return Base::jsonData(500,'验证码错误',$code); } return Base::jsonData(200,'ok',$code); }
laravel7 小程序登录
wxml: <form bindsubmit="formSubmit"> <view class="weui-cell__bd" style="margin: 30rpx 0" > 手机号： <input class="weui-input" name="phone" model:value="{{phone}}" placeholder="请输入手机号" /> </view> <view class="weui-cell__bd" style="margin: 30rpx 0" > 验证码： <input class="weui-input" name="code" placeholder="请输入验证码" /> <button class="btn-code" type="primary" bind:tap="code" >获取验证码</button> </view> <view class="btn-area"> <button class="btn" type="primary" formType="submit">立即登录</button> </view> </formwx.js
// pages/exam/exam.js Page({ /** * 页面的初始数据 */ data: { phone:'', code:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // 验证码： code(evt){ var phone=this.data.phone; if(phone==''){ wx.showToast({ title: '手机号不可以为空', }) } console.log(phone); wx.request({ url: 'http://www.laravel7.com/send', //仅为示例，并非真实的接口地址 data: { phone:phone }, method:"POST", header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) if (res.data.code == 200) { wx.showToast({ title: '请接收验证码', }) }
if(res.data.code==401){
wx.showToast({
title: '请求太过于频繁',
})
} else{
wx.showToast({ title: res.data.msg, duration: 2000//持续的时间 }) } } }) }, //手机登录： formSubmit:function(evt){ var phone=this.data.phone; var code=evt.detail.value.code; if(phone==''){ wx.showToast({ title: '手机号不可以为空', }) } if(code==''){ wx.showToast({ title: '验证码不可以为空', }) } var param=evt.detail.value; console.log(param); wx.request({ url: 'http://www.laravel7.com/login', //仅为示例，并非真实的接口地址 data: param, method:"POST", header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res) if (res.data.code == 200) {
wx.setStorageSync('user_id', res.data.data.id);
// wx.setStorageSync('uid', res.data.data); // wx.switchTab({ // // url: '/pages/index/index', // }) wx.showToast({ title:'登录成功', duration: 2000//持续的时间 }) } if(res.data.code==500){ wx.showToast({ title:'手机号不存在', duration: 2000//持续的时间 }) } if(res.data.code==501){ wx.showToast({ title:'验证码错误', duration: 2000//持续的时间 }) } } }) }, })
laravel：路由：
//验证码发送 Route::post('send','admin\PhoneController@send'); //手机号登录 Route::post('login','admin\PhoneController@login');
laravel ：控制器代码：
<?php namespace App\Http\Controllers\admin; use App\Http\Controllers\Controller; use App\Http\Controllers\Models\Exam; use Illuminate\Http\Request; use Illuminate\Support\Facades\Cache; class PhoneController extends Controller { // public function send(Request $request) { $phone = $request->post('phone'); try { $request->validate([ 'phone' => 'required' ]); } catch (\Exception $e) { return ['code' => 400, 'meg' => '手机号码不可以为空', 'data' => '']; } if (Cache::store('file')->has('code_' . $phone)) { return ['code' => 401, 'meg' => '请求太过于频繁', 'data' => '']; }; $code = rand(1000, 9999); $statusStr = array( "0" => "短信发送成功", "-1" => "参数不全", "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！", "30" => "密码错误", "40" => "账号不存在", "41" => "余额不足", "42" => "帐户已过期", "43" => "IP地址限制", "50" => "内容含有敏感词" ); $smsapi = "http://api.smsbao.com/"; $user = "13610663855"; //短信平台帐号 $pass = md5("191273214"); //短信平台密码 $content = "【好乐迪】您的验证码为" . $code . "，在20分钟内有效";//要发送的短信内容 $sendurl = $smsapi . "sms?u=" . $user . "&p=" . $pass . "&m=" . $phone . "&c=" . urlencode($content); $result = file_get_contents($sendurl); if ($result == 0) { Cache::store('file')->put('code_' . $phone, $code, 60); return ['code' => 200, 'meg' => '发送成功', 'data' => $statusStr[$result]]; } return ['code' => 500, 'meg' => '发送失败', 'data' => $statusStr[$result]]; } //用户点击登录的触发点击事件 public function login(Request $request) { $params = $request->post(); $userInfo = \App\Models\Exam::where('phone', $params['phone'])->first(); if (!$userInfo) { return ['code' => 500, 'meg' => '手机号不存在', 'data' => '']; //这里可以跳转至注册页面，在进行登录 } // 取出缓冲的中的手机号 $code = Cache::get('code_' . $params['phone']); // 发送过来的验证码和缓冲里的验证码进行比较， if ($params['code'] != $code) { return ['code' => 501, 'meg' => '验证码错误', 'data' => '']; } return ['code' => 200, 'meg' => '登录成功', 'data' => '']; } }
新建控制器放入发送短信的验证码和登录
新建一个模型用于数据库对比手机号：有就登录，没有就授权或者注册
php artisan make:controller admin/PhoneController
php artisan make:model Models\Exam
模型绑定表
<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Exam extends Model { // protected $table='exam'; public $timestamps=false; }
