快捷導(dǎo)航

微信公眾號(hào)靜默網(wǎng)頁(yè)授權(quán)(前端開(kāi)發(fā)、本地調(diào)試及上線)圖文教程

更新時(shí)間：2024年09月03日 11:14:42 作者：詩(shī)思雅

這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)靜默網(wǎng)頁(yè)授權(quán)(前端開(kāi)發(fā)、本地調(diào)試及上線)的相關(guān)資料,靜默授權(quán)不需要用戶確認(rèn),只需要用戶訪問(wèn)某個(gè)網(wǎng)頁(yè),屬于嵌套在普通網(wǎng)頁(yè)里的授權(quán)形式,但是只能獲取到用戶的唯一標(biāo)示openid,無(wú)法獲取用戶的個(gè)人信息,需要的朋友可以參考下

首頁(yè)，要在公眾號(hào)后臺(tái)進(jìn)行配置

用管理員/開(kāi)發(fā)人員的賬號(hào)，登錄“微信公眾平臺(tái)”：https://mp.weixin.qq.com/

1、打開(kāi) 【設(shè)置與開(kāi)發(fā)】 -【開(kāi)發(fā)者工具】 -【web開(kāi)發(fā)者工具】

2、配置網(wǎng)站域名，就是上線后的后端接口域名，下方圖片中的業(yè)務(wù)域名、js接口安全域名、網(wǎng)頁(yè)授權(quán)域名 ，都需要配置

3、添加開(kāi)發(fā)者微信號(hào)，然后必須在“微信開(kāi)發(fā)者工具”登錄這個(gè)賬號(hào)，才能進(jìn)行本地調(diào)試

要求要關(guān)注“公眾平臺(tái)安全助手”公眾號(hào)，且不能開(kāi)免打擾

本地調(diào)試(微信開(kāi)發(fā)者工具)

配置公眾號(hào)平臺(tái)的測(cè)試賬號(hào)、調(diào)試

在【設(shè)置與開(kāi)發(fā)】-【開(kāi)發(fā)者工具】-【公眾平臺(tái)測(cè)試賬號(hào)】，點(diǎn)進(jìn)去。

在這里，微信官方提供了一個(gè)測(cè)試號(hào)，本地調(diào)試的話，先這個(gè)測(cè)試號(hào)來(lái)調(diào)網(wǎng)頁(yè)授權(quán)功能。后期部署到線上，再換成自己的公眾號(hào)的appId和配置線上后端的域名，這是后面本地調(diào)試沒(méi)問(wèn)題了，再放到線上到這一步。

在下方找到【網(wǎng)站授權(quán)獲取用戶基本信息】，點(diǎn)修改，輸入你本地啟動(dòng)的項(xiàng)目IP地址了，注意，只輸入IP，不要輸入http://，也不要端口，默認(rèn)端口是80

這是因?yàn)?strong>微信重定向不支持帶端口的訪問(wèn)域名，配置80端口，就可以只輸入網(wǎng)址，所以啟動(dòng)的項(xiàng)目端口也必須設(shè)置成80端口

最后一步，調(diào)試：打開(kāi)微信開(kāi)發(fā)者工具 -> 公眾號(hào)網(wǎng)頁(yè)項(xiàng)目 -> 在地址欄中輸入啟動(dòng)后的地址

代碼

window.location. +
        "http://192.168.03.130/${這里可以拼你要跳轉(zhuǎn)的路由，不拼則默認(rèn)跳到首頁(yè)，例如/pages/home}" +
        "&response_type=code&scope=snsapi_base#wechat_redirect";

參數(shù)	說(shuō)明
appid	公眾號(hào)的appid
redirect_uri	授權(quán)后重定向的回調(diào)鏈接地址，例如授權(quán)成功后，希望進(jìn)入到綁定手機(jī)號(hào)的頁(yè)面(假設(shè)是/pages/bindPhone)，就可以寫(xiě)`http://192.168.03.130/pages/bindPhone`
response_type	返回類(lèi)型，就填code就可以了號(hào)
scope	應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁(yè)面，可通過(guò)openid拿到昵稱(chēng)、性別、所在地。并且，即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息）
state	重定向會(huì)帶上state參數(shù)，可填a-zA-Z0-9，就是路由參數(shù)，例如state=123，那么在`/pages/bindPhone` 頁(yè)面中就可以拿到這個(gè)參數(shù)了
#wechat_redirect	必帶

到最后會(huì)跳轉(zhuǎn)到 /pages/bindPhone?code=CODE&state=123我們做這些授權(quán)的目的就是為了得到code，code這個(gè)玩意就是得到access_token的敲門(mén)磚，code每次授權(quán)都不一樣，每次的code只能使用一次，5分鐘過(guò)期

拿到code之后，就可以跟后端換token了~

一般會(huì)把獲取code 和授權(quán)跳轉(zhuǎn)到 https://open.weixin.qq.com 寫(xiě)在同一個(gè)頁(yè)面的第一個(gè)生命周期里，有code時(shí)，就去換token，沒(méi)有code就去授權(quán)

總結(jié)

到此這篇關(guān)于微信公眾號(hào)靜默網(wǎng)頁(yè)授權(quán)(前端開(kāi)發(fā)、本地調(diào)試及上線)的文章就介紹到這了,更多相關(guān)微信公眾號(hào)靜默網(wǎng)頁(yè)授權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: