[Enterprise WeChat scan code login] How to implement the enterprise WeChat code scan login function in HTML webpages, graphic description and simple three-step implementation

Preface

Today, we have implemented the function of scanning the QR code to log in to the corporate WeChat on the web page
The requirement is that when logging in, you can click the icon of the corporate WeChat, and then the QR code for scanning the QR code to log in will pop up a>
Scan the QR code to log in, jump to get the code and send the code to the backend
The backend gets the corresponding user information based on the code, and then returns it to me, I log in Go to system homepage

renderings

Insert image description here

Code (very simple three steps)

Introduce files
Just import these three files. These are the dependent files related to Enterprise WeChat

    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
    <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

html part
This is the place for the square QR code. You don’t need to move it as it is. You can adjust the width and height.
This ID must be written, otherwise you won’t know where to put the QR code

<div id="login_container" style="height: 100%; width: 100%"></div>

js
This is how to generate a QR code, just write it in your function.
Note that if you write a div in the pop-up box. Then calling this after clicking on the pop-up box will not take effect.
You need to wrap this.$nextTick() in the outer layer. Because your dom has not been loaded yet, it cannot be bound

var wwLogin = new WwLogin({
    
    
                        id: 'login_container',
                        appid: 'ww8d0012380d423e87', // 填你的企业微信企业id
                        agentid: '1000112', // 填你的自建应用id
                        redirect_uri: 'http://zy.ceshi.com/login.html', // 填你的可信域名里的跳转链接，一定要有http或者https
                        state: '',
                        href: '',
                        lang: 'zh',
                        width: '100%'
                    })

Now you can use Enterprise WeChat to scan the code!

Where to get appid from

Insert image description here

Where to get agentid from

First you need to create an application yourself
Insert image description here
Then click on it. This is the ID at the top

important point:

You need to add your domain name as a trusted domain name within your self-built application, which is also a whitelist, otherwise it cannot be used.
Insert image description here