【uniapp】微信小程序2024手机号快速验证及无感登录教程(内附代码)

秒速五厘米 2024-04-20 22:24 20阅读 0赞

> 组件：手机号快速验证组件  
> 适用对象：企业/个体  
> 费用：0.03元/次

#### 目录 ####

*  前言
 *  思路
 *  前端
 *  后端代码
 *  无感登录
 *   *  onload事件
     *  无感登录方法
     *  登录判断
     *  后端
     *  mini\_login2
 *  最后

## 前言 ##

最近注册了公司，可以注册具有支付能力的小程序了，各种材料加备案、认证差不多花了一个月的时间，打算接入支付后，接入一个快速注册的组件，给用户带来便捷的操作体验，发现uniapp的文档不多，于是自己踩了坑，本次简单记录一下，方便以后使用回顾

## 思路 ##

手机号快速验证->数据库判断是否有数据->没有则注册；有的话直接登录，并将无感登录的oepnid记录下来，下次用户点击快速注册先通过openid进行查询完成无感登录，节省验证费用开支

## 前端 ##

uniapp建议用下面代码，用微信官方的调用不起来

<button  type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>

方法

> 获取到手机号后存储在本地，手机号进行检测，有记录pass没有则入库

getPhoneNumber(e) {
        
        console.log(e.detail.code) // 动态令牌
        let that = this;
        uni.request({
        
            url: 'https://******/api/mini_getuserphone.php',
            data: {
        
                phonecode: e.detail.code
            },
            method: 'POST',
            header: {
        
                'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
            },
            success: (res) = >{
        
                console.log(res.data.data) if (res.data.code == 100) {
        
                    uni.showToast({
        
                        title: res.data.msg,
                        icon: 'none'
                    });
    
                } else if (res.data.code == 200) {
        
                    //返回数据接收成功
                    uni.showToast({
        
                        title: res.data.msg,
                        icon: 'none'
                    });
                    var errcode = res.data.data['errcode'];
                    if (errcode == 0) {
        
                        //登陆成功
                        var openids = res.data.data['phone_info']['phoneNumber'];
                        //注册事件
                        // 跳转事件
                        uni.setStorageSync('openid', openids);
                        //注册判断携带unionid
                        const unionid = uni.getStorageSync('unionid');
    
                        that.mini_userphoneregidst(openids, unionid);
                        setTimeout(function() {
        
                            // 调用全局MQTT连接函数，进行MQTT连接
                            getApp().check_account_mqtt_connect();
                            uni.switchTab({
        
                                url: '/pages/index/index'
                            });
                        },
                        1200);
    
                    } else {
        
                        uni.showToast({
        
                            title: res.data.data['errmsg'],
                            icon: 'none'
                        });
                    }
    
                }
            }
        })
    
    },

## 后端代码 ##

注意：grant\_type为client\_credential和无感登录获取openid不一样

//mini_getuserphone.php
    <?php
    $phonecode=$_POST['phonecode'];
    
    
    if ($phonecode) {
        
               
                $appid='wxcbf*******dbea';//小程序id
                $secret='87616ba8******c4589bf';//密钥
                $url="https://api.weixin.qq.com/cgi-bin/token?appid=$appid&secret=$secret&grant_type=client_credential";
                 $header = array(
           'Accept: application/json',
        );
        $curl = curl_init();
        //设置抓取的url
        curl_setopt($curl, CURLOPT_URL, $url);
        //设置头文件的信息作为数据流输出
        curl_setopt($curl, CURLOPT_HEADER, 0);
        // 超时设置,以秒为单位
        curl_setopt($curl, CURLOPT_TIMEOUT, 1);
     
        // 超时设置，以毫秒为单位
        // curl_setopt($curl, CURLOPT_TIMEOUT_MS, 500);
     
        // 设置请求头
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        //设置获取的信息以文件流的形式返回，而不是直接输出。
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        //执行命令
        $data = curl_exec($curl);
     
        // 显示错误信息
        if (curl_error($curl)) {
        
            print "Error: " . curl_error($curl);
              die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '请求出错！'
            ),480));
        } else {
        
            // 打印返回的内容
            $result=json_decode($data,true);
            if (array_key_exists("errcode",$result))
              {
        
            //   echo "键存在！";
           
             die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '获取token失败！'.$result['errmsg']
            ),480));
            
              }
            else
              {
        
          //token获取成功 继续获取手机号
          $access_token=$result['access_token'];
          curl_close($curl);
          
          
        //   请求新的连接
    $url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" . $access_token;
    
    $data = array('code' => $phonecode); // 请确保$code变量已经定义
    
    $options = array(
        'http' => array(
            'header' => "Content-Type: application/json\r\n",
            'method' => 'POST',
            'content' => json_encode($data)
        )
    );
    
    $context = stream_context_create($options);
    $response = file_get_contents($url, false, $context);
    
    $result = json_decode($response, true);
    
              
    
            
        //   请求新的连接
        
             die(
            json_encode(
                array(
                'code' => 200,
                'data' => $result,
                'msg' => ''
            ),480));
              }
              
        }
    
    
              
    } 
    else {
        
                // 已被处理或者不存在 请求重新登陆
                die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '非法操作'
            ),480)
    );
            }
    curl_close($curl);

