前端angular实现企业微信扫码登录

企业微信

字数统计: 599阅读时长: 2 min

 2020/03/13   Share

需求是在浏览器端实现企业微信扫码登录

首先在企业微信api 看下需要准备些什么内容

本项目是需要构造内嵌登录二维码

所以直接翻到构造内嵌二维码这部分

步骤一：引入JS文件

<!-- 在 index.html 引入 -->
<head>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"
    charset="utf-8"></script>
</head>

步骤二：在需要的页面实例化JS对象

1 2	<!-- login.html 中定义需要显示二维码的容器 --> <div class="qr" id="qr"></div>

// login.ts 
 public getQRcode = () => {
    window.WwLogin({
      "id": "qr",  //显示二维码的容器id
      "appid": "wxxxxxxxxxx",//企业微信的CorpID，在企业微信管理端查看
      "agentid": "xxxxx",  //授权方的网页应用ID，在具体的网页应用中查看
      "redirect_uri": "http://pm.trendzone.com.cn:8889/laowu/api/yanfaLogin/login",   //重定向地址，需要进行UrlEncode
      "state": "20200110",   //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
      "href": "data:text/css;base64,LndycF9jb2Rlew0KICBtYXJnaW4tdG9wOiA2cHggIWltcG9ydGFudDsNCn0=",    //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
    });
  }

关于 `href` 样式参数的解决方法

官方文档是写的是：

如果企业觉得企业微信团队提供的默认样式与自己的页面样式不匹配，可以自己提供样式文件来覆盖默认样式。举个例子，如企业觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段（只支持https协议的资源地址）

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none !important}
.impowerBox .status {text-align: center;}

但是这种方式实在是比较麻烦总不见得调一次样式

就上传以一次css文件到服务器吧效率太低了

所以就采用样式代码进行 base64 加密的方式放到参数中

先根据实际项目的需求来调整样式后

把所修改的样式内容复制

可使用站长工具中转换获取加密后的代码

href参数填写：data:text/css;base64, 逗号后面跟上加密后的代码即可

Next Post

node基础
Previous Post

JS基础知识练习题

CATALOG

1. 步骤一：引入JS文件
2. 步骤二：在需要的页面实例化JS对象
3. 关于 href 样式参数的解决方法



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

前端angular实现企业微信扫码登录

步骤一：引入JS文件

步骤二：在需要的页面实例化JS对象

关于 href 样式参数的解决方法

关于 `href` 样式参数的解决方法