前言 之前做了微信登錄,所以總結一下微信授權登錄並獲取用戶信息這個功能的開發流程。 配置 1.首先得在微信公眾平臺申請一下微信小程式賬號並獲取到小程式的AppID和AppSecret https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2F ...
前言
之前做了微信登錄,所以總結一下微信授權登錄並獲取用戶信息這個功能的開發流程。
配置
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
})
}
})
}