【uniapp】微信小程序2024手机号快速验证及无感登录教程(内附代码)
【uniapp】微信小程序2024手机号快速验证及无感登录教程(内附代码)
德宏大魔王
发布于 2024-05-25 12:29:14
发布于 2024-05-25 12:29:14
目录
- 前言
- 思路
- 前端
- 后端代码
- 无感登录
- onload事件
- 无感登录方法
- 登录判断
- 后端
- mini_login2
- 最后
前言
最近注册了公司，可以注册具有支付能力的小程序了，各种材料加备案、认证差不多花了一个月的时间，打算接入支付后，接入一个快速注册的组件，给用户带来便捷的操作体验，发现uniapp的文档不多，于是自己踩了坑，本次简单记录一下，方便以后使用回顾
思路
手机号快速验证->数据库判断是否有数据->没有则注册；有的话直接登录，并将无感登录的oepnid记录下来，下次用户点击快速注册先通过openid进行查询完成无感登录，节省验证费用开支
前端
uniapp建议用下面代码，用微信官方的调用不起来
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>
<!-- #endif -->方法
获取到手机号后存储在本地，手机号进行检测，有记录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)
);
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-04-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
