Vue implements the web-side enterprise WeChat scan code login function (front-end part)

 Today, the use of corporate WeChat in the daily work of enterprises is becoming more and more frequent and important. Many companies have used corporate WeChat for daily work arrangement management. In this context, the demand for interconnection between various systems and corporate WeChat is also increasing. Today I will talk about a relatively common requirement: to scan the QR code of corporate WeChat on the front end of the web page to log in to the system. The following is the implementation method under the vue framework, mainly the front-end part.
 To fulfill this requirement, there are two key technical issues that need to be solved: one is how to generate the QR code of the enterprise WeChat on the web page. The second is how to know which user scanned the QR code after the user scans the code, or how to tell the backend which user scanned the QR code. Let's talk about it step by step.

1. How to generate a QR code

 Before introducing it in detail, let me put a link to the official document. After all, no matter how you introduce it, the official document shall prevail. Construct a scan code login link . The following are the specific implementation steps:

1. Import the JS file
 Find the index.html file in the public folder in your project, import the js file of WeChat Work into the code, and add the following code:

<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

 Note that the imported js files actually have different versions. As of January 11, 2023, the official version of the package is 1.2.7, but there may be updates in the future. It is best to read it on the official website before introducing it. A glance is not the latest version.

2. Display the QR code
 In the place where the enterprise WeChat QR code needs to be displayed (usually the login page), create an area to display the QR code, and pay attention to the id value

<div id="login_container" style="height: 400px; width: 400px"></div>

 Then the example of the JS object of WeChat Enterprise, which is displayed here, is directly written in created(), and it is best to encapsulate it into a method.

created() {
    
    
    this.wwLogin = new WwLogin({
    
    
      id: 'login_container',
      appid: '', // 填你的企业微信企业id
      agentid: '', // 填你的自建应用id
      redirect_uri: '', // 填你的可信域名里的跳转链接，一定要有http或者https
      state: '',
      href: '',
      lang: 'zh'
    })
  }

 Then let’s talk about the parameters, among which id, appid, agentid, redirect_uri, these four are required, and the last three can also generate a QR code, if you have other needs, you can learn more about it. Among them, the first id must correspond to the id of the area we created to display, otherwise the QR code does not know where to display it. The remaining three parameters need to be taken in the management background of WeChat Enterprise. If someone else can tell you these three values ​​at this time, then you can see the QR code by running it directly. The effect is as follows:

 But if the developer currently has no way to get these values, or wants to create a new enterprise, the blogger will show how to configure and get these parameters in the third step.
 Step 2 There is also a small optimization to share here. In some companies with certain code specification requirements, after the JS object instantiation is completed, the code will prompt 'WwLogin' is not defined. Although it can run, but look Still annoying. In this case, you can add the following code to the .eslintrc.js file and run it again:

globals: {
    
    
    'WwLogin': true
  }

3. Enterprise WeChat background management platform configuration
 In this step, I will explain how to configure the background management settings of Enterprise WeChat, and then talk about where to get the three required values ​​that are missing in the second step. First, you need to log in to the enterprise WeChat background management platform, the official address: Enterprise WeChat . After clicking the enterprise login in the upper right corner, use the enterprise WeChat to scan the code to enter the management platform. It should be noted here that only the administrator role of the enterprise can log in to the management platform. If a developer does not have permission, he needs to find someone to scan the code or ask the administrator to help him grant permission. If you don’t have an enterprise or want to get a test organization to test it first, you can create an enterprise organization with individuals as the main body on the enterprise WeChat app.

 The management platform on login is as shown in the figure below:

 Then find the enterprise id under "My Enterprise", which is the appid parameter in the second step.

 Create a self-built application in the application management, and then click in, there is an AgentId in it, which is the agentid parameter in the second step.

 Then on this page, scroll to the bottom, find "Enterprise WeChat authorization login", click "Settings", click "Set authorization callback domain", fill in the callback address, this is the redirect_uri parameter in the second step, Of course, other routing addresses can be spliced ​​after the callback address, but the domain name and port number must be consistent with the configuration.


 The above is the main configuration of the enterprise WeChat management platform. After adding these configurations, you can see the QR code on the front end.

2. How to know which user is logged in

 After explaining how to generate a QR code, here is how to know which user scanned the code to log in. After the user scans the code and clicks to confirm the login, WeChat will return the address configured by redirect_uri with parameters. The following is a path I used to test the return:

http://test.com/wechatAuth?code=x4Wie3KgsS3_311mrsiB_WdC1MzsJ&appid=wwcffb38

 Among them, http://test.com/wechatAuth is the redirect_uri I configured, and the value in the following code is equivalent to the identity of my log-in person. We need to intercept this.$route.query.code like this to get Get the value of the code and pass it to the backend. The backend finally gets the user according to the relevant interface of the enterprise WeChat: https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=ACCESS_TOKEN&code=CODE After knowing the userid, the identity of the logged-in user can be determined, and the identity information of the logged-in user can be returned to the front-end, and the front-end can complete the login.

 Summary: This article mainly introduces the function of the front-end to realize the WeChat scan code login function of the web-side enterprise through Vue. It does have some limitations, and the content of the back-end part is not introduced. But through the content introduced earlier in the article, front-end developers can easily realize the function of enterprise WeChat scan code login. If you have time later, if you have time to see if you can introduce the operation of the back-end when logging in, I hope this article can help everyone ,Thanks!