C#開發(fā)微信門戶及應用(14)-在微信菜單中采用重定向獲取用戶數據
2021-07-22 18:00:55

我曾經在系列文章中的《C#開發(fā)微信門戶及應用(11)--微信菜單的多種表現方式介紹》中介紹了微信菜單里面的重定向操作，通過這個重定向操作，我們可以獲取一個code值，然后獲取用戶的openID，進而就能獲取到更多的用戶信息，這個在會員信息的場景里面用的很多，本篇介紹在網站中迅速配置這樣的菜單鏈接，并介紹如何在后臺獲取相關的用戶信息，實現頁面數據個性化的展現操作。

我們知道，微信的自定義菜單分為兩大類，分別對應Click類型和View類型的，而重定向屬于View類型的一種，如下所示。

1、微信重定向菜單的配置

微信重定向的菜單，就是通過傳入一個地址參數，讓微信服務器進行跳轉，它的主要規(guī)則如下所示。

對于scope=snsapi_base方式的鏈接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3d81fc2886d86526&redirect_uri=http%3A%2F%2Fwww.iqidi.com%2Ftestwx.ashx&response_type=code&scope=snsapi_base&state=123#wechat_redirect?

而對于scope=snsapi_userinfo方式的鏈接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3d81fc2886d86526&redirect_uri=http%3A%2F%2Fwww.iqidi.com%2Ftestwx.ashx&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

這兩個菜單鏈接主要就是對我們給定的鏈接地址進行UrlEncode處理，然后把它賦值給參數redirect_uri實現的。

由于鏈接地址比較長，如果每次需要在配置菜單的時候，都復制過來修改，非常不方便，我們可以在自定義菜單的配置界面里面，增加一個按鈕功能，對內容進行處理，以便實現我們需要的地址轉換，我的門戶應用平臺對自定義菜單的操作就是基于這個思路實現。

默認我們只需要填寫一個需要重定向的url地址就可以了，如下所示。

如果需要配置成重定向的菜單鏈接地址，那么調用【轉換重定向菜單】按鈕操作，使用腳本函數進行轉換就可以了，轉換后的結果如下所示。

原來就是利用后臺的javascript實現參數的URL轉碼，還需要獲取后臺的AppId，這樣才能構造成完整的地址連接。

2、腳本轉換操作的實現代碼

前面說了，第一是需要實現URL轉碼，第二是獲取后臺的AppId，然后生成一個完整的URL就可以了。為了避免大家的重復研究，我把這部分代碼貼出來一起學習下。

在使用前，我們還需要注意一個問題，就是重定向到指定頁面后，這個頁面會帶有一個code的參數，這個參數非常重要，我們需要獲取出來，當然也是通過javascript來獲取對應的code參數了。

這個邏輯可以用一個腳本函數來實現，如下所示

        function getUrlVars(){
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

定義了這個函數后，我們在重定向的頁面里面，可以獲取code參數的操作如下所示。

var code = getUrlVars()["code"];

先放下這些，我們先來討論如何把鏈接地址轉換為需要的鏈接地址操作。

我們?yōu)榱藢崿F鏈接地址的互相轉換（為了方便），我們可以判斷鏈接地址是否含有qq的域名就可以了。

if (url.indexOf("https://open.weixin.qq.com/connect/oauth2/authorize?") == 0) {
   var redirect_uri = getUrlVars(url)["redirect_uri"];
   if (redirect_uri != "") {
       var newUrl = decodeURIComponent(redirect_uri);
       $("#" + ctrlName).val(newUrl);
   }
}

而如果是我們輸入的正常鏈接，那么就應該把它轉換為重定向的鏈接地址，如下所示。

else {
                    var newUrl = encodeURIComponent(url);
                    var reNewUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=@ViewBag.appid&redirect_uri=" + newUrl + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
                    $("#" + ctrlName).val(reNewUrl);
                }

