【企业微信扫码登录】html网页中如何实现企业微信扫码登录功能，图文描述简单三步实现

前言

今天做到了企业微信在网页上扫码登录的功能
要求就是登录的时候可以点击企业微信的图标，然后弹出扫码登录的二维码
扫描二维码登录，跳转拿到code然后把code发给后端
后端根据code获取对应用户信息，然后返回给我，我登录到系统首页

效果图

代码(很简单的三步)

引入文件
把这三个文件引入进去就可以了，这是企业微信相关的依赖文件

    <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>
1
2
3

html部分
这里是方二维码的地方，就这样不用动，可以调一下宽高。
这个id一定要写，不然二维码不知道放哪里

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

js
这个就是生成二维码的方法，就写在你的函数中就行了。
注意一点，如果你是弹框中写了div。那么点击弹框显示后调用这个是不生效的。
需要在外层套一个this.$nextTick()。因为你的dom还没有加载完所以绑定不到

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%'
                    })
1
2
3
4
5
6
7
8
9
10

到这里可以用企业微信扫码了！

appid从哪里获取

agentid从哪里获取

首先你要自己创建一个应用

然后点进去，最上面这个id就这个了

注意点：

你需要在你的自建应用内部，把你的域名添加为可信域名，也就是白名单，不然无法使用