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

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 370 阅读时长 ≈ 1 分钟

这是在开发公司 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 字段中即可