微信小程序手机号+授权登录

wxml页面

<view class="input-container"><view class="input-button-container row-center"><view class="input-hint">手机号</view><input class="input flex1" model:value="{{ phoneNumber }}"  type="number" maxlength="11" placeholder="请输入手机号" bindinput="inputChange" bindblur="phone" /></view><view class="divider"></view><view class="input-button-container row-center"><view class="input-hint">短信验证码</view><input class="input flex1" model:value="{{ messageCode }}" type="number" maxlength="6" placeholder="请输入验证码"bindinput="inputChange" bindblur="codePhone" /><view class="code-button" bindtap="sendMessage">{{waitingCode?waiteTime:'发送验证码'}}{{waitingCode?'s':''}}</view></view><view class="divider"></view>
</view><button class="login-button" disabled="{{!confirmable}}"style="background:{{confirmable?'#0B7BFBFF':'#D8D8D8'}};color:white"bindtap="onConfirm">确认</button><button bindtap="login">微信授权登录</button>

// pages/login/login.js
Page({/*** 页面的初始数据*/data: {//按钮是否可用confirmable: false,//发送短信等待中waitingCode: false,waiteTime: 0,interval: -1, //计时器phoneNumber: "",messageCode: "",nickName:'',avatarUrl:''// phone:'',// codephone:''},// phone(e){//   var phone=e.detail.value//   this.setData({//     phone:phone//   })// },// codePhone(e){//   var codephone=e.detail.value//   this.setData({//     codephone:codephone//   })// },inputChange() {this.setData({confirmable: !this.isEmpty(this.data.phoneNumber) && !this.isEmpty(this.data.messageCode)})
},isEmpty(obj) {if (typeof obj == "undefined" || obj == null || obj == "") {return true;} else {return false;}
},
sendMessage() {var url=getApp().globalData.url;var url=url+"api/codephone"//正在等待if(this.data.waitingCode) {return}if (this.data.phoneNumber == '') {wx.showToast({title: '请先填写手机号',})return}wx.showLoading({title: '正在发送短信',})let that = thiswx.request({url: url,data: {mobile: this.data.phoneNumber,},success: function(res) {console.log(res)wx.hideLoading()wx.showToast({title: '发送短信成功',})that.setData({waitingCode: true,waiteTime: 60,//设置倒计时60秒，每秒触发一次，拿到interval用于关闭interval: setInterval(function (res) {if (that.data.waiteTime > 0) {that.setData({waiteTime: --that.data.waiteTime})} else {//注意关闭定时器that.clearMessage()that.setData({waitingCode: false,waiteTime: 0})}}, 1000)})}})
},//关闭定时器
clearMessage() {clearInterval(this.data.interval)this.setData({waitingCode: false,waiteTime: 0,interval: -1})
},onConfirm(e) {var url=getApp().globalData.url;var url=url+"api/matephone"let that = thiswx.request({url: url,data: {mobile: this.data.phoneNumber,code: this.data.messageCode},success: function(res) {console.log(res)if(res.data.code==0){wx.showToast({title: res.data.msg,icon:"none"})wx.switchTab({url: '/pages/lists/lists',})}if(res.data.code==1){wx.showToast({title: res.data.msg,icon:"none"})}}})
},login(){wx.getUserProfile({desc:"获取当前页面信息",success:function(e){console.log(e)var avatarUrl=e.userInfo.avatarUrl;var nickName=e.userInfo.nickName;var gender=e.userInfo.gender;wx.login({success:function(res){var codes=res.codevar url=getApp().globalData.url;var url=url+"api/impowerlogin";wx.request({url: url,data:{avatarUrl,nickName,gender,codes},method:"POST",header:{'content-type':'application/x-www-form-urlencoded'},success:function(e){var token=e.data.data;wx.setStorageSync('token', token)}})}})}})
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

控制器方法手机号验证码+60秒倒计时

    */public function CodePhone(Request $request){if (time()-Cache::get('time')<60){return  json_encode(['code'=>1,'msg'=>'1分钟之内不能重复发送验证码']);}$phones=$request->get('mobile');$statusStr = array("0" => "短信发送成功","-1" => "参数不全","-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！","30" => "密码错误","40" => "账号不存在","41" => "余额不足","42" => "帐户已过期","43" => "IP地址限制","50" => "内容含有敏感词");$smsapi = "http://api.smsbao.com/";$user = "*****"; //短信平台帐号$pass = md5("****"); //短信平台密码$rand=rand(1000,9999);$time=time();Cache::put('time',$time);Cache::put('code',$rand);$content = "测试验证码".$rand;//要发送的短信内容$phone = "$phones";//要发送短信的手机号码$sendurl = $smsapi . "sms?u=" . $user . "&p=" . $pass . "&m=" . $phone . "&c=" . urlencode($content);$result = file_get_contents($sendurl);if (!$result){return json_encode(['code'=>1,'msg'=>$statusStr[$result]]);}return  json_encode(['code'=>0,'msg'=>'发送成功']);}/*** 匹配手机号和验证码是否相等* @param Request $request* @return false|\Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector|string*/public function matePhone(Request $request){$data=$request->all();$validator = Validator::make($data, ['code' => 'required','mobile' => 'required',]);if ($validator->fails()) {return redirect('post/create')->withErrors($validator)->withInput();}$matePhone=CodePhone::matePhone($data['mobile']);if (!$matePhone){return  json_encode(['code'=>1,'msg'=>'手机号错误或不存在']);}if ($data['code']!=Cache::get('code')){return  json_encode(['code'=>1,'msg'=>'验证码错误']);}return  json_encode(['code'=>0,'msg'=>'登录成功']);}

控制器小程序授权登录

/*** 微信授权登录* @param Request $request* @return false|\Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector|string*/public function impowerLogin(Request $request){$data=$request->all();$validator = Validator::make($data, ['codes' => 'required','avatarUrl' => 'required','nickName' => 'required','gender' => 'required',]);if ($validator->fails()) {return redirect('post/create')->withErrors($validator)->withInput();}$url="https://api.weixin.qq.com/sns/jscode2session?appid=wx053ae920bf4b2a00&secret=c55bd9edf5b61292defc1d6e53695f74&js_code=".$data['codes']."&grant_type=authorization_code";$res=Common::geturl($url);$arr=['openid'=>$res['openid'],'nickname'=>$data['nickName'],'avatarurl'=>$data['avatarUrl'],'gender'=>$data['gender'],'session_key'=>$res['session_key'],];$openid=CodePhone::where('openid',$arr['openid'])->first();$token=Common::createToken($openid['id']);if ($openid){$update=CodePhone::where('openid',$arr['openid'])->update(['session_key'=>$arr['session_key']]);if ($update){return  json_encode(['code'=>0,'msg'=>'已有账户，欢迎再次登录','data'=>$token]);}}else{$res=CodePhone::create($arr);if ($res){return  json_encode(['code'=>0,'msg'=>'登录成功','data'=>$data]);}}}

解析code码拿到session_key，openid

<?php
namespace App\Common;use Lcobucci\JWT\Builder;
use Lcobucci\JWT\Parser;
use Lcobucci\JWT\Signer\Hmac\Sha256;
use Lcobucci\JWT\ValidationData;class Common
{/*** 解析code* 得到session_key，openid* @param $url* @return mixed*/public static function geturl($url){$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($ch);curl_close($ch);$output = json_decode($output,true);return $output;}public static function createToken($uid = null){$signer = new Sha256();//加密规则$time = time();//当前时间$token = (new Builder())->issuedBy('teacher')//签发人->canOnlyBeUsedBy('student')//接收人->identifiedBy('MarsLei', true) //标题id->issuedAt($time)//发出令牌的时间->canOnlyBeUsedAfter($time) //生效时间(即时生效)->expiresAt($time + 3600) //过期时间->with('uid', $uid) //用户id->sign($signer, 'my') //签名->getToken(); //得到tokenreturn (string)$token;}public static function verifyToken($token=null){//检测是否接收到了tokenif(empty($token)){return 0;}//转化为可以验证的token$token = (new Parser())->parse((string) $token);//验证基本设置$data = new ValidationData();$data->setIssuer('teacher');$data->setAudience('student');$data->setId('MarsLei');if(!$token->validate($data)){return 0;}//验证签名$signer = new Sha256();if(!$token->verify($signer, 'my')){return 0;}//验证通过，返回用户idreturn $token->getClaim('uid');}}

微信小程序手机号+授权登录相关推荐

微信小程序手机号授权登录
文章目录小程序端服务端注意事项微信小程序,手机号授权登录需求. 大体流程是这样的: 小程序端使用 getPhoneNumber 向微信平台获取授权通过微信授权后,小程序端接收微信授权后的回调 ...
微信小程序之授权登录
微信小程序之授权登录之前微信授权登录时是直接可以通过getUserInfo接口弹出授权弹窗.由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通 ...
微信登录后台 java_Java 后端（Spring boot）+微信小程序的授权登录
微信小程序的授权登录第一.Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...
微信小程序之授权登录--项目需要
1.由于项目需要,需要实现自己的微信小程序用微信授权登录. 2.参考此项目https://blog.csdn.net/weidong_y/article/details/79636386 3.其中的 ...
企业微信小程序_授权登录接口获取用户userid
文章目录一.前置知识 1. 阅读企业微信小程序开发文档 2. 企业微信小程序登录流程 3. 微信小程序区别二.前端部分 2.1. 调用登录接口 2.2. 请求后端接口 2.3. 项目源码三.后 ...
微信小程序的授权登录功能
注意:首先微信小程序是不能一进入小程序就让用户授权登录的,一进入小程序就让用户授权登录,是审核不通过的: 图一的这个提示框是我自己写的:要想弹出微信的微信授权提示框,必须用一个按钮来触发,可用授权登录 ...
【Springboot】整合wxjava实现微信小程序：授权登录
文章目录一.wxjava是什么二.使用步骤 1.引入依赖 2.配置yml 3.小程序的配置 4.后端的业务逻辑代码 controller service impl dto 5.前端的业务逻辑代码 ...

微信小程序手机号+授权登录

微信小程序手机号+授权登录相关推荐

最新文章

热门文章