node.js實(shí)現(xiàn)微信開(kāi)發(fā)之獲取用戶(hù)授權(quán)
本篇主要講述，如何在微信中打開(kāi)自家頁(yè)面后，彈窗請(qǐng)求用戶(hù)授權(quán)，以便拿到用戶(hù)的微信信息。
首先說(shuō)一下，完成自定義分享信息的，從無(wú)到有的流程：
基礎(chǔ)硬件服務(wù)：
需要一個(gè)公網(wǎng)可以訪問(wèn)的有效域名：
- 購(gòu)買(mǎi)域名，并備案，我是在阿里云購(gòu)買(mǎi)的，備案需要十幾個(gè)工作日。
- 購(gòu)買(mǎi)ip，然后設(shè)置上面的域名，解析到該ip，這個(gè)時(shí)間可以快到忽略。
擁有自己的服務(wù)器，來(lái)存放自己頁(yè)面項(xiàng)目：
我還是在阿里云購(gòu)買(mǎi)購(gòu)買(mǎi)服務(wù)器，這個(gè)花費(fèi)最大，幾百元一年的使用權(quán)。
而且這個(gè)服務(wù)器，本質(zhì)就是一臺(tái)電腦，是電腦就有配置，我目前只是自己學(xué)習(xí)使用，配置幾乎是最低的，而且購(gòu)買(mǎi)的套餐自帶公網(wǎng)ip，這么一來(lái)我連上面購(gòu)買(mǎi)ip的錢(qián)也省了。
綜上所述，最終我只購(gòu)買(mǎi)了域名和一個(gè)套餐自帶公網(wǎng)ip的服務(wù)器，服務(wù)器用來(lái)放置前端項(xiàng)目和后臺(tái)項(xiàng)目。
阿里云ECS：https://cn.aliyun.com/product/ecs
微信公眾平臺(tái)，開(kāi)發(fā)者認(rèn)證
打開(kāi)微信公眾平臺(tái) https://mp.weixin.qq.com/，使用郵箱注冊(cè)，注意，一個(gè)郵箱只能注冊(cè)一個(gè)微信公眾平臺(tái)賬號(hào)，一個(gè)賬號(hào)只能選擇一種賬號(hào)分類(lèi)且不能更改，這里一定要慎重，這里選擇訂閱號(hào)。
可選個(gè)人類(lèi)型、企業(yè)類(lèi)型等等，其中，個(gè)人類(lèi)型是不沒(méi)有分享定制功能的，但企業(yè)類(lèi)型我又不符合。。。最終我還是選擇的個(gè)人類(lèi)型，因?yàn)榧词刮业馁~號(hào)沒(méi)有權(quán)限，但微信公眾號(hào)里面，提供一個(gè)功能全開(kāi)的測(cè)試賬號(hào)，使用測(cè)試賬號(hào)可以進(jìn)行學(xué)習(xí)和測(cè)試，還是沒(méi)問(wèn)題的。
填寫(xiě)信息，綁定微信，注冊(cè)完成，登錄進(jìn)去。
為了進(jìn)行開(kāi)發(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í)，建議在 開(kāi)發(fā) => 開(kāi)發(fā)者工具中選擇使用公眾平臺(tái)測(cè)試帳號(hào)進(jìn)行學(xué)習(xí)性開(kāi)發(fā)，這樣可以使用全功能的微信服務(wù)，配置也比較少。
下面的配置步驟均是使用自己的賬號(hào)需要進(jìn)行的配置
- 開(kāi)發(fā) => 基本配置 => 公眾號(hào)開(kāi)發(fā)信息，在這里記下開(kāi)發(fā)者ID(AppID)，接著開(kāi)通服務(wù)，記下開(kāi)發(fā)者密碼(AppSecret)，開(kāi)發(fā)中會(huì)需要輸入。
- 設(shè)置IP白名單，這里寫(xiě)的是自己的服務(wù)器IP地址，因?yàn)楣δ苌暇€(xiàn)后，需要使用這臺(tái)服務(wù)器，通過(guò)開(kāi)發(fā)者ID和密碼來(lái)向微信服務(wù)區(qū)獲取自己服務(wù)的access_token
- 進(jìn)行下面的后臺(tái)項(xiàng)目，目的是讓微信確定這個(gè)后臺(tái)項(xiàng)目是你的，檢驗(yàn)方法是微信發(fā)起一個(gè)get請(qǐng)求，你返回正確的返回值，啟用此配置時(shí)調(diào)用：
- url：接口地址，比如http://wx.my.com/forWx
- Token：完全自定義的一個(gè)字符串，相當(dāng)于個(gè)暗號(hào)，你的返回值需要這個(gè)字符串參與拼裝。
- EncodingAESKey：隨機(jī)生成即可
- 消息加解密方式：自選，這里我使用的是明文模式
有關(guān)前端項(xiàng)目的配置：
設(shè)置 => 公眾號(hào)設(shè)置 => 功能設(shè)置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網(wǎng)站的域名，比如wx.qq.com或者wx.qq.com/user，最多可寫(xiě)三個(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)行開(kāi)發(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)境搭建省略，這里只寫(xiě)接口內(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)建加密類(lèi)型
let resultCode = hashCode.update(tempStr, 'utf8').digest('hex')
//4.開(kāi)發(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è)面開(kāi)發(fā)，必須要有的步驟，一切的基礎(chǔ)。
首先順著功能使用流程，順一下實(shí)現(xiàn)此功能的方法：
用戶(hù)在微信打開(kāi)頁(yè)面后，立即或者通過(guò)方法觸發(fā)ajax，把當(dāng)前url和一些state（自定義的數(shù)據(jù)，因?yàn)閺棿罢?qǐng)求用戶(hù)授權(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ù)為：
- appId：自己的AppId
- redirect_uri：前端給的url
- scope：授權(quán)方式，是靜默授權(quán)（只能獲取用戶(hù)openId）還是彈窗授權(quán)（能獲取用戶(hù)微信個(gè)人信息）
- state：要帶到新頁(yè)面的參數(shù)
前端拿到后端拼好的這個(gè)url，直接window.location.href暴力跳轉(zhuǎn)
如果靜默授權(quán)，則直接用戶(hù)無(wú)感，如果是彈窗授權(quán)，則新頁(yè)面（微信方提供的頁(yè)面）會(huì)彈窗詢(xún)問(wèn)用戶(hù)，是否授權(quán)
用戶(hù)同意授權(quán)后，微信再次跳轉(zhuǎn)頁(yè)面，即跳轉(zhuǎn)到之前傳的你的url地址中，還會(huì)把state參數(shù)給你帶上，此外，還多了個(gè)code參數(shù)，即openId
新頁(yè)面中，可以使用用戶(hù)的openId，再加上自己的AppId和AppSecret，調(diào)用微信的接口，獲取用戶(hù)的access_token
最后再使用用戶(hù)的openId和access_token，成功獲取用戶(hù)信息
下面是前端獲取微信授權(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="initOauth2" type="snsapi_base">獲取微信授權(quán)(靜默)</div>
<div class="initOauth2" type="snsapi_userinfo">獲取微信授權(quán)(彈框)</div>
<br>
<div class="wxSweep">掃一掃</div>
<br>
<div class="getUserInfo">獲取用戶(hù)信息</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 .initOauth2').on('click', function() {
wxInitOauth2($(this).attr('type'))
})
// 初始化 微信授權(quán)
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) {
// 去跳轉(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 獲取用戶(hù)的 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/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);
}
})
})
}
// 獲取用戶(hù)信息
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('/getOauth2', (req, res) => {
try {
let params = req.body
let redirect_uri = params.url
let state = params.state
let type = params.type
// 第一步：用戶(hù)同意授權(quán)，獲取code
// type:snsapi_base // 不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶(hù)openid
// type:snsapi_userinfo // 彈出授權(quán)頁(yè)面，可通過(guò)openid拿到昵稱(chēng)、性別、所在地
var scope = type // 彈出授權(quán)頁(yè)面，拿到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)
}
})
// 獲取用戶(hù)個(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í)有所幫助，也希望大家多多支持腳本之家。
- nodejs開(kāi)發(fā)一個(gè)最簡(jiǎn)單的web服務(wù)器實(shí)例講解
- 如何利用node.js開(kāi)發(fā)一個(gè)生成逐幀動(dòng)畫(huà)的小工具
- Node.js開(kāi)發(fā)之套接字(socket)編程入門(mén)示例
- Node.js實(shí)現(xiàn)用戶(hù)評(píng)論社區(qū)功能（體驗(yàn)前后端開(kāi)發(fā)的樂(lè)趣）
- 手把手教你使用TypeScript開(kāi)發(fā)Node.js應(yīng)用
- nodejs微信開(kāi)發(fā)之授權(quán)登錄+獲取用戶(hù)信息
- NodeJS開(kāi)發(fā)人員常見(jiàn)五個(gè)錯(cuò)誤理解
相關(guān)文章
nodejs 中模擬實(shí)現(xiàn) emmiter 自定義事件
這篇文章主要介紹了Nodejs中自定義事件實(shí)例,比較簡(jiǎn)單的一個(gè)例子,需要的朋友可以參考下。2016-02-02
NodeJS鏈接MySql數(shù)據(jù)庫(kù)的操作方法
下面小編就為大家?guī)?lái)一篇NodeJS鏈接MySql數(shù)據(jù)庫(kù)的操現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Node.js上傳文件功能之服務(wù)端如何獲取文件上傳進(jìn)度
這篇文章主要介紹如何利用progress-stream獲取文件上傳進(jìn)度，以及該組件使用過(guò)程中的注意事項(xiàng)2018-02-02
手把手教你把nodejs部署到linux上跑出hello world
本篇文章主要介紹了手把手教你把nodejs部署到linux上跑出hello world，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
nodejs中request庫(kù)使用HTTPS代理的方法
這篇文章主要介紹了nodejs中request庫(kù)使用HTTPS代理的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
實(shí)戰(zhàn)node靜態(tài)文件服務(wù)器的示例代碼
本篇文章主要介紹了實(shí)戰(zhàn)node靜態(tài)文件服務(wù)器的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
npm?does?not?support?Node.js問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于npm?does?not?support?Node.js問(wèn)題的解決辦法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
詳解Node.js access_token的獲取、存儲(chǔ)及更新
本篇文章主要介紹了Node.js access_token的獲取、存儲(chǔ)及更新 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
PHP和NodeJs開(kāi)發(fā)的應(yīng)用如何共用Session
這篇文章主要介紹了PHP和NodeJs開(kāi)發(fā)的應(yīng)用如何共用Session的相關(guān)資料及思路,需要的朋友可以參考下2015-04-04
express.js如何做mysql注入與node-mysql中防止SQL注入方法解析
這篇文章主要介紹了express.js如何做mysql注入與node-mysql中防止SQL注入方法,結(jié)合實(shí)例形式分析了express框架使用mysql數(shù)據(jù)庫(kù)過(guò)程中SQL注入的原理與防范技巧,需要的朋友可以參考下2023-05-05