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

最新推荐文章于 2024-05-09 16:40:17 发布
最新推荐文章于 2024-05-09 16:40:17 发布
阅读量621 收藏 1
点赞数
文章标签： 小程序 微信小程序 分类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54804804/article/details/121651899
版权

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>

js

// 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 = this
  wx.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 = this
  wx.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.code
          var 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(); //得到token
        return (string)$token;
    }

    public static function verifyToken($token=null){
        //检测是否接收到了token
        if(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;
        }
        //验证通过，返回用户id
        return $token->getClaim('uid');
    }



}

沉默的熊猫仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
小程序基本命令
aiven1637的博客
10-30 3271
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序授权登录和获取手机号功能（详细）
2401_84094620的博客
05-09 849
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
微信小程序使用echarts图表（ec-canvas）
Mr Dear的博客
11-08 1万+
微信小程序使用echarts图表（ec-canvas）
微信小程序ec-canvas（echarts）显示地图【以甘肃省为例】
sjp991012的博客
12-15 2857
微信小程序ec-canvas（echarts）显示地图。下载地图数据、定制图表、微信中使用
微信小程序开发 | 获取用户openid
01-04
学习计划：1, 为便于学习，建议先申请一个属于自己的小程序号，个人认证是不需要费用的； 2, 将视频课程通读一遍，对整个课程框架有一定了解； 3, 根据自己对所学内容的理解，尝试动手还原课程中的代码； 4, 遇到问题时再看对应的章节讲解，这样有效提升学习效果；课程目标：对微信小程序用户openid有更深层的了解，尽可能学会获取openid的方法课程简介：1, 为什么要学习本课程在微信小程序中，许多常用且经典的功能在开发时都需要用到openid这个参数，如果不知道怎么获取openid，这些功能的开发将无从谈起，而这些常用功能也直接决定了我们所开发项目的深度和难度。2, 课程特点流程示意、步骤详细、代码精讲、通俗易懂。3. 主体大纲第一章 课程介绍第二章 获取用户openid第三章 课程总结 3, 配套福利（1）精讲微信小程序用户openid的获取流程；（2）针对课程中的代码问题在线解答；（3）代码源文件下载；（4）课程PPT文件下载；
微信小程序获取手机号授权用户登录功能
08-28
微信小程序获取手机号授权用户登录功能 微信小程序获取手机号授权用户登录功能是微信小程序中一个重要的功能，旨在让用户快速获取微信绑定手机号码，无须用户手动填写。这个功能可以使用户注册用户信息更加便捷，...
python获取微信小程序手机号并绑定遇到的坑
04-24
最近在做小程序开发，在其中也遇到了很多的坑，获取小程序的手机号并绑定就遇到了一个很傻的坑。 流程介绍 官方流程图 小程序使用方法 需要将 <button> 组件 open-type 的值设置为 getPhoneNumber，当用户...
微信小程序前端解密获取手机号
最新发布
06-03
一、微信小程序授权获取手机号流程 1. 用户授权：当用户首次打开微信小程序时，系统会提示用户是否允许小程序获取手机号。用户同意后，微信会生成一个加密的手机号码并存储在本地。 2. 后端请求解密：开发者在前端...
微信小程序用户授权、位置授权及获取微信绑定手机号
10-16
主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序-登录弹窗授权（组件）
12-01
微信授权 --><wx_empower id="wx_empower" show="{{show_empower}}" force="{{true}}" bind:return_login="return_login"></wx_empower>js：1、先判断是否已经登录，未登录直接调用show_empower:true即可弹出登录...
微信小程序获取手机号码解密算法PHP版本
03-20
微信小程序在用户授权后，会将用户的手机号码以加密的形式返回给服务器，为了保护用户隐私，这个加密过程是微信官方实现的。对于开发者来说，我们需要在服务器端使用特定的解密算法来获取到真实的手机号码。这里我们...
微信小程序绑定手机号获取验证码功能
10-16
主要介绍了微信小程序绑定手机号获取验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序后端实现授权登录
11-21
登录与授权 官方文档 一.登录登录流程时序 说明: 调用 wx.login()获取临时登录凭证code，并回传到开发者服务器。 调用code2Session接口，换取用户唯一标识 OpenID和会话密钥 session_key。 之后开发者服务器可以...
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
11-21
这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序有一个获取用户很便捷的api，...
手机号授权登录小程序交互图.png
08-13
微信小程序手机号授权登录，前后端交互图
微信小程序，wx.getLocation()和wx.openLocation() 配合使用进行微信定位功能
qq_57057576的博客
07-20 2119
代码】微信小程序，wx.getLocation()和wx.openLocation()配合使用进行微信定位功能。
微信小程序----wx.openLocation(OBJECT) 使用微信内置地图查看位置
热门推荐
止于至善
06-25 4万+
开发场景 已知地点的经纬度，期望在打开的地图进行标注位置和进行开车、徒步、公交、骑行等的路线规划！ 效果图 实际应用体验 JS Page({ openLocation(){ wx.openLocation({ longitude: Number(this.data.lng), latitude: Number(t...
微信小程序----使用微信内置地图查看位置wx.openLocation(Object object)
吾行远方
07-02 1万+
使用微信内置地图查看位置wx.openLocation(Object object) 1、官方文档 wx.openLocation(Object object)官方文档 2、wxml <!--pages/test/test.wxml--> <text>pages/test/test.wxml</text> <view class="container"&g...
微信小程序获取手机号授权登录
10-14
微信小程序获取手机号授权登录需要用户授权，具体步骤如下： 1. 在小程序中调用 wx.login() 方法获取用户登录凭证 code。 2. 将 code 发送到开发者服务器，使用微信提供的接口换取 session_key 和 openid。 3. 在小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值