您好,登錄后才能下訂單哦!
本篇主要講述,如何在微信中打開自家頁(yè)面后,彈窗請(qǐng)求用戶授權(quán),以便拿到用戶的微信信息。
首先說(shuō)一下,完成自定義分享信息的,從無(wú)到有的流程:
基礎(chǔ)硬件服務(wù):
需要一個(gè)公網(wǎng)可以訪問(wèn)的有效域名:
擁有自己的服務(wù)器,來(lái)存放自己頁(yè)面項(xiàng)目:
我還是在阿里云購(gòu)買購(gòu)買服務(wù)器,這個(gè)花費(fèi)最大,幾百元一年的使用權(quán)。
而且這個(gè)服務(wù)器,本質(zhì)就是一臺(tái)電腦,是電腦就有配置,我目前只是自己學(xué)習(xí)使用,配置幾乎是最低的,而且購(gòu)買的套餐自帶公網(wǎng)ip,這么一來(lái)我連上面購(gòu)買ip的錢也省了。
綜上所述,最終我只購(gòu)買了域名和一個(gè)套餐自帶公網(wǎng)ip的服務(wù)器,服務(wù)器用來(lái)放置前端項(xiàng)目和后臺(tái)項(xiàng)目。
阿里云ECS:https://cn.aliyun.com/product/ecs
微信公眾平臺(tái),開發(fā)者認(rèn)證
打開微信公眾平臺(tái) https://mp.weixin.qq.com/,使用郵箱注冊(cè),注意,一個(gè)郵箱只能注冊(cè)一個(gè)微信公眾平臺(tái)賬號(hào),一個(gè)賬號(hào)只能選擇一種賬號(hào)分類且不能更改,這里一定要慎重,這里選擇訂閱號(hào)。
可選個(gè)人類型、企業(yè)類型等等,其中,個(gè)人類型是不沒(méi)有分享定制功能的,但企業(yè)類型我又不符合。。。最終我還是選擇的個(gè)人類型,因?yàn)榧词刮业馁~號(hào)沒(méi)有權(quán)限,但微信公眾號(hào)里面,提供一個(gè)功能全開的測(cè)試賬號(hào),使用測(cè)試賬號(hào)可以進(jìn)行學(xué)習(xí)和測(cè)試,還是沒(méi)問(wèn)題的。
填寫信息,綁定微信,注冊(cè)完成,登錄進(jìn)去。
為了進(jìn)行開發(fā),需要在這里和你的后臺(tái)項(xiàng)目和前端項(xiàng)目進(jìn)行對(duì)應(yīng)的配置,讓微信確認(rèn)后臺(tái)項(xiàng)目和前臺(tái)項(xiàng)目都是你的之后,才會(huì)提供服務(wù)。
有關(guān)服務(wù)器端和后臺(tái)項(xiàng)目的配置:
首先需要說(shuō)明,由于訂閱號(hào)的功能比較少,如果只是進(jìn)行學(xué)習(xí),建議在 開發(fā) => 開發(fā)者工具中選擇使用公眾平臺(tái)測(cè)試帳號(hào)進(jìn)行學(xué)習(xí)性開發(fā),這樣可以使用全功能的微信服務(wù),配置也比較少。
下面的配置步驟均是使用自己的賬號(hào)需要進(jìn)行的配置
有關(guān)前端項(xiàng)目的配置:
設(shè)置 => 公眾號(hào)設(shè)置 => 功能設(shè)置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網(wǎng)站的域名,比如wx.qq.com或者wx.qq.com/user,最多可寫三個(gè),且需要驗(yàn)證。
> 驗(yàn)證的方式,就是將一個(gè)微信提供的txt文件,放在此域名對(duì)應(yīng)的放置于服務(wù)器中的web項(xiàng)目的訪問(wèn)根目錄中,需要和主文件(大部分默認(rèn)為```index.html```)放在同一級(jí),當(dāng)提交的時(shí)候,微信會(huì)進(jìn)行訪問(wèn),來(lái)獲取文件,確認(rèn)此域名是你的。
配置完成后,就可以進(jìn)行開發(fā)了。
下面進(jìn)入代碼階段。
證明后臺(tái)項(xiàng)目和前端項(xiàng)目時(shí)我自己的
首先,上面證明服務(wù)是自己的部分,我們需要實(shí)現(xiàn)一個(gè)接口,我用http://wx.my.com/forWx打的比方,那么為了啟用配置,我需要實(shí)現(xiàn)/forWx給微信調(diào)用,下面是代碼:
node的基礎(chǔ)環(huán)境搭建省略,這里只寫接口內(nèi)部方法了,關(guān)鍵是參數(shù)加密拼裝
const crypto = require('crypto') // 引入加密模塊 const config = require('./config') // 引入配置文件 // 提供給微信調(diào)用 server.get('/forWx', function (req, res) { res.header('Access-Control-Allow-Origin', '*') // 1.獲取微信服務(wù)器Get請(qǐng)求的參數(shù) signature、timestamp、nonce、echostr let signature = req.query.signature // 微信加密簽名 let timestamp = req.query.timestamp // 時(shí)間戳 let nonce = req.query.nonce // 隨機(jī)數(shù) let echostr = req.query.echost // 隨機(jī)字符串 // 2.將token、timestamp、nonce三個(gè)參數(shù)進(jìn)行字典序排序,其中token就是設(shè)置在微信頁(yè)面中的那個(gè)自定義字符串 let array = [config.token, timestamp, nonce] array.sort() // 3.將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密 let tempStr = array.join('') const hashCode = crypto.createHash('sha1') //創(chuàng)建加密類型 let resultCode = hashCode.update(tempStr, 'utf8').digest('hex') //4.開發(fā)者獲得加密后的字符串可與signature對(duì)比,標(biāo)識(shí)該請(qǐng)求來(lái)源于微信 if (resultCode === signature) { res.send(echostr) } else { res.send('mismatch') } })
完成,上面是證明服務(wù)器是我的,后面還需要證明前端項(xiàng)目是我的,這個(gè)就跳過(guò)了,因?yàn)樘?jiǎn)單,直接下載那個(gè)文件,放到自己服務(wù)器中,前端項(xiàng)目的index.html同級(jí)即可
上面的操作,是只要想進(jìn)行微信公頁(yè)面開發(fā),必須要有的步驟,一切的基礎(chǔ)。
首先順著功能使用流程,順一下實(shí)現(xiàn)此功能的方法:
用戶在微信打開頁(yè)面后,立即或者通過(guò)方法觸發(fā)ajax,把當(dāng)前url和一些state(自定義的數(shù)據(jù),因?yàn)閺棿罢?qǐng)求用戶授權(quán),是需要跳轉(zhuǎn)頁(yè)面的,這個(gè)state就是會(huì)幫你帶到下個(gè)頁(yè)面鏈接中的數(shù)據(jù))作為請(qǐng)求參數(shù),請(qǐng)求自己的后臺(tái)接口。
后臺(tái)請(qǐng)求微信服務(wù)器,把以下作為參數(shù),拼裝到某個(gè)固定的微信指定的url后,返回給前端,參數(shù)為:
前端拿到后端拼好的這個(gè)url,直接window.location.href暴力跳轉(zhuǎn)
如果靜默授權(quán),則直接用戶無(wú)感,如果是彈窗授權(quán),則新頁(yè)面(微信方提供的頁(yè)面)會(huì)彈窗詢問(wèn)用戶,是否授權(quán)
用戶同意授權(quán)后,微信再次跳轉(zhuǎn)頁(yè)面,即跳轉(zhuǎn)到之前傳的你的url地址中,還會(huì)把state參數(shù)給你帶上,此外,還多了個(gè)code參數(shù),即openId
新頁(yè)面中,可以使用用戶的openId,再加上自己的AppId和AppSecret,調(diào)用微信的接口,獲取用戶的access_token
最后再使用用戶的openId和access_token,成功獲取用戶信息
下面是前端獲取微信授權(quán)的...html頁(yè)面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 頁(yè)面描述 --> <meta name="description" content=""/> <!-- 頁(yè)面關(guān)鍵詞 --> <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"> <!-- 不讓百度轉(zhuǎn)碼 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 針對(duì)手持設(shè)備優(yōu)化,主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <!-- 優(yōu)先使用 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="initOauth3" type="snsapi_base">獲取微信授權(quán)(靜默)</div> <div class="initOauth3" type="snsapi_userinfo">獲取微信授權(quán)(彈框)</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 參數(shù) 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('請(qǐng)重新獲取授權(quán)') $.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('請(qǐng)重新獲取授權(quán)') } }) }) // 獲取微信授權(quán) $('.box .initOauth3').on('click', function() { wxInitOauth3($(this).attr('type')) }) // 初始化 微信授權(quán) wxInitOauth3 = type => { let url = window.location.origin + window.location.pathname console.log('url', url) $.ajax({ url: BASE_URL + '/getOauth3', type: 'post', data: { url, type, state: 'abcde' }, success: function(data) { // 去跳轉(zhuǎn) window.location.href = data.url // console.log(data) }, error: function(error) { console.log(error) }, }) } </script> </html>
下面是node后臺(tái)代碼
const config = require('./config') // 引入配置文件 // 通過(guò) code 獲取用戶的 openId 和 access_token const getOpenIdAndAccessToken = code => { let params = { appid: config.appId, secret: config.appSecret, code, grant_type: 'authorization_code' } let url = `https://api.weixin.qq.com/sns/oauth3/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); } }); }) } // 獲取微信授權(quán) --- code server.post('/getOauth3', (req, res) => { try { let params = req.body let redirect_uri = params.url let state = params.state let type = params.type // 第一步:用戶同意授權(quán),獲取code // type:snsapi_base // 不彈出授權(quán)頁(yè)面,直接跳轉(zhuǎn),只能獲取用戶openid // type:snsapi_userinfo // 彈出授權(quán)頁(yè)面,可通過(guò)openid拿到昵稱、性別、所在地 var scope = type // 彈出授權(quán)頁(yè)面,拿到code let url = `https://open.weixin.qq.com/connect/oauth3/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) } }) // 獲取用戶個(gè)人信息 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 獲取個(gè)人信息 getUserInfo(obj).then(data => { res.send(data) }).catch(error => res.send(error)) }).catch(error => res(error)) } catch (error) { res.send(error) } })
整體功能實(shí)現(xiàn)的步驟和具體代碼如上,請(qǐng)酌情參考。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。