钉钉/企业微信扫码登录

 1.调用扫码jsapi功能页

 
<template>
  <div>
    <div class="scan-code-login" @click="init">
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import { environmentJudge, QYWX, DINGTALK } from "@/utils/utils.js";//环境判断
import { getAuthorizations } from "@/utils/attachment.js";//jsapi鉴权
import * as dd from "dingtalk-jsapi"; // 钉钉jsapi




export default defineComponent({
  components: {},
  props: {},
  setup(){
    // 当前所处环境
    //info：钉钉和企业微信公用一套h5，故需要环境判断
    const environment = environmentJudge();

    onMounted(() => {
    })
    //企业微信扫码
    const scanCode = () => {
      wx.ready(function () {
        wx.scanQRCode({
          desc: "scanQRCode desc",
          needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType: ["qrCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
          success: (res) => {
            // 当needResult 为 1 时，扫码返回的结果
            var result = res.resultStr;
            console.log("扫码结果", result);
            dealResult(result)
          },
          fail: function (err) {
            console.log(err);
          },
        });
      });
      wx.error(function (res) {
        console.log("ready失败！");
      });
    };
     //钉钉扫码
    const ddScanCode = () => {
      dd.biz.util.scan({
        // sourceType: ['camera'], // 只启动相机扫描
        scanType: ["cameraScan"],
        type: 'qrCode', // type 为 all、qrCode、barCode，默认是all。
        onSuccess: function (data) {
          //onSuccess将在扫码成功之后回调
          /* data结构
        { 'text': String}
        */
          console.log('扫码结果',data)
          dealResult(data.text)
        },
        onFail: function (err) {
          console.log('扫码失败',err)
        },
      });
    };
    //扫码结果处理
    const dealResult = (res)=>{
        console.log('扫码结果处理',res)
    }
    //初始化
    const init = async ()=>{
        if (environment == QYWX) {
        //企业微信
        await getAuthorizations();
        scanCode();
        } else if (environment == DINGTALK) {
        //钉钉
        ddScanCode();
        }
    }
    return {
        init
    }
}
});
</script>
<style lang="less" scoped>
//扫码登录
.scan-code-login{
    width: 46px;
    height: 46px;
    background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 6px 0px rgba(40,41,43,0.11), 0px 0px 8px 0px rgba(41,41,44,0.08);
    border: 1px solid #FFFFFF;
    position: fixed;
    bottom:131px;
    right: 16px;
    border-radius: 50%;
    .icon-saoyisao{
        font-size: 24px;
        color: #131314;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
</style>

2.获取签名参数

//@/api/login/login.js


// 企业微信/钉钉 api鉴权
export function getAuthorization(url) {
  return request({
    url: '接口地址',
    method: 'POST',
    data: url
  })
}

3.jsapi鉴权

//@/utils/attachment.js 

// 企业微信、钉钉  JSAPI鉴权

import {getAuthorization} from '@/api/login/login.js'

// 企业微信api鉴权
export const getAuthorizations = async () => {
    const res = await getAuthorization({
        url: window.location.href,
        sysCode: 1,
    })
    console.log('res', res)
    wx.config({
      beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appId, // 必填，企业微信的corpID
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
      jsApiList: [
        'previewFile',
        'chooseImage',
        'getLocalImgData',
        'setKeepScreenOn',
        'agentConfig',
        'checkJsApi',
        'scanQRCode'
      ], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    })
    console.log('config结束')
  
    wx.ready(async function () {
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      console.log('ready')
    })
}

//钉钉api鉴权
export const dingtalkAuthentication = async () => {
    const res = await getAuthorization({
      url: window.location.href,
      sysCode: 2,
    })
    console.log('res', res)
    const corpId = localStorage.getItem('corpId')
    console.log('corpId', corpId)
  
    dd.config({
      debug:false,
      agentId: res.data.appId, // 必填，微应用ID
      corpId: corpId, //必填，企业ID
      timeStamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，自定义固定字符串。
      signature: res.data.signature, // 必填，签名
      type: 0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
      jsApiList: [
        'runtime.info',
        'biz.contact.choose',
        'device.notification.confirm',
        'device.notification.alert',
        'device.notification.prompt',
        'biz.ding.post',
        'biz.util.openLink',
      ], // 必填，需要使用的jsapi列表，注意：不要带dd。
    })
    dd.error(function (err) {
      alert('钉钉鉴权失败: ' + JSON.stringify(err))
    }) //该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
  }

 4.环境判断

//@/utils/utils.js

// 平台判断（企业微信、钉钉、其他）

import * as dd from "dingtalk-jsapi"; // 钉钉jsapi
export const QYWX = "QYWX";
export const DINGTALK = "DINGTALK";

// 是否企业微信
export function checkQywx() {
  return /wxwork/i.test(navigator.userAgent);
}

// 是否手机端
export function checkMobile() {
  return window.navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  );
}

// 环境判断(钉钉，企业微信，浏览器)
export function environmentJudge() {
  const isQywx = /wxwork/i.test(navigator.userAgent)
  if (isQywx) {
    // 企业微信
    return QYWX;
  } else if (dd.env.platform != "notInDingTalk") {
    // 钉钉
    return DINGTALK;
  }
  return "OTHERS";
}

 相关安装及开发文档说明

---

安装 dingtalk-jsapi

npm install dingtalk-jsapi

1. 需要鉴权的API使用时需要先调用dd.config

2. 无需鉴权的API使用时 import * as dd from "dingtalk-jsapi"; 即可

钉钉开放平台

https://open.dingtalk.com/document/orgapp/scan-barcodes-and-qr-codes

企业微信 | 开发者中心

企业微信扫一扫 - 文档 - 企业微信开发者中心 (qq.com)