C# develops WeChat portals and applications and uses redirection to obtain user data in WeChat menus

We know that WeChat’s custom menus are divided into two categories, corresponding to Click type and View type respectively, and redirection is a type of View type, as shown below.

1. Configuration of WeChat redirection menu

The WeChat redirection menu is to let the WeChat server jump by passing in an address parameter. Its main rules are as follows.

The link for scope=snsapi_base method is as follows:

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

The link for scope=snsapi_userinfo method is as follows:

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

These two menu links are mainly given to us The link address is processed by UrlEncode, and then assigned to the parameter redirect_uri.

Since the link address is relatively long, it is very inconvenient to copy it and modify it every time when configuring the menu. We can add a button function in the configuration interface of the custom menu to modify the content. Processing, in order to achieve the address conversion we need, my portal application platform's operation of custom menus is based on this idea.

By default we only need to fill in a url address that needs to be redirected, as shown below.

If you need to configure the redirected menu link address, then call the [Convert Redirect Menu] button operation and use the script function to convert. The converted result As follows.

It turns out that the background javascript is used to implement URL transcoding of parameters, and the AppId of the background needs to be obtained so that a complete address connection can be constructed.

2. Implementation code of script conversion operation

As mentioned earlier, the first is to implement URL transcoding, and the second is to obtain the AppId of the background, and then generate a complete URL. . In order to avoid repeated research, I posted this part of the code and study it together.

Before using it, we need to pay attention to another issue, that is, after redirecting to the specified page, this page will have a code parameter. This parameter is very important. We need to get it, of course through javascript. Get the corresponding code parameters.

This logic can be implemented using a script function, as shown below

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(&#39;=&#39;);
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

After defining this function, we re- In the directed page, the operations to obtain the code parameters are as follows.

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

Let’s put this aside first, let’s first discuss how to convert the link address into the required link address operation.

In order to achieve mutual conversion of link addresses (for convenience), we can determine whether the link address contains the domain name of 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);
   }
}

If it is a normal link we entered, then it should be converted into a redirected link address, as shown below.

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);
                }

The redirect link needs to have an appId of the current WeChat development user. This is not fixed and is different for different developers. The dynamic object of MVC is used here for binding: @ViewBag.appid.

In the corresponding MenuController controller, just assign it a value.

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

The redirect menu address list after configuration is as follows. We open the corresponding record details page and can use the function buttons on the page. Convert the address of the redirect menu at any time to facilitate understanding of detailed link content.

3. Design and processing of redirect pages

After configuring the above link address, we need to add such a page to the website to process user information. Under normal circumstances, we may do it for It is convenient for users to check their basic information on WeChat, and it is also used to bind users’ personal data. For example, users can bind mobile phones, email addresses and other operations, and can also bind user names related to business systems. In this way, users can quickly register as members or associate with the backend system.

The two user information display interfaces I designed are as follows.

These two interfaces mainly use Jquery Mobile related content to process the interface. The entire module combines the SMS verification code method to verify the user's mobile phone, so that information can be realized more efficiently. Accurate binding operation, of course, can also be combined with external systems to bind the user's account and password, so that the user can enter the micro website platform on WeChat for shopping, data maintenance, business management and other operations. In fact, once the ID of the external system is bound , which provides a quick access to external systems.

For more C# development of WeChat portals and applications that use redirection to obtain user data in the WeChat menu, please pay attention to the PHP Chinese website!