其中重定向鏈接需要帶有一個當前微信開發(fā)用戶的appId,這個不是固定的，是不同的開發(fā)人員都不一樣的東西，這里使用了MVC的動態(tài)對象進行綁定：@ViewBag.appid。

在對應的MenuController控制器里面，給它賦值就可以了。

        /// <summary>
        /// 默認的視圖控制方法
        /// </summary>
        /// <returns></returns>
        public override ActionResult Index()
        {
            ViewBag.appid = GetAppId();
            return View();
        }

這樣配置后的重定向菜單地址列表就如下所示了，我們打開對應的記錄詳細頁面，可以通過頁面里面的功能按鈕，隨時對重定向菜單的地址進行轉換，方便了解詳細的鏈接內容。

3、重定向頁面的設計及處理?

配置了上面的鏈接地址后，我們需要在網站里面增加這樣的一個頁面進行處理用戶的信息，一般情況下，我們可能是為了方便用戶查看自己的微信基礎信息，也為了給用戶綁定用戶個人數據使用的用途的，如用戶可以綁定手機、Email郵箱等操作，還可以綁定和業(yè)務系統(tǒng)相關的用戶名。這樣用戶就可以快速注冊會員或者和后臺的系統(tǒng)進行關聯了。

我設計的兩個用戶信息展示界面如下所示。

這兩個界面主要使用了Jquery Mobile的相關內容，對界面進行了處理，整個模塊結合了短信驗證碼的方式，對用戶的手機進行驗證處理，這樣能夠更高效的實現信息準確的綁定操作，當然，還可以結合外部系統(tǒng)，綁定用戶的賬號密碼，這樣用戶可以在微信進入微網站平臺進行購物、數據維護、業(yè)務管理等操作了，其實一旦綁定外部系統(tǒng)的ID，也就是提供了一個快速進行外部系統(tǒng)的入口了。

??

具體的內容在下一篇繼續(xù)介紹了。?

?

如果對這個《C#開發(fā)微信門戶及應用》系列感興趣，可以關注我的其他文章，系列隨筆如下所示：

C#開發(fā)微信門戶及應用(20)-微信企業(yè)號的菜單管理

C#開發(fā)微信門戶及應用(19)-微信企業(yè)號的消息發(fā)送（文本、圖片、文件、語音、視頻、圖文消息等）

C#開發(fā)微信門戶及應用(18)-微信企業(yè)號的通訊錄管理開發(fā)之成員管理

C#開發(fā)微信門戶及應用(17)-微信企業(yè)號的通訊錄管理開發(fā)之部門管理

C#開發(fā)微信門戶及應用(16)-微信企業(yè)號的配置和使用

C#開發(fā)微信門戶及應用(15)-微信菜單增加掃一掃、發(fā)圖片、發(fā)地理位置功能

?C#開發(fā)微信門戶及應用(14)-在微信菜單中采用重定向獲取用戶數據

C#開發(fā)微信門戶及應用(13)-使用地理位置擴展相關應用

C#開發(fā)微信門戶及應用(12)-使用語音處理

C#開發(fā)微信門戶及應用(11)--微信菜單的多種表現方式介紹

C#開發(fā)微信門戶及應用(10)--在管理系統(tǒng)中同步微信用戶分組信息

C#開發(fā)微信門戶及應用(9)-微信門戶菜單管理及提交到微信服務器

C#開發(fā)微信門戶及應用(8)-微信門戶應用管理系統(tǒng)功能介紹

C#開發(fā)微信門戶及應用(7)-微信多客服功能及開發(fā)集成

C#開發(fā)微信門戶及應用(6)--微信門戶菜單的管理操作

C#開發(fā)微信門戶及應用(5)--用戶分組信息管理

C#開發(fā)微信門戶及應用(4)--關注用戶列表及詳細信息管理

C#開發(fā)微信門戶及應用(3)--文本消息和圖文消息的應答

C#開發(fā)微信門戶及應用(2)--微信消息的處理和應答

C#開發(fā)微信門戶及應用(1)--開始使用微信接口

?