C # develop WeChat portals and applications (14)-use redirection in WeChat menu to get user data

I used to introduce the redirection operation in the menu in "C # development portal and application (11) -- Introduction to multiple menu representations" in a series of articles. Through this redirection operation, we can get a code value, and then get the user's openID, and then we can get more user information, which is used in many member information scenarios, this article describes how to quickly configure such menu links on the website, and how to obtain relevant user information in the background to achieve personalized display of page data.

As we know, custom menus are divided into two categories, corresponding to the Click type and View type, and redirection belongs to the View type, as shown below.

1. Redirect menu Configuration

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

The link for scope = snsapi_base 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 to scope = snsapi_userinfo 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 implemented by UrlEncode processing the given link address and assigning it to the redirect_uri parameter.

Because the link address is long, if you need to copy and modify the menu every time you configure the menu, it is very inconvenient. we can add a Button Function in the configuration interface of the custom menu, the content is processed to achieve the address translation we need. The operations on the custom menu on the portal application platform are implemented based on this idea.

By default, you only need to enter a url to be redirected, as shown below.

If you need to configure the link address of the redirected menu, call the convert redirection menu button and use the Script Function for conversion. The conversion result is as follows.

Function getUrlVars () {var vars = [], hash; var hashes = window. location. href. slice (window. location. href. indexOf ('? ') + 1 ). split ('&'); for (var I = 0; I

To achieve mutual conversion of link addresses (for convenience), we can determine whether the link address contains qq domain names.

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 enter, we should convert it to 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 redirection link must contain an appId of the current developer. This is not fixed. It is different for different developers. Here, dynamic MVC objects are used for binding: @ ViewBag. appid.

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

/// <Summary> /// default view control method /// </summary> /// <returns> </returns> public override ActionResult Index () {ViewBag. appid = GetAppId (); return View ();}

In this way, the configured redirect menu address list is as follows. We open the corresponding record details page, and you can use the function buttons in the page to convert the address of the Redirect menu at any time, for more information about the link.

3. Design and handling of redirect pages

After configuring the above link address, we need to add such a page in the website to process user information. In general, we may want to make it easier for users to view their basic information, it also serves to bind user personal data to users. For example, you can bind a mobile phone or Email address, or bind a user name related to the business system. In this way, you can quickly register a member or associate it with the background system.

The two User Information Display Interfaces I designed are as follows.

The two interfaces mainly use Jquery Mobile's related content and process the interface. The whole module uses the text message verification code to verify the user's Mobile phone, this allows for more efficient information Binding operations. Of course, you can also bind the user's account and password in combination with external systems, in this way, users can perform shopping, data maintenance, and business management operations on the micro-website platform. In fact, once the External System ID is bound, it provides a quick portal for external systems.

The specific content will be further introduced in the next article.

 

If you are interested in this series of C # development portals and applications, you can follow my other articles as follows:

C # development portal and application (13)-use geographic location Extension

C # development portal and application (12)-use voice processing

C # development portal and application (11)-menu presentation

C # development portal and application (10) -- synchronize user group information in the management system

C # development portal and application (9)-portal menu management and submission to server

C # development portal and application (8)-portal application management system function Introduction

C # development portal and application (7)-Multi-customer service functions and development integration

C # development portal and application (6)-portal menu management operations

C # development portal and application (5) -- User Group Information Management

C # development portal and application (4) -- Focus on the user list and detailed information management

C # development portal and application (3) -- Response to text messages and text messages

C # development portal and application (2) -- Message Processing and response

C # development portal and application (1) -- getting started with Interfaces