本篇主要講述，如何在微信中打開自家頁面后，彈窗請求用戶授權，以便拿到用戶的微信信息。
首先說一下，完成自定義分享信息的，從無到有的流程：
基礎硬件服務：
需要一個公網可以訪問的有效域名：
擁有自己的服務器，來存放自己頁面項目：
我還是在阿里云購買購買服務器，這個花費最大，幾百元一年的使用權。
而且這個服務器，本質就是一臺電腦，是電腦就有配置，我目前只是自己學習使用，配置幾乎是最低的，而且購買的套餐自帶公網ip，這么一來我連上面購買ip的錢也省了。
綜上所述，最終我只購買了域名和一個套餐自帶公網ip的服務器，服務器用來放置前端項目和后臺項目。
阿里云ECS：https://cn.aliyun.com/product/ecs
微信公眾平臺，開發者認證
打開微信公眾平臺 https://mp.weixin.qq.com/，使用郵箱注冊，注意，一個郵箱只能注冊一個微信公眾平臺賬號，一個賬號只能選擇一種賬號分類且不能更改，這里一定要慎重，這里選擇訂閱號。
可選個人類型、企業類型等等，其中，個人類型是不沒有分享定制功能的，但企業類型我又不符合。。。最終我還是選擇的個人類型，因為即使我的賬號沒有權限，但微信公眾號里面，提供一個功能全開的測試賬號，使用測試賬號可以進行學習和測試，還是沒問題的。
填寫信息，綁定微信，注冊完成，登錄進去。
為了進行開發，需要在這里和你的后臺項目和前端項目進行對應的配置，讓微信確認后臺項目和前臺項目都是你的之后，才會提供服務。
有關服務器端和后臺項目的配置：
首先需要說明，由于訂閱號的功能比較少，如果只是進行學習，建議在 開發 => 開發者工具中選擇使用公眾平臺測試帳號進行學習性開發，這樣可以使用全功能的微信服務，配置也比較少。
下面的配置步驟均是使用自己的賬號需要進行的配置
有關前端項目的配置：
設置 => 公眾號設置 => 功能設置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網站的域名，比如wx.qq.com或者wx.qq.com/user，最多可寫三個，且需要驗證。
> 驗證的方式，就是將一個微信提供的txt文件，放在此域名對應的放置于服務器中的web項目的訪問根目錄中，需要和主文件（大部分默認為```index.html```）放在同一級，當提交的時候，微信會進行訪問，來獲取文件，確認此域名是你的。
配置完成后，就可以進行開發了。
下面進入代碼階段。
證明后臺項目和前端項目時我自己的
首先，上面證明服務是自己的部分，我們需要實現一個接口，我用http://wx.my.com/forWx打的比方，那么為了啟用配置，我需要實現/forWx給微信調用，下面是代碼：
node的基礎環境搭建省略，這里只寫接口內部方法了，關鍵是參數加密拼裝
const crypto = require('crypto') // 引入加密模塊const config = require('./config') // 引入配置文件// 提供給微信調用server.get('/forWx', function (req, res) { res.header('Access-Control-Allow-Origin', '*') // 1.獲取微信服務器Get請求的參數 signature、timestamp、nonce、echostr let signature = req.query.signature // 微信加密簽名 let timestamp = req.query.timestamp // 時間戳 let nonce = req.query.nonce // 隨機數 let echostr = req.query.echost // 隨機字符串 // 2.將token、timestamp、nonce三個參數進行字典序排序，其中token就是設置在微信頁面中的那個自定義字符串 let array = [config.token, timestamp, nonce] array.sort() // 3.將三個參數字符串拼接成一個字符串進行sha1加密 let tempStr = array.join('') const hashCode = crypto.createHash('sha1') //創建加密類型 let resultCode = hashCode.update(tempStr, 'utf8').digest('hex') //4.開發者獲得加密后的字符串可與signature對比，標識該請求來源于微信 if (resultCode === signature) { res.send(echostr) } else { res.send('mismatch') }})完成，上面是證明服務器是我的，后面還需要證明前端項目是我的，這個就跳過了，因為太簡單，直接下載那個文件，放到自己服務器中，前端項目的index.html同級即可
上面的操作，是只要想進行微信公頁面開發，必須要有的步驟，一切的基礎。
首先順著功能使用流程，順一下實現此功能的方法：
用戶在微信打開頁面后，立即或者通過方法觸發ajax，把當前url和一些state（自定義的數據，因為彈窗請求用戶授權，是需要跳轉頁面的，這個state就是會幫你帶到下個頁面鏈接中的數據）作為請求參數，請求自己的后臺接口。
后臺請求微信服務器，把以下作為參數，拼裝到某個固定的微信指定的url后，返回給前端，參數為：
前端拿到后端拼好的這個url，直接window.location.href暴力跳轉
如果靜默授權，則直接用戶無感，如果是彈窗授權，則新頁面（微信方提供的頁面）會彈窗詢問用戶，是否授權
用戶同意授權后，微信再次跳轉頁面，即跳轉到之前傳的你的url地址中，還會把state參數給你帶上，此外，還多了個code參數，即openId
新頁面中，可以使用用戶的openId，再加上自己的AppId和AppSecret，調用微信的接口，獲取用戶的access_token
最后再使用用戶的openId和access_token，成功獲取用戶信息
下面是前端獲取微信授權的...html頁面
<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 頁面描述 --> <meta name="description" content=""/> <!-- 頁面關鍵詞 --> <meta name="keywords" content="" /> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不讓百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico" rel="external nofollow" > <title>微信</title> <style> html, body { background-color: skyblue; font-size: 16px; height: 50%; width: 100%; } #index { padding: 10px; } #index .box > div { cursor: pointer; background-color: #fff; display: inline-block; padding: 5px; margin: 10px; } #index .box .getUserInfo { display: none; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script></head><body> <div id="index"> <div class="box"> <div class="initOauth2" type="snsapi_base">獲取微信授權(靜默)</div> <div class="initOauth2" type="snsapi_userinfo">獲取微信授權(彈框)</div> <br> <div class="wxSweep">掃一掃</div> <br> <div class="getUserInfo">獲取用戶信息</div> </div> <div class="userInfo"></div> </div></body><script> let BASE_URL = 'http://wxtestapi.junlli.com' // 獲取 url 參數 const getValue = () => { let flag = decodeURI(window.location.search.substr(1)); if (!flag) return undefined let arr = flag.split('&') if (arr.length <= 0) return undefined let obj = {} for (let i = 0; i < arr.length; i++) { let tempArr = arr[i].split('=') obj[tempArr[0]] = tempArr[1] } return obj } let urlParams = getValue() let code // 判斷是否有code if (urlParams && urlParams.code) { code = urlParams.code $('.getUserInfo').css('display', 'inline-block') } $('.getUserInfo').on('click', function() { if (!code) return alert('請重新獲取授權') $.ajax({ url: BASE_URL + '/getUserInfo', type: 'post', data: { code, }, success: function(data) { console.log(data) $('.userInfo').html(JSON.stringify(data)) }, error: function(error) { console.log(error) alert('請重新獲取授權') } }) }) // 獲取微信授權 $('.box .initOauth2').on('click', function() { wxInitOauth2($(this).attr('type')) }) // 初始化 微信授權 wxInitOauth2 = type => { let url = window.location.origin + window.location.pathname console.log('url', url) $.ajax({ url: BASE_URL + '/getOauth2', type: 'post', data: { url, type, state: 'abcde' }, success: function(data) { // 去跳轉 window.location.href = data.url // console.log(data) }, error: function(error) { console.log(error) }, }) }</script></html>下面是node后臺代碼
const config = require('./config') // 引入配置文件// 通過 code 獲取用戶的 openId 和 access_tokenconst getOpenIdAndAccessToken = code => { let params = { appid: config.appId, secret: config.appSecret, code, grant_type: 'authorization_code' } let url = `https://api.weixin.qq.com/sns/oauth2/access_token?${qs.stringify(params)}` return new Promise((resolve, reject) => { request(url, function (error, res, body) { if (res) { let bodyObj = JSON.parse(body) resolve(bodyObj); } else { reject(error); } }) })}// 獲取用戶信息const getUserInfo = ({ access_token, openid }) => { let params = { access_token, openid, lang: 'zh_CN' }; let url = `https://api.weixin.qq.com/sns/userinfo?${qs.stringify(params)}` return new Promise((resolve, reject) => { request(url, function (err, res, body) { if (res) { resolve(JSON.parse(body)) } else { reject(err); } }); })}// 獲取微信授權 --- codeserver.post('/getOauth2', (req, res) => { try { let params = req.body let redirect_uri = params.url let state = params.state let type = params.type // 第一步：用戶同意授權，獲取code // type:snsapi_base // 不彈出授權頁面，直接跳轉，只能獲取用戶openid // type:snsapi_userinfo // 彈出授權頁面，可通過openid拿到昵稱、性別、所在地 var scope = type // 彈出授權頁面，拿到code let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}${state ? '&state=' + state : ''}#wechat_redirect` res.send({ url }); } catch (error) { res.send(error) }})// 獲取用戶個人信息server.post('/getUserInfo', (req, res) => { try { let params = req.body let code = params.code // 先用 code 換取 openId 和 access_token getOpenIdAndAccessToken(code).then(obj => { // 用 openId 和 access_token 獲取個人信息 getUserInfo(obj).then(data => { res.send(data) }).catch(error => res.send(error)) }).catch(error => res(error)) } catch (error) { res.send(error) }})整體功能實現的步驟和具體代碼如上，請酌情參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
