第微信小程序獲取用戶手機號碼的詳細步驟目錄前言接下來我們通過服務(wù)器獲取授權(quán)deciphering解密方法總結(jié)

前言

我們在做小程序開發(fā)的過程中，經(jīng)常會涉及到用戶身份的問題，最普遍的就是我們要獲取用戶的手機號碼，通過微信獲取手機號碼后可以減少很多操作，比如用戶手機號碼驗證等，我們還可以給用戶發(fā)送提示短信，那么本文主要講解如何獲取用戶手機號碼。

獲取用戶手機號碼分為以下幾步：

第一點擊頁面獲取授權(quán)按鈕

第二獲取用戶授權(quán)參數(shù)

第三根據(jù)加解密算法解密手機號碼

接下來我們來實現(xiàn)以上三步

先看前端頁面

!--index.wxml--

view

view

buttontype="primary"open-type="getUserInfo"lang="zh_CN"

bindgetuserinfo="getUserProfile"bindtap="getUserProfile"獲取用戶信息/button

buttonopen-type="getPhoneNumber"type="primary"

bindgetphonenumber="onGetPhoneNumber"獲取手機號碼/button

view

block

viewbindtap="bindViewTap"

imagetype="userAvatarUrl"src="{{userInfo.avatarUrl}}"mode="cover"/image

/view

Text{{userInfo.nickName}}/Text

text{{userInfo.phone}}/text

textwx:if="{{userInfo.gender==0}}"男/text

textwx:if="{{userInfo.gender==1}}"女/text

pickerbindchange="bindPickerLingyuChange"value="{{index}}"range="{{array}}"

viewwx:if="{{showLingyu==true}}"選擇職業(yè)/view

text{{array[index]}}/text

/picker

pickerbindchange="bindPickerAearaChange"value="{{i}}"range="{{items}}"range-key="name"

viewwx:if="{{showAeara==true}}"選擇地區(qū)/view

text{{items[i].name}}/text

/picker

buttontype="primary"bindtap="bindViewTap"注冊/button

/block

/view

/view

/view

大概長這樣

獲取用戶頭像的我就直接略過了，網(wǎng)上資料也比較多

接下來我們看關(guān)鍵代碼

此處定義

getPhoneNumber是微信官方要求，獲取用戶手機號碼授權(quán)

onGetPhoneNumber是回調(diào)函數(shù)，獲取授權(quán)后會回調(diào)到該方法，也就是獲取的電話號碼就在這個函數(shù)的返回值里面。當(dāng)然這個函數(shù)是自定義的，名字大家可以隨便起，上面的getPhoneNumber可不能隨便修改。

接下來我們通過服務(wù)器獲取授權(quán)

上代碼：這里是js調(diào)用我們自己的后臺，我們的后臺再調(diào)用微信服務(wù)端