## 无感登录 ##

一键登录成功后，将openid记录到数据库，用户在点击收取按登陆前进行调用判断，可以省去一笔开支

### onload事件 ###

onShow() {
        
    	// #ifdef MP-WEIXIN
    	//小程序登录检测
    	this.mini_login()
    	// #endif
    
    },

### 无感登录方法 ###

mini_login() {
        
    	let that = this;
    
    	uni.login({
        
    		provider: 'weixin',
    		success: loginRes => {
        
    			console.log(loginRes);
    			that.code = loginRes.code;
    			// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
    			uni.request({
        
    				url: 'https://dcloud.taila.club/api/mini_login2.php', //仅为示例，并非真实接口地址。
    				data: {
        
    					code: loginRes.code
    				},
    				method: 'POST',
    				header: {
        
    					'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
    				},
    				success: (res) => {
        
    					console.log(res.data);
    
    					uni.hideLoading()
    					if (res.data.code == 200) {
        
    						//存取session
    						uni.setStorageSync('unionid', res.data.data.openid);
    						uni.showToast({
        
    							title: res.data.msg,
    							icon: 'none'
    						});
    
    
    						//判断逻辑
    						that.pd_login(res.data.data.openid);
    
    
    					} else {
        
    						uni.showToast({
        
    							title: res.data.msg,
    							icon: 'none'
    						})
    					}
    
    
    				}
    			});
    
    
    		},
    		fail: () => {
        
    			uni.showToast({
        
    				title: '获取 code 失败',
    				icon: 'none'
    			});
    		}
    	});
    
    },

### 登录判断 ###

pd_login(unionid) {
        
    	let that = this;
    	uni.request({
        
    		url: 'https://******/mini_login_check.php',
    		data: {
        
    			unionid: unionid
    		},
    		method: 'POST',
    		header: {
        
    			'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
    		},
    		success: (res) => {
        
    			console.log(res.data)
    			if (res.data.code == 201) {
        
    				//unionid在数据库没有记录 记录就可以不需要操作
    				console.log('unionid在数据库没有记录 记录就可以不需要操作')
    			} else if (res.data.code == 200) {
        
    				var openids = res.data.data;
    				uni.showModal({
        
    					title: '提示',
    					content: '检测到该账户已授权是否直接登录？',
    					success: function(res) {
        
    						if (res.confirm) {
        
    							//登陆成功 由于之前开发问题openid就是手机号、账号 ||unionid才是真真的openid
    							uni.setStorageSync('openid', openids);
    							uni.setStorageSync('unionid', unionid);
    							// 调用全局MQTT连接函数，进行MQTT连接
    							getApp()
    								.check_account_mqtt_connect();
    							uni.switchTab({
        
    								url: '/pages/my/my'
    							});
    						} else if (res.cancel) {
        
    							console.log('用户点击取消');
    						}
    					}
    				});
    			}
    		}
    	})
    },

### 后端 ###

<?php
    include 'conn.php';
    header("Content-type:text/html;charset=utf-8");//字符编码设置
    if (!$_POST) {
        
       die(
            json_encode(
                array(
                'code' => 400,
                'msg' => '缺少参数'
            ),480)
    );
    } 
    
    $unionid=$_POST['unionid'];
    $sql="SELECT * FROM `user` WHERE `UnionID` = '$unionid'";
    // 执行查询
    $result = $conn->query($sql);
    
    
    if ($roows=mysqli_fetch_assoc($result)) {
        
      //success
       // 查到数据直接返回手机号进行登录
     echo json_encode(array('code' => 200, 'msg' => '登陆成功', 'data' => $roows['openid']));
     
    } else {
        
      //fail
      // 查不到数据
    echo json_encode(array('code' => 201, 'msg' => '尚未注册', 'data' => ''));
    }

