uniapp+thinkphp5實現微信登入

我恨bug發表於2024-07-01
APPPHP

前言

之前做了微信登入，所以總結一下微信授權登入並獲取使用者資訊這個功能的開發流程。

配置

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

相關文章