onGetPhoneNumber(e){

varthat=this;

wx.login({

success(res){

if(res.code){

console.log('步驟2獲檢查用戶登錄狀態(tài)，獲取用戶電話號碼！',res)

wx.request({

url:'這里寫自己的獲取授權(quán)的服務(wù)器地址',

data:{code:res.code},

header:{'content-type':'application/json'},

success:function(res){

console.log("步驟三獲取授權(quán)碼，獲取授權(quán)openid，session_key",res);

varuserphone=res.data.data;

wx.setStorageSync('userphoneKey',userphone);

//解密手機號

varmsg=e.detail.errMsg;

varsessionID=wx.getStorageSync("userphoneKey").session_key;

varencryptedData=e.detail.encryptedData;

variv=e.detail.iv;

if(msg=='getPhoneNumber:ok'){//這里表示獲取授權(quán)成功

wx.checkSession({

success:function(){

//這里進行請求服務(wù)端解密手機號

that.deciyption(sessionID,encryptedData,iv);

fail:function(){

//that.userlogin()

},fail:function(res){

console.log("fail",res);

}else{

console.log('登錄失??！'+res.errMsg)

})

后臺調(diào)用微信獲取授權(quán)碼

下面是我通過自己寫的框架調(diào)用的，不用關(guān)心注解內(nèi)容，大家只關(guān)注自己的框架注解即可，不管是spring還是servlet只要請求能進到該方法即可，所以重點關(guān)注中間部分，把參數(shù)值傳正確即可

/**

*回調(diào)微信登錄信息

*@paramrequest

*@paramresponse

@MethodAnnotation(method="miniGetAuth",methoddes="小程序授權(quán)",methodWay="ALL")

publicvoidminiGetAuth(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{

Stringurl="/sns/jscode2sessionappid=APPIDsecret=SECRETjs_code=JSCODEgrant_type=authorization_code";

Stringcode=request.getParameter("code");

if(empty(code))return;

url=url.replaceAll("APPID",PropertiesUtil.wx_appid)

.replaceAll("SECRET",PropertiesUtil.wx_appsecret)

.replaceAll("JSCODE",code);

qury(request,response,WeixinUtil.doGetStr(url),false,0);

}

下面是工具類方法WeixinUtil.doGetStr(url)

*get請求

*@paramurl

*@return

*@throwsParseException

*@throwsIOException

publicstaticJSONObjectdoGetStr(Stringurl)throwsParseException,IOException{

DefaultHttpClientclient=newDefaultHttpClient();

HttpGethttpGet=newHttpGet(url);

JSONObjectjsonObject=null;

HttpResponsehttpResponse=client.execute(httpGet);

HttpEntityentity=httpResponse.getEntity();

if(entity!=null){

Stringresult=EntityUtils.toString(entity,"UTF-8");

jsonObject=JSONObject.fromObject(result);

returnjsonObject;

}

這個值可以返回給前端，前端可以收到如下參數(shù)

接著我們通過授權(quán)之后，獲取第三個參數(shù)iv，調(diào)用下面方法進行服務(wù)端解密

that.deciyption(sessionID,encryptedData,iv);

deciyption(sessionID,encryptedData,iv){

varthat=this;

console.log("步驟4根據(jù)秘鑰解密手機號碼sessionID：",sessionID);

wx.request({

url:'解密地址',

data:{

sessionID:sessionID,

encryptedData:encryptedData,

iv:iv

header:{'content-type':'application/json'},

success:function(res){

console.log("79",(res.data.code==20001));

if(res.data.code==20001){//這里不用管，可以刪掉，我的框架里返回值20001是授權(quán)失敗，可按照自己邏輯處理

console.log("獲取失敗，重新獲取",res);

that.setData({

showPhone:true,

}else{

console.log("line79",JSON.parse(res.data.data));

varjson=JSON.parse(res.data.data);

wx.setStorageSync('userphone',JSON.parse(res.data.data).phoneNumber);

console.log("步驟5解密成功",res.data.data);

that.setData({

showPhone:false,

"userInfo.phone":wx.getStorageSync('userphone')

},fail:function(res){

console.log("fail",res);

}

服務(wù)端解密代碼

/**

*@paramrequest

*@paramresponse

*@throwsException

@MethodAnnotation(method="miniGetPhone",methoddes="小程序解密手機號",methodWay="ALL")

publicvoidminiGetPhone(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{

Stringencrypdata=request.getParameter("encryptedData");

Stringivdata=request.getParameter("iv");

Stringsessionkey=request.getParameter("sessionID");

if(empty(encrypdata,ivdata,sessionkey))return;

qury(request,response,deciphering(encrypdata,ivdata,sessionkey),false,0);

}

deciphering解密方法

publicstaticStringdeciphering(Stringencrypdata,Stringivdata,Stringsessionkey){

byte[]encrypData=Base64.decode(encrypdata);

byte[]ivData=Base64.decode(ivdata);

byte[]sessio