使用企业微信扫码登录美化二维码

这是在开发公司 sso jssdk 时遇到的问题,登录方式增加了企业微信扫码登录,但是企业微信扫码的二维码我希望能美化下,文档说明如下,

参数说明

参数 必须 说明
href 自定义样式链接,企业可根据实际需求覆盖默认样式

可以提供相关 css 样式文件,并把链接地址填入 href 字段(只支持 https 协议的资源地址):

⚠️⚠️ 但是这不是我想要的啊 ⚠️⚠️

  • 需要提供 https 提供的 css 链接
  • 还要设置 CORS 头,避免跨域问题
  • css 万一修改的话感觉也很烦(虽然一般不会修改 😝)

在网上发现了新的方法在此记录下,我觉的很赞

通过访问 data-url 解决样式问题

step1:写一个 如下的脚本(qrcode.js)将刚才的 css 资源转换为 data-url

1
2
3
4
5
6
var fs = require('fs');
function base64_encode(file) {
var bitmap = fs.readFileSync(file);
return 'data:text/css;base64,' + new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./qrcode.css'));

step2:写一个 上面提到的 css(qrcode.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 样式自定义 */
.impowerBox .qrcode {
width: 200px;
}
.impowerBox .title {
display: none;
}
.impowerBox .wrp_code {
margin: 0 !important;
}
.impowerBox .info {
width: 200px;
margin: 0 auto;
}
.impowerBox .status {
text-align: center;
}
.impowerBox .status_succ {
margin: 0 auto;
}
.impowerBox .status_icon {
margin: 0;
}

step3:本机准备 node 环境

MAC 推荐 homebrew安装

1
brew install node

step4:本机执行如下命令

1
2
# 确保路径能读取到
node qrcode.js

image.png

如下图所示 红框中就是转换后的 data-url 直接放到 href 字段中即可