uniapp+thinkphp5实现微信登录

前言

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

配置

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
			})
		}
	})
}