uniapp+thinkphp5实现微信登录

uniapp,thinkphp5 · 浏览次数 : 0

小编点评

微信登录并获取用户信息功能的开发流程可以归纳为以下几个步骤: 1. 注册微信小程序账号并获取AppID与AppSecret。 - 访问微信公众平台官网(https://mp.weixin.qq.com/)进行小程序账号注册。 - 获得AppID与AppSecret后,进行后续开发。 2. 配置微信小程序项目。 - 在主目录下的manifest.json文件中进行微信小程序配置,填写AppID。 3. 实现登录流程。 - 使用`wx.checkSession`校验登录态。 - 通过`wx.login()`获取用户的授权临时票据`code`。 - 使用`getphonenumber()`接口获取用户的`encryptedData`与`iv`。 - 通过`https://api.weixin.qq.com/sns/jscode2session`接口获取`session_key`与`openid`。 - 使用`openssl_decrypt()`函数解密用户手机号信息。 4. 后端处理。 - 编写PHP代码,接收前端传递的`code`、`encryptedData`与`iv`。 - 调用微信API接口获取`session_key`与`openid`。 - 解密用户手机号信息,并与数据库进行比对。 - 根据比对结果判断用户是否已注册。 5. 前端实现。 - 使用Vue.js框架,通过`wx.login()`实现登录功能。 - 监听`getphonenumber`事件,调用后端API获取用户信息。 - 处理获取到的用户信息,如将用户昵称、头像等保存至本地缓存或数据库。 6. 安全性考虑。 - 在整个登录流程中,确保用户信息的安全性,避免敏感信息泄露。 - 遵守微信官方文档中的相关规定,尊重用户隐私。 通过以上步骤,可以实现微信登录并获取用户信息的功能。在实际开发中,还需根据具体业务需求进行调整和完善。

正文

前言

之前做了微信登录,所以总结一下微信授权登录并获取用户信息这个功能的开发流程。

配置

1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecret
https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2Fwacodepage%2Fgetcodepage%3Ftoken%3D418035161%26lang%3Dzh_CN

2.申请认证,企业认证300/年,个人好像是30/年,得认证,不然没有微信登录的权限。

3.配置前端uniapp的项目,在主目录下找到manifest.json文件->微信小程序配置->将你的小程序的AppID填写上去

到此基本配置就已经完毕。

登录流程

1.在实现登录之前,首先得了解登录的流程,这是微信登录的时序图

2.具体步骤为:
①小程序 wx.checkSession 校验登陆态,success :接口调用成功,session_key未过期;fail :接口调用失败,session_key已过期;

②因为微信公众平台发布了《关于小程序收集用户手机号行为的规范》中提到部分开发者在处理用户手机号过程中,存在不规范收集行为,影响了用户的正常使用体验,所以平台在向用户申请获取手机号时应明确向用户说明收集的必要原因,并提供用户隐私协议由用户主动同意;所以登录通过需通过@getphonenumber获取用户的encryptedData、iv,再通过wx.login获取用户的授权临时票据code参数;

③.服务端接收到参数后随即通过请求Appid + appSecret + code 到微信方服务器 https://api.weixin.qq.com/sns/jscode2session 获取 session_key & openid;

④.获取到openid&&session_key后随机根据getphonenumber获取到的encryptedData、iv对用户的手机号码进行解密;

流程实现(后端)(PHP)

public function login()
    {
        $code = input('code');
        $encryptedData = input('mobileEncryptedData');
        $iv = input('mobileIv');
        if ($code) {
            $appID = 'wxa***************'; //微信公众平台->小程序AppID
            $appSecret = '****************';//微信公众平台->小程序AppSecret
            // 使用 code 换取 session_key 和 openid
            $url = "https://api.weixin.qq.com/sns/jscode2session?appid={$appID}&secret={$appSecret}&js_code={$code}&grant_type=authorization_code";
            $result = file_get_contents($url);
            $data = json_decode($result, true);
            // 获取用户openid&&session_key成功
            if(isset($data['openid'])){
                // 解密用户手机信息
                $aesKey=base64_decode($data['session_key']);
                $aesIV=base64_decode($iv);
                $aesCipher=base64_decode($encryptedData);
                $result2=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
                // 用户电话号码 $userPhone['phoneNumber']
                $userPhone=json_decode( $result2, true);
                
                $phone=$userPhone['phoneNumber'];
                $business=$this->BusinessModel->where('mobile',$phone)->find();
                if($business){
                    // 已注册
                }else{
                    // 未注册
                }
            }else{
                $this->result([],'0','登录失败!','json');
            }
        } else {
            return "缺少 code 参数";
        }
    }

流程实现(前端)(Vue)(uniapp)

//html
<button class="wx_login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
	手机号快捷登录
</button>

//js
getPhoneNumber(e) {
	wx.login({
	success: (res) => {
		this.userInfo.code = res.code
		this.userInfo.mobileEncryptedData = e.detail.encryptedData
		this.userInfo.mobileIv = e.detail.iv
		this.login()
	},
	fail() {
		this.m_Toast('获取code失败')
		}
	})
}
login() {
    this.$api.user.wx_login(this.userInfo).then(res => {
		if (res.code == 1) {
			uni.setStorageSync('userInfo', res.data);
				uni.showToast({
					title: res.msg,
					icon: 'success',
					duration: 1000
				})
				//其他处理

		} else {
			 uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 1500
			})
		}
	})
}

与uniapp+thinkphp5实现微信登录相似的内容:

uniapp+thinkphp5实现微信登录

前言 之前做了微信登录,所以总结一下微信授权登录并获取用户信息这个功能的开发流程。 配置 1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecret https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2F

【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯

之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛,就离不开通讯了,然后我就想到了长连接。这里本人用的是GatewayWorker框架。

uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS。 uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件 uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。 如下图:

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目,支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混

Uniapp 获取当前版本号

plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) { oldversion = wgtinfo.versionCode //通过该方法才可以获取到versionCode });

uniapp微信小程序转支付宝小程序踩坑(持续更新)

首先第一个,真有被折磨到! // 微信正常使用,支付宝不行 // 以下两种 微信、支付宝都正常使用

uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总

以下是必须肯定会用到的官方地址 腾讯地图API开发文档:微信小程序JavaScript SDK | 腾讯位置服务 (qq.com) 高德地图API开发文档:开发 | 高德地图API (amap.com) 高德地图小程序配置指南:入门指南-微信小程序插件|高德地图API (amap.com) 小程序后

从 Wepy 到 UniApp 变形记

本文主要讲述了如何将 wepy 框架的小程序项目一键转换为 uni-app 框架代码,详细讲解了方案的实现思路和具体实现方法。

构建基于Java Spring Boot和Uniapp的心理小程序:从零到一的完整指南

构建基于Java Spring Boot和Uniapp的心理小程序:从零到一的完整指南 前言 大家好,今天我们来聊聊如何使用Java Spring Boot和Uniapp构建一个心理小程序。这个项目不仅能帮助你提升技术水平,还能为用户提供心理健康支持。我们将从项目的整体架构开始,逐步深入到具体的代码