微信小程序 獲取手機號 JavaScript解密示例代碼詳解
當我們在開發(fā)微信小程序中，有一個常用的功能，就是獲取用戶的手機號，然后一鍵登入小程序，那么手機號如何獲取呢？請認真看完本文，保證可以獲取到用戶的手機號。
剛開始開發(fā)微信小程序的時候，想著實現(xiàn)手機驗證碼登入，后來查閱資料得知，發(fā)給用戶的短信是要自己付費的。后來想想，微信獲取用戶的手機號一樣可以保證手機號碼的真實性，因為手機號既然可以綁定微信，那么肯定是被嚴格核驗過的，然后就開始了獲取手機號之旅，網上教程有很多，但不知什么原因，都是會少一些內容，有的只有前端代碼，沒有后端；有的后端代碼是PHP，不是我們想要的 Java 或者JavaScript。我抱著開源的思想，給大家分享我獲取手機號的辦法，希望能幫到大家。
首先我們可以去看一看官方文檔，獲取手機號大致分為以下四步：
- 第1步：使用wx.login接口獲取code（臨時數(shù)據(jù)）
- 第2步：使用第一步的code，獲取session_key和openid（確認用戶唯一的數(shù)據(jù)）
- 第3步：使用getPhoneNumber接口，獲取iv和encryptedData（獲取加密的數(shù)據(jù)）
- 第4步：解密返回數(shù)據(jù)，獲取手機號碼（解密后的數(shù)據(jù)）
下面詳細講解：
第一步：使用wx.login接口獲取code（臨時數(shù)據(jù)）
官方文檔是這么寫的：
獲取微信用戶綁定的手機號，需先調用wx.login接口。
因為需要用戶主動觸發(fā)才能發(fā)起獲取手機號接口，所以該功能不由 API 來調用，需用 button 組件的點擊來觸發(fā)。注意：目前該接口針對非個人開發(fā)者，且完成了認證的小程序開放（不包含海外主體）。需謹慎使用，若用戶舉報較多或被發(fā)現(xiàn)在不必要場景下使用，微信有權永久回收該小程序的該接口權限。
我們可以提煉出下面幾條關鍵信息：
- 只能由非個人的小程序才能獲取用戶手機號。
- 獲取手機號必須由button按鈕組件觸發(fā)，而不能寫在onLoad()內自動獲取。
- 需在必要的情況下使用。
第一步獲取code的代碼和運行截圖和第二步一起給，因為這兩步必須寫在一個方法內，不能單獨兩個方法，然后在onLoad()調用，因為小程序執(zhí)行onLoad()內的方法，并不是按照代碼先后順序的（經驗之談）
第二步：使用第一步的code，獲取session_key和openid（確認用戶唯一的數(shù)據(jù)）
sessionkey和openid是用戶的身份證明，一位用戶在使用某一個小程序的時候，sessionkey是唯一的。當然一位用戶在使用不同的小程序的時候，sessionkey是不一樣的。
官網文檔是這樣寫的：
需要將 button 組件 open-type 的值設置為 getPhoneNumber，當用戶點擊并同意之后，可以通過 bindgetphonenumber 事件回調獲取到微信服務器返回的加密數(shù)據(jù)， 然后在第三方服務端結合 session_key 以及 app_id 進行解密獲取手機號。
我們需要拿來第一步獲取到的code，來向服務器換取sessionkey和openid。
具體代碼如下：
getLogin: function () {
var that = this;
wx.login({
success: function (res) {
console.log(res);
that.setData({
code: res.code,
})
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wx846bd21xxxxxxxxx&secret=45135d68ebe49de6fe313xxxxxxxxxxx&js_code=' + that.data.code + '&grant_type=authorization_code',
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
that.setData({
sessionkey: res.data.session_key,
openid: res.data.openid,
})
}
})
}
})
},
我們只需要在onLoad()這個生命周期函數(shù)內調用這個方法就可以了。
該方法首先調用wx.login()接口，獲取到code，保存在頁面變量code中，也就是第一步的操作代碼。
接著調用wx.request()接口向服務器請求換取sessionkey和openid，再copy本代碼的時候，你要替換掉appid和secret，這些可以在微信公眾平臺獲取。
正常情況下，你就可以獲取到sessionkey和openid了，當然如果你是個人認證的小程序，那恐怕就報錯了。如果還有其他錯誤，歡迎在文章下方留言。
但是這只是在測試的時候可以獲取，在實際運維的時候不能這樣寫，我們看微信官方文檔的說明：
在微信開發(fā)者工具中，可以臨時開啟 開發(fā)環(huán)境不校驗請求域名、TLS版本及HTTPS證書 選項，跳過服務器域名的校驗。此時，在微信開發(fā)者工具中及手機開啟調試模式時，不會進行服務器域名的校驗。
在服務器域名配置成功后，建議開發(fā)者關閉此選項進行開發(fā)，并在各平臺下進行測試，以確認服務器域名配置正確。
也就是說，https://api.weixin.qq.com/sns/jscode2session這個接口，我們不能直接去調用，這個時候，我們就要自己寫一個jsp文件，放在Tomcat的webapp目錄下，然后微信小程序通過這個jsp文件，來向微信服務器請求sessionkey和openid。
appid和secret需要自己替換。
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ page language="java" import="java.net.*,java.io.*"%>
<%!
public static String GetURLstr(String strUrl)
{
InputStream in = null;
OutputStream out = null;
String strdata = "";
try
{
URL url = new URL(strUrl);
in = url.openStream();
out = System.out;
byte[] buffer = new byte[4096];
int bytes_read;
while ((bytes_read = in.read(buffer)) != -1)
{
String reads = new String(buffer, 0, bytes_read, "UTF-8");
strdata = strdata + reads;
}
in.close();
out.close();
return strdata;
}
catch (Exception e)
{
System.err.println(e);
System.err.println("Usage: java GetURL <URL> [<filename>]");
return strdata;
}
}
%>
<%
request.setCharacterEncoding("UTF-8");
String str_code = "";
str_code = request.getParameter("code");
String str_token = "";
str_token = str_token + "https://api.weixin.qq.com/sns/jscode2session";
str_token = str_token + "?appid=wx846bd21xxxxxxxxx&secret=45135d68ebe49de6fe313xxxxxxxxxxx";
str_token = str_token + "&js_code=" + str_code ;
str_token = str_token + "&grant_type=authorization_code";
String neirong_token = "";
neirong_token = GetURLstr(str_token);
out.print(neirong_token);
%>
這個jsp文件需要放在Tomcat安裝目錄的webapp，用來被微信小程序前臺來請求數(shù)據(jù)。
同時，我們微信小程序前臺代碼也要稍加修改。改為向jsp文件獲取，傳上去一個參數(shù)code。
getLogin: function () {
var that = this;
wx.login({
success: function (res) {
console.log(res);
that.setData({
code: res.code,
})
wx.request({
url: 'https://127.0.0.1:8080/test/getOpenId.jsp?code=' + that.data.code,
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res);
that.setData({
sessionkey: res.data.session_key,
openid: res.data.openid,
})
}
})
}
})
},
效果同下圖所示：
第三步：使用getPhoneNumber接口，獲取iv和encryptedData（獲取加密的數(shù)據(jù)）
我們還是先來看官網文檔怎么寫的：
需要將 button 組件 open-type 的值設置為 getPhoneNumber，當用戶點擊并同意之后，可以通過 bindgetphonenumber 事件回調獲取到微信服務器返回的加密數(shù)據(jù)， 然后在第三方服務端結合 session_key 以及 app_id 進行解密獲取手機號。
然后就是官網文檔的demo：
//WXML
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
//JS
Page({
getPhoneNumber (e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
}
})
我們可以從中看出：獲取手機號必須由button按鈕組件觸發(fā)，而不能寫在onLoad()內自動獲取。
也就是說，這一步不需要我們進行什么操作，只要在WXML定義一個按鈕，加上open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"屬性，然后在JS文件中寫一個getPhoneNumber方法，該方法有一個參數(shù)e，我們可以從這個e中獲取iv和encryptedData，這個encryptedData就是加密的數(shù)據(jù)，其中包括我們需要的電話號碼。
那么，接下來就需要我們解密了。
第四步：解密返回數(shù)據(jù)，獲取手機號碼（解密后的數(shù)據(jù)）
我們還是先來看官方文檔：
微信會對這些開放數(shù)據(jù)做簽名和加密處理。開發(fā)者后臺拿到開放數(shù)據(jù)后可以對數(shù)據(jù)進行校驗簽名和解密，來保證數(shù)據(jù)不被篡改。
接口如果涉及敏感數(shù)據(jù)（如wx.getUserInfo當中的 openId 和 unionId），接口的明文內容將不包含這些敏感數(shù)據(jù)。開發(fā)者如需要獲取敏感數(shù)據(jù)，需要對接口返回的加密數(shù)據(jù)(encryptedData) 進行對稱解密。 解密算法如下：
對稱解密使用的算法為 AES-128-CBC，數(shù)據(jù)采用PKCS#7填充。
對稱解密的目標密文為 Base64_Decode(encryptedData)。
對稱解密秘鑰 aeskey = Base64_Decode(session_key), aeskey 是16字節(jié)。
對稱解密算法初始向量 為Base64_Decode(iv)，其中iv由數(shù)據(jù)接口返回。
微信官方提供了多種編程語言的示例代碼。每種語言類型的接口名字均一致。調用方式可以參照示例。
我們可以看出什么內容？關鍵的信息如下：
- 我們獲取到了sessionkey和openid，要把sessionkey和openid用來解密第三步的加密數(shù)據(jù)。
- 我們需要用到某個高深的算法。
- 官方提供的解密算法沒有Java和JavaScript版。
我使用了JavaScript版，改解密數(shù)據(jù)的模板結構如下，我會在下面把所有的代碼提供給大家。
這個解密算法，會把第二步獲取的sessionkey和openid，第三步獲取的 iv和encryptedData，解密成真正的手機號碼。
我們先來看獲取手機號的頁面的代碼：
var WXBizDataCrypt = require('../../utils/RdWXBizDataCrypt.js');
var AppId = 'wx846bd21xxxxxxxxx'
var AppSecret = '45135d68ebe49de6fe313xxxxxxxxxxx'
getPhoneNumber(e) {
var that = this;
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
var pc = new WXBizDataCrypt(AppId, this.data.sessionkey)
wx.getUserInfo({
success: function (res) {
var data = pc.decryptData(e.detail.encryptedData, e.detail.iv)
console.log('解密后 data: ', data)
console.log('手機號碼: ', data.phoneNumber)
that.setData({
tel: data.phoneNumber,
})
}
})
},
appid和secret需要自己替換。
我們先來看運行效果：
點擊允許之后，開發(fā)工具的調試區(qū)域會打印如下信息：
這樣就成功獲取到了手機號碼。
接下來是該JavaScript解密算法的部分代碼，因為代碼太長了，放文章里面不太合適，我會單獨上傳到CSDN下載模塊，拿來即用即可，大家也可以在下面評論區(qū)找我要文件,筆者每天都登CSDN，謝謝大家的理解和配合。
SHA1.js
(function(){
var C = (typeof window === 'undefined') ? require('./Crypto').Crypto : window.Crypto;
// Shortcuts
var util = C.util,
charenc = C.charenc,
UTF8 = charenc.UTF8,
Binary = charenc.Binary;
// Public API
var SHA1 = C.SHA1 = function (message, options) {
var digestbytes = util.wordsToBytes(SHA1._sha1(message));
return options && options.asBytes ? digestbytes :
options && options.asString ? Binary.bytesToString(digestbytes) :
util.bytesToHex(digestbytes);
};
// The core
SHA1._sha1 = function (message) {
// Convert to byte array
if (message.constructor == String) message = UTF8.stringToBytes(message);
/* else, assume byte array already */
var m = util.bytesToWords(message),
l = message.length * 8,
w = [],
H0 = 1732584193,
H1 = -271733879,
H2 = -1732584194,
H3 = 271733878,
H4 = -1009589776;
// Padding
m[l >> 5] |= 0x80 << (24 - l % 32);
m[((l + 64 >>> 9) << 4) + 15] = l;
for (var i = 0; i < m.length; i += 16) {
var a = H0,
b = H1,
c = H2,
d = H3,
e = H4;
for (var j = 0; j < 80; j++) {
if (j < 16) w[j] = m[i + j];
else {
var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16];
w[j] = (n << 1) | (n >>> 31);
}
var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
(H1 ^ H2 ^ H3) - 899497514);
H4 = H3;
H3 = H2;
H2 = (H1 << 30) | (H1 >>> 2);
H1 = H0;
H0 = t;
}
H0 += a;
H1 += b;
H2 += c;
H3 += d;
H4 += e;
}
return [H0, H1, H2, H3, H4];
};
// Package private blocksize
SHA1._blocksize = 16;
SHA1._digestsize = 20;
})();
Crypto.js
if (typeof Crypto == "undefined" || ! Crypto.util)
{
(function(){
var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// Global Crypto object
// with browser window or with node module
var Crypto = (typeof window === 'undefined') ? exports.Crypto = {} : window.Crypto = {};
// Crypto utilities
var util = Crypto.util = {
// Bit-wise rotate left
rotl: function (n, b) {
return (n << b) | (n >>> (32 - b));
},
// Bit-wise rotate right
rotr: function (n, b) {
return (n << (32 - b)) | (n >>> b);
},
// Swap big-endian to little-endian and vice versa
endian: function (n) {
// If number given, swap endian
if (n.constructor == Number) {
return util.rotl(n, 8) & 0x00FF00FF |
util.rotl(n, 24) & 0xFF00FF00;
}
// Else, assume array and swap all items
for (var i = 0; i < n.length; i++)
n[i] = util.endian(n[i]);
return n;
},
// Generate an array of any length of random bytes
randomBytes: function (n) {
for (var bytes = []; n > 0; n--)
bytes.push(Math.floor(Math.random() * 256));
return bytes;
},
// Convert a byte array to big-endian 32-bit words
bytesToWords: function (bytes) {
for (var words = [], i = 0, b = 0; i < bytes.length; i++, b += 8)
words[b >>> 5] |= (bytes[i] & 0xFF) << (24 - b % 32);
return words;
},
// Convert big-endian 32-bit words to a byte array
wordsToBytes: function (words) {
for (var bytes = [], b = 0; b < words.length * 32; b += 8)
bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
return bytes;
},
// Convert a byte array to a hex string
bytesToHex: function (bytes) {
for (var hex = [], i = 0; i < bytes.length; i++) {
hex.push((bytes[i] >>> 4).toString(16));
hex.push((bytes[i] & 0xF).toString(16));
}
return hex.join("");
},
// Convert a hex string to a byte array
hexToBytes: function (hex) {
for (var bytes = [], c = 0; c < hex.length; c += 2)
bytes.push(parseInt(hex.substr(c, 2), 16));
return bytes;
},
// Convert a byte array to a base-64 string
bytesToBase64: function (bytes) {
// Use browser-native function if it exists
if (typeof btoa == "function") return btoa(Binary.bytesToString(bytes));
for(var base64 = [], i = 0; i < bytes.length; i += 3) {
var triplet = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
for (var j = 0; j < 4; j++) {
if (i * 8 + j * 6 <= bytes.length * 8)
base64.push(base64map.charAt((triplet >>> 6 * (3 - j)) & 0x3F));
else base64.push("=");
}
}
return base64.join("");
},
// Convert a base-64 string to a byte array
base64ToBytes: function (base64) {
// Use browser-native function if it exists
if (typeof atob == "function") return Binary.stringToBytes(atob(base64));
// Remove non-base-64 characters
base64 = base64.replace(/[^A-Z0-9+\/]/ig, "");
for (var bytes = [], i = 0, imod4 = 0; i < base64.length; imod4 = ++i % 4) {
if (imod4 == 0) continue;
bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2)) |
(base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2)));
}
return bytes;
}
};
// Crypto character encodings
var charenc = Crypto.charenc = {};
// UTF-8 encoding
var UTF8 = charenc.UTF8 = {
// Convert a string to a byte array
stringToBytes: function (str) {
return Binary.stringToBytes(unescape(encodeURIComponent(str)));
},
// Convert a byte array to a string
bytesToString: function (bytes) {
return decodeURIComponent(escape(Binary.bytesToString(bytes)));
}
};
// Binary encoding
var Binary = charenc.Binary = {
// Convert a string to a byte array
stringToBytes: function (str) {
for (var bytes = [], i = 0; i < str.length; i++)
bytes.push(str.charCodeAt(i) & 0xFF);
return bytes;
},
// Convert a byte array to a string
bytesToString: function (bytes) {
for (var str = [], i = 0; i < bytes.length; i++)
str.push(String.fromCharCode(bytes[i]));
return str.join("");
}
};
})();
}
CryptoMath.js
(function(){
var C = (typeof window === 'undefined') ? require('./Crypto').Crypto : window.Crypto;
// Shortcut
var util = C.util;
// Convert n to unsigned 32-bit integer
util.u32 = function (n) {
return n >>> 0;
};
// Unsigned 32-bit addition
util.add = function () {
var result = this.u32(arguments[0]);
for (var i = 1; i < arguments.length; i++)
result = this.u32(result + this.u32(arguments[i]));
return result;
};
// Unsigned 32-bit multiplication
util.mult = function (m, n) {
return this.add((n & 0xFFFF0000) * m,
(n & 0x0000FFFF) * m);
};
// Unsigned 32-bit greater than (>) comparison
util.gt = function (m, n) {
return this.u32(m) > this.u32(n);
};
// Unsigned 32-bit less than (<) comparison
util.lt = function (m, n) {
return this.u32(m) < this.u32(n);
};
})();
總結
到此這篇關于微信小程序 獲取手機號 JavaScript解密示例代碼詳解的文章就介紹到這了,更多相關微信小程序 手機號 JavaScript解密內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
純JavaScript創(chuàng)建一個簡單的待辦事項列表
這篇文章主要給大家介紹了關于純JavaScript創(chuàng)建一個簡單的待辦事項列表的相關資料,清單通常用于記錄我們在某一天需要完成的所有事項,將最關鍵的任務放在最上方,將最不重要的事項放在最下方,需要的朋友可以參考下2024-01-01
javascript實現(xiàn)自動輸出文本（打字特效）
文字如何實現(xiàn)打字的效果呢?在瀏覽網頁的時候也經常能看到這種效果。本文給大家匯總介紹了幾種打字效果的文字特效,文字一個一個地打印在頁面上。2015-08-08
作為高級前端切圖仔,我們經常遇到需要處理、聚合或轉換數(shù)據(jù)的場景,JavaScript 的reduce()方法是一個強大的工具,它允許我們有效地迭代數(shù)組并累積單個值,從而簡化了這些任務,本文將給大家揭秘JavaScript Reduce方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS+CSS實現(xiàn)仿支付寶菜單選中效果代碼,涉及JavaScript基于鼠標事件動態(tài)設置頁面css樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家介紹了使用JS?簡單實現(xiàn)滑塊驗證碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
JS優(yōu)雅的使用function實現(xiàn)一個class
這篇文章主要為大家介紹了JS優(yōu)雅的使用function實現(xiàn)一個class示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了JavaScript this使用方法圖解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了常用的JavaScript WEB操作方法分享,包含數(shù)組方法集、cookie方法集、url方法集、正則表達式方法集、字符串方法集、加密方法集、日期方法集等常用操作方法,需要的朋友可以參考下2015-02-02
javascript中數(shù)組的concat()方法使用介紹
數(shù)組的concat()方法想必大家比不陌生吧，在本文為大家介紹下javascript中數(shù)組的concat()方法的具體使用，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)購物車功能的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06