1. 程式人生 > >Chrome獲取微信授權,調試公眾號頁面

Chrome獲取微信授權,調試公眾號頁面

sta esp safari tab 通過 測試 ron 準備就緒 stat


1.目的

你可能遇到過這種情況,在微信中打開公眾號是這樣的。

技術分享圖片

復制鏈接,在chrome中打開是這樣的技術分享圖片

技術分享圖片

博主今天要解決的就是,如果在chrome中加載需要微信授權的頁面,至於加載成功後要幹嘛,測試?抓包?查看源碼?...這就是你的事情了,先來說說怎麽繞過這個驗證吧。

2.準備工具

工欲善其事必先利其器,先來說說工具。

工具名稱
用途
微信PC版 PC版的微信內置瀏覽器能獲取微信授權、復制頁面鏈接
Chrome瀏覽器 調試工具,我們的目的就是在chrome裏面繞過微信授權
Fiddler4
抓包工具,需要靠它的網絡抓包來獲取微信授權信息


3.實現方法

技術分享圖片準備就緒,開工。

01 開啟Fiddler4抓包

Fiddler4使用方法,可以自行百度,不過本文講述的使用很簡單,安裝-直接運行即可。

02 登錄微信PC版

Fiddler4運行後,手機微信掃碼登錄,然後點擊需要調試的公眾號內容。示例如下圖。

技術分享圖片技術分享圖片

03 抓取微信授權信息

這個時候看到Fiddler4裏面出現了很多網絡抓取數據,先看當前頁面的。

技術分享圖片

看到右側的參數沒?下一步我們就將在Chrome中使用到這些。

04 配置Chrome,繞過微信客戶端檢測

直接復制URL地址:http://play10.beetobees.com/play/tpl_airfight/lT0tW1gt/ 。粘貼到chrome,不用猜,肯定提示“請在微信客戶端中打開鏈接”。

處理方法,復制“User-Agent”參數, Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 MicroMessenger/6.5.2.501 NetType/WIFI WindowsWechat QBCore/3.43.901.400 QQBrowser/9.0.2524.400

為什麽會提示在微信客戶端中打開鏈接,原因就在User-Agent這個裏面,微信公眾號是通過這個參數來識別瀏覽器版本的,如果不是騰訊自家的瀏覽器就不給你授權。Chrome中配置User-Agent的方法。

F12,然後點擊下圖的按鈕,打開“NetWork conditions”選項卡。

技術分享圖片

技術分享圖片

按照下圖,填入“User-Agent”內容。

技術分享圖片

技術分享圖片

然後刷新下頁面。不會再出現“請在微信客戶端中打開鏈接”的提示了,但是卻出現了空白,title變成了“出錯了”。原因很簡單,瀏覽器獲取不到微信的授權信息,解決方法見第5步。

05 獲取微信授權真實地址

微信授權機制是這樣的,瀏覽器請求,微信驗證,然後通過後返回到請求頁面,所以是我們的鏈接地址不對,那真實的鏈接在哪兒呢?看下圖。、

技術分享圖片

緊挨著上一個抓取記錄下面有一個open.weixin.qq.com的記錄,查看下URL:https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxxxxxx&redirect_uri=http%3A%2F%2Fplay10.beetobees.com%2Fplay%2Ftpl_airfight%2FlT0tW1gt%2F&response_type=code&scope=snsapi_userinfo&state=545e667db4256209ca5be9f4d6e44c89&uin=NjMwMTIzNDQw&key=4322f3c03a626475293b9c1bf1d1c80b5adc689b8a4701331f9c139bef6ba8904f7155518d63ba539966f0c7ec4c2074c393c784366971c89c93a2f085ac2cef4570a99b2b19e47ae0248288ee7d4edf&version=62060526&pass_ticket=T%2FoANTyAIgN9WXrK5OpCaHOQqk15QjaBB3z94VvCz6oSsItFxZ8KFSCqRGAiMEsy

裏面的redirect_uri參數就是訪問的頁面,我們把這個地址復制到剛才的Chrome裏面,訪問,結果如下圖。

技術分享圖片 技術分享圖片

06 收工

到了這一步,後面的操作就看自己了。用類似方法,基本可以繞過所有的微信公眾號授權。打卡收工技術分享圖片


  更多前端、GIS相關博客,請訪問我的個人博客88gis.cn查看更多


Chrome獲取微信授權,調試公眾號頁面