Implementing WeChat Login in ShopNC: Using Detector to Detect Browser-Related Flows

1. When implementing WeChat login in the WeChat client, the QR code scanning layer that pops up should be canceled, and it should directly redirect to the authorization page, as shown in Figure 1:

2. In a mobile browser, the QR code scanning layer pops up, and an error occurs after scanning, as shown in Figure 2:

3. Admin – Platform – Member – Account Sync – WeChat Official Account Platform, as shown in Figure 3:
Execute SQL:
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_isuse’,’1′)
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_appid’,’wx5c318e640e87f7e8′)
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_secret’,’1f436a3aa0dbfdac1c8e1c8f72d2fbec’)

4. Use Detector to detect the browser. Website: http://detector.dmolsen.com/ . It can automatically adapt to new browsers, versions, and devices by using a unique user agent string for each browser, and is built based on Modernizr, as shown in Figure 4:

5. Copy the directory lib/Detector to core/framework/Detector, as shown in Figure 5:

And set the directories: user-agents/core/, user-agents/extended/, config as writable;

6. The rules are formulated as follows. The code in the controller and template files is shown in Figures 6 and 7:

(1) PC, tablet: Pop up the QR code scanning layer (WeChat Open Platform, website application here);

(2) Mobile browser: Hidden;

(3) Mobile client: Directly redirect to the authorization page (WeChat Official Account Platform, service account here);

36kr.com: WeChat login is temporarily not supported on the mobile side, please log in using your bound phone number or email.
dianping.com: Hide the WeChat login button (this solution is adopted);

7. Under the mobile client, the code to directly redirect to the authorization page is shown in Figure 8:

8. Under the mobile client, the web page directly redirects to the authorization page, as shown in Figure 9:

9. An error occurred when committing to SVN, as shown in Figure 10:

the working copy at

is too old(format 10) to work with client version ‘1.8.10(r1615264)’ (expects format 31).you need upgrade the working copy first.

10. Delete all .svn directories under core/framework/Detector to prevent SVN conflicts. The commit was successful, as shown in Figures 11 and 12:

11. Under the Edge browser, an error occurs, as shown in Figure 13:

SCRIPT16389: Unspecified error.

12. Open the URL: http://detector.dmolsen.com/ , and I found this error occurs there as well, as shown in Figure 14:

13. The solution is to base it on $_SERVER[‘HTTP_USER_AGENT’]. If it is IE10, IE11, or Edge, do not use Detector to detect the browser, as shown in Figure 15: