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

最新推荐文章于 2025-09-26 13:39:57 发布

原创最新推荐文章于 2025-09-26 13:39:57 发布 · 3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#企业微信 #html #前端 #vue.js #扫码登录

功能实现专栏收录该内容

157 篇文章

订阅专栏

前言

今天做到了企业微信在网页上扫码登录的功能
要求就是登录的时候可以点击企业微信的图标，然后弹出扫码登录的二维码
扫描二维码登录，跳转拿到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>

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

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

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%'
                    })

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

appid从哪里获取

在这里插入图片描述

agentid从哪里获取

首先你要自己创建一个应用
在这里插入图片描述
然后点进去，最上面这个id就这个了

注意点：

你需要在你的自建应用内部，把你的域名添加为可信域名，也就是白名单，不然无法使用
在这里插入图片描述