Detailed steps for logon via QR code in WeChat development

In today's many websites, scanning and logon authentication on the open platform is used, which is equivalent to handing over identity authentication to more authoritative third parties for authentication, you do not need to store your password on the application website. This article describes how to perform website login based on the scan code of the open platform. In today's many websites, scanning and logon authentication on the open platform is used, which is equivalent to handing over identity authentication to more authoritative third parties for authentication, you do not need to store your password on the application website. This article describes how to perform website login based on the scan code of the open platform.

1. open platform certification

To use scan code to log on to the website, you must first perform the developer qualification certification for the open platform account, submit the relevant information, and deliver the authentication fee of 300 RMB per year.

The above interface is to pop up a layer in a page, and then request the QR code to display it, as shown in the following interface code.

        
            
Scan the user QR code for binding
            
                            
            
Close
        

When opening the above layer, we use JS to dynamically obtain the QR code for display. the specific JS code is as follows.

// BindWechat () {var url = "http://www.iqidi.com/H5/BindWechat? Id = @ Session ["UserID"] "; url = encodeURIComponent (url); $ (" # imgQRcode "). attr (" src ","/H5/QR? Url = "+ url); // open the binding window $ (" # pWechat "). dialog ('open '). dialog ('settitle', 'bind with the QR code ');}

The above JS is only used for front-end data request and display. the specific QR Action is actually the process of generating a QR code scan. this QR code is actually a general method, to build an address pointing to the bound account, so that we can determine the bound account. the QR code generation process is as follows.

////// Convert the QR code to the image format //////QR Code Connection///
 [HttpGet] public ActionResult QR (string url) {// initialize the QR code generation tool QRCodeEncoder qrCodeEncoder = new QRCodeEncoder (); qrCodeEncoder. QRCodeEncodeMode = QRCodeEncoder. ENCODE_MODE.BYTE; qrCodeEncoder. QRCodeErrorCorrect = QRCodeEncoder. ERROR_CORRECTION.M; qrCodeEncoder. QRCodeVersion = 0; qrCodeEncoder. QRCodeScale = 4; // Generate the QR code image var image = qrCodeEncoder. encode (url, Encoding. default); // Save as PNG to memory stream MemoryStream MS = new MemoryStream (); image. save (MS, ImageFormat. png); image. dispose (); return File (ms. toArray (), "image/Png ");}

To bind a user, we need to obtain the identity information of the current user. Therefore, we need to perform a redirection in the BindWeChat operation, as shown in the following interface.

////// Generate the bound address //////
 Public ActionResult BindWechat ()

In this function processing, we need to re-targeting the processing, we direct it to the BindAccount function, to facilitate the acquisition of the user's openid and other necessary information.

In addition, we established a connection with account information based on the application of the open platform. Therefore, the information for creating a database is as follows.

That is, a specific open platform application corresponds to a specific account, so that we can make full use of the configuration for processing.

The logic of BindAccount processing mentioned above is to obtain necessary information and then verify the identity information at the database layer. the specific code is as follows.

////// Bind the user ID //////Account ID///
 Public ActionResult BindAccount () {WebAppInfo appInfo = GetWebApp (ConfigData. webAppId); AccountInfo accountInfo = GetAccount (appInfo. accountNo); var htResult = GetOpenIdAndUnionId (accountInfo. uniteAppId, accountInfo. uniteAppSecret); // store openid to facilitate the use of string openid = htResult ["openid"]. toString (); var unionid = htResult ["unionid"]. toString (); var userid = Request. queryString ["id"]; var state = Request. QueryString ["state"]; if (! String. IsNullOrEmpty (openid )&&! String. IsNullOrEmpty (userid) {CommonResult result = BLLFactory
 
  
. Instance. bindUser (openid, unionid, userid. toInt32 (); if (result. success) {return BindSuccess () ;}else {return BindFail () ;}} else {throw new WeixinException ("unable to get openid" + string. format (", openid: {0}, userid: {1}", openid, userid ));}}
 

During the binding process, we need to consider binding the correct account, rebinding other accounts, and binding invalid accounts. if the correct account is successfully bound (the same result can be processed multiple times ), the page is as follows (the style of this interface adopts the weui style ).

This is similar to the preceding two-dimensional code display rules, but their connection addresses are different. the open platform interface is used here, that is, the open platform authentication interface we mentioned earlier.

The above code is as follows.

    
     
        
        
        
Close
    

The above code needs to introduce the JS file and display it using the jssdk api.