### mini\_login2 ###

<?php
    $code=$_POST['code'];
    if ($code) {
        
               
                $appid='wx*****a';//小程序id
                $secret='876*********89bf';//密钥
                $url="https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
                 $header = array(
           'Accept: application/json',
        );
        $curl = curl_init();
        //设置抓取的url
        curl_setopt($curl, CURLOPT_URL, $url);
        //设置头文件的信息作为数据流输出
        curl_setopt($curl, CURLOPT_HEADER, 0);
        // 超时设置,以秒为单位
        curl_setopt($curl, CURLOPT_TIMEOUT, 1);
     
        // 超时设置，以毫秒为单位
        // curl_setopt($curl, CURLOPT_TIMEOUT_MS, 500);
     
        // 设置请求头
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        //设置获取的信息以文件流的形式返回，而不是直接输出。
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        //执行命令
        $data = curl_exec($curl);
     
        // 显示错误信息
        if (curl_error($curl)) {
        
            print "Error: " . curl_error($curl);
              die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '请求出错！'
            ),480));
        } else {
        
            // 打印返回的内容
            $result=json_decode($data,true);
            if (array_key_exists("errcode",$result))
              {
        
            //   echo "键存在！";
           
             die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '获取token失败！'.$result['errmsg']
            ),480));
            
              }
            else
              {
        
            //   echo "键不存在！";
                  // 开启redius
           
             //写入redius session_key名命的openid数据 默认存储2天
            curl_close($curl);
             die(
            json_encode(
                array(
                'code' => 200,
                'data' => $result,
                'msg' => '获取token成功'
            ),480));
              }
              
        }
    
    
              
    } 
    else {
        
                // 已被处理或者不存在 请求重新登陆
                die(
            json_encode(
                array(
                'code' => 100,
                'data' => '',
                'msg' => '非法操作'
            ),480)
    );
            }

## 最后 ##

[《记一次云之家签到抓包》][Link 1]  
[《记一次视频抓包m3u8解密过程》][m3u8]  
[《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》][_ _httpcanary_vmos]  
[《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》][Python_HTTP_IP]  
[《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》][_app_VirtualXposed]

推荐专栏：

[《Python爬虫脚本项目实战》][Python]

该专栏往期文章：  
[《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》][Python_Chatgpt3.5_Authorization]

?如果感觉看完文章还不过瘾，欢迎查看我的其它专栏  
?作者对python有很大的兴趣，完成过很多独立的项目：例如滇医通等等脚本，但是由于版权的原因下架了，爬虫这一类审核比较严谨，稍有不慎就侵权违规了，所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦[《Python爬虫脚本项目实战》][Python]，如果你有项目欢迎联系我，我会同步教程到本专栏！

[?**Python爬虫项目实战系列文章**][Python 1]！！  
⭐⭐欢迎订阅⭐⭐

[`【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）`][Python_Chatgpt3.5_Authorization 1]  
[`【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口`][Python_Chatgpt_-]

⭐⭐欢迎订阅⭐⭐  
![在这里插入图片描述][818388c859c04a719ff9c282527b08e6.png]

**[Python爬虫脚本项目实战][Python 2]**  
![在这里插入图片描述][508ce3f3ee894fa7b33136db7bbecc7a.png]

[Link 1]: https://blog.csdn.net/qq_35230125/article/details/113903423
[m3u8]: https://blog.csdn.net/qq_35230125/article/details/121647199
[_ _httpcanary_vmos]: https://blog.csdn.net/qq_35230125/article/details/121696563
[Python_HTTP_IP]: https://blog.csdn.net/qq_35230125/article/details/122890424
[_app_VirtualXposed]: https://blog.csdn.net/qq_35230125/article/details/121643395
[Python]: http://t.csdn.cn/gGn4P
[Python_Chatgpt3.5_Authorization]: https://blog.csdn.net/qq_35230125/article/details/130199605
[Python 1]: http://t.csdn.cn/iv7Xl
[Python_Chatgpt3.5_Authorization 1]: https://taila.blog.csdn.net/article/details/130199605
[Python_Chatgpt_-]: https://taila.blog.csdn.net/article/details/130240841
[818388c859c04a719ff9c282527b08e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ea6c05fadc384c23ac1fa1c06f60de99.png
[Python 2]: http://t.csdn.cn/aUa9g
[508ce3f3ee894fa7b33136db7bbecc7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f4bdb342cac9463182262afdb5b8ea4f.png