使用钉钉的扫码会出现多个回调(DTFrameLogin)

news/2025/3/20 0:12:35/

官方：地址

标题

  • 出现的问题
  • 解决后效果
  • 正常使用(按照官网的流程进行使用)
  • 自己的理解(路人可忽略该内容！)

出现的问题

1692861955468

解决后效果

1692861665687

正常使用(按照官网的流程进行使用)

fn.js
该文件就是钉钉官网的js文件，我下载到了本地
js文件下载地址

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1382)}({1382:function(e,t){var r=function(e,t){var r=e.match(new RegExp("[?&]"+t+"=([^&]+)"));return r?r[1]:null};window.DTFrameLogin=function(e,t,n,o){var i,u=e.id&&document.getElementById(e.id)||null,c=document.createElement("iframe");t.client_id&&t.redirect_uri&&t.response_type&&t.scope?u?(u.innerHTML="",u.appendChild(c),c&&c.contentWindow&&c.contentWindow.postMessage&&window.addEventListener?(c.src="https://"+((i=t).isPre?"pre-login":"login")+".dingtalk.com/oauth2/auth?iframe=true&redirect_uri="+i.redirect_uri+"&response_type="+i.response_type+"&client_id="+i.client_id+"&scope="+i.scope+(i.prompt?"&prompt="+i.prompt:"")+(i.state?"&state="+i.state:"")+(i.org_type?"&org_type="+i.org_type:"")+(i.corpId?"&corpId="+i.corpId:"")+(i.exclusiveLogin?"&exclusiveLogin="+i.exclusiveLogin:"")+(i.exclusiveCorpId?"&exclusiveCorpId="+i.exclusiveCorpId:""),c.width=""+(e.width||300),c.height=""+(e.height||300),c.frameBorder="0",c.scrolling="no",window.addEventListener("message",(function(e){var t=e.data,i=e.origin;if(/login\.dingtalk\.com/.test(i)&&t)if(t.success&&t.redirectUrl){var u=t.redirectUrl,c=r(u,"authCode")||"",d=r(u,"state")||"",s=r(u,"error")||"";c?n&&n({redirectUrl:u,authCode:c,state:d}):o&&o(s)}else o&&o(t.errorMsg)}))):o&&o("Browser not support")):o&&o("Element not found"):o&&o("Missing parameters")}}});

util.js
这个文件就是按照钉钉文档的流程编写的代码

//钉钉js文件地址
import './fn.js'
//跳转地址，需要在钉钉后台提前配置好，暂时未用到
const url = location.origin + '/#/'
export const BASE_URL = encodeURIComponent(url);
const appid_default = 'xxxxxx' //填写自己的钉钉应用id
const state_default = 'PC'const fn = () => {console.log('默认的回调');
}//INIT_DINDING 生成钉钉二维码 传递两个参数
//参数一，html标签id，该标签用来渲染二维码
//参数二，回调，在扫码完成后，进行的操作
export const INIT_DINDING = (id = "qr_code_div", callback = fn) => {const demo = new window.DTFrameLogin({id,width: 300,//二维码宽度height: 300,//二维码高度},{client_id: appid_default,redirect_uri: BASE_URL,client_id: appid_default,scope: 'openid',response_type: 'code',state: state_default,prompt: 'consent',},(loginResult) => {// const { redirectUrl, authCode, state } = loginResult;//loginResult字段说明____________________________//redirectUrl  重定向的地址//authCode     !!!很重要，这个就是钉钉返回的唯一标识//state        我上面写的PC,因此这个值就是PC，用来以后区别pc和app// 这里可以直接进行重定向// window.location.href = redirectUrl;// 也可以在不跳转页面的情况下，使用code进行授权//——————————————触发回调————————————————————————————————————callback && callback(loginResult)return},)
}

edit.vue
封装出现二维码的组件

<template><div><div class="qr_code_div" ref="qrCodeDiv" id="qr_code_div"></div></div>
</template>
<script>
//看准你自己的文件地址---------------
import { INIT_DINDING, SET_MESSAGE } from "./util.js";
export default {data() {return {};},mounted() {INIT_DINDING("qr_code_div",function () {console.log("this__________________这是扫码的回调");// fn=null});},created() {},methods: {},beforeDestroy(){}
};
</script>
<style lang="scss" scoped>
.qr_code_div {width: 300px;height: 300px;margin: 0 auto;
}
</style>

app.vue
使用组件

<template><div><button @click='blg = !blg'>{{blg}}</button><edit v-if="blg"></edit></div>
</template>
<script>
import edit from './edit'
export default {data() {return {blg:true};},components:{edit},mounted() {},created() {},methods: {},
};
</script>
<style lang="scss" scoped>
</style>```**按照上面的流程便可以正常的在h5使用钉钉的扫码组件了**#  修改后使用(解决方式)
##  **解决组件关闭后，多次开启组件会产生多个回调的bug**
在上方的edit.vue组件中进行修改```html
<template><div><div class="qr_code_div" ref="qrCodeDiv" id="qr_code_div"></div></div>
</template>
<script>
import { INIT_DINDING, SET_MESSAGE } from "../utils/init";
//1、步骤一
//修改之前的匿名回调
let fn = function () {console.log("this__________________这是扫码的回调");//2、步骤二//回调执行后把函数置空fn = null;
};
export default {data() {return {};},mounted() {//3、步骤三，传递修改后的回调INIT_DINDING("qr_code_div", fn);},created() {},methods: {},beforeDestroy() {//4、步骤四---组件销毁也把函数置空fn = null;},
};
</script>
<style lang="scss" scoped>
.qr_code_div {width: 300px;height: 300px;margin: 0 auto;
}
</style>

自己的理解(路人可忽略该内容！)

查看钉钉的打包后的源码，发现是通过绑定message监听来接受回调的
其实还有另外一种，就是在message事件执行后，立即取消绑定，只让他执行一次
但是考虑到是匿名事件，并且是打包后的代码，并没有进行更改
就使用了另一种方法，也就是上诉的方法
钉钉源码

! function (e) {var t = {};function r(n) {if (t[n]) return t[n].exports;var o = t[n] = {i: n,l: !1,exports: {}};return e[n].call(o.exports, o, o.exports, r), o.l = !0, o.exports}r.m = e, r.c = t, r.d = function (e, t, n) {r.o(e, t) || Object.defineProperty(e, t, {enumerable: !0,get: n})}, r.r = function (e) {"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})}, r.t = function (e, t) {if (1 & t && (e = r(e)), 8 & t) return e;if (4 & t && "object" == typeof e && e && e.__esModule) return e;var n = Object.create(null);if (r.r(n), Object.defineProperty(n, "default", {enumerable: !0,value: e}), 2 & t && "string" != typeof e)for (var o in e) r.d(n, o, function (t) {return e[t]}.bind(null, o));return n}, r.n = function (e) {var t = e && e.__esModule ? function () {return e.default} : function () {return e};return r.d(t, "a", t), t}, r.o = function (e, t) {return Object.prototype.hasOwnProperty.call(e, t)}, r.p = "", r(r.s = 1382)
}({1382: function (e, t) {var r = function (e, t) {var r = e.match(new RegExp("[?&]" + t + "=([^&]+)"));return r ? r[1] : null};window.DTFrameLogin = function (e, t, n, o) {var i, u = e.id && document.getElementById(e.id) || null,c = document.createElement("iframe");t.client_id && t.redirect_uri && t.response_type && t.scope ? u ? (u.innerHTML = "", u.appendChild(c), c && c.contentWindow && c.contentWindow.postMessage && window.addEventListener ? (c.src = "https://" + ((i = t).isPre ? "pre-login" : "login") + ".dingtalk.com/oauth2/auth?iframe=true&redirect_uri=" + i.redirect_uri + "&response_type=" + i.response_type + "&client_id=" + i.client_id + "&scope=" + i.scope + (i.prompt ? "&prompt=" + i.prompt : "") + (i.state ? "&state=" + i.state : "") + (i.org_type ? "&org_type=" + i.org_type : "") + (i.corpId ? "&corpId=" + i.corpId : "") + (i.exclusiveLogin ? "&exclusiveLogin=" + i.exclusiveLogin : "") + (i.exclusiveCorpId ? "&exclusiveCorpId=" + i.exclusiveCorpId : ""), c.width = "" + (e.width || 300), c.height = "" + (e.height || 300), c.frameBorder = "0", c.scrolling = "no", window.addEventListener("message", (function (e) {var t = e.data,i = e.origin;//这里这里-------------------------------看上面👆if (/login\.dingtalk\.com/.test(i) && t)if (t.success && t.redirectUrl) {var u = t.redirectUrl,c = r(u, "authCode") || "",d = r(u, "state") || "",s = r(u, "error") || "";c ? n && n({redirectUrl: u,authCode: c,state: d}) : o && o(s)} else o && o(t.errorMsg)}))) : o && o("Browser not support")) : o && o("Element not found") : o && o("Missing parameters")}}
});

http://www.ppmy.cn/news/1058328.html

相关文章

原生小案例：如何使用HTML5 Canvas构建画板应用程序

原生小案例：如何使用HTML5 Canvas构建画板应用程序

使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面&#xff0c;允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外&#xff0c;它还将通过解释…
阅读更多...
PHP竞赛管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

PHP竞赛管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 竞赛管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载地址 https://download.csdn.net/download/qq_41221322/88244066 二、功能介绍 后…
阅读更多...
什么是API网关，解释API网关的作用和特点？解释什么是数据流处理，如Apache Flink和Spark Streaming的应用？

什么是API网关，解释API网关的作用和特点？解释什么是数据流处理，如Apache Flink和Spark Streaming的应用？

1、什么是API网关&#xff0c;解释API网关的作用和特点&#xff1f; API网关是一种在分布式系统中的组件&#xff0c;用于管理不同系统之间的通信和交互。API网关的作用是在不同系统之间提供统一的接口和协议&#xff0c;从而简化系统之间的集成和互操作性。 API网关的特点包…
阅读更多...
SOLIDWORKS提高装配效率的方法：阵列特征驱动阵列

SOLIDWORKS提高装配效率的方法：阵列特征驱动阵列

相信SOLIDWORKS用户很喜欢SOLIDWORKS阵列命令&#xff0c;因为阵列可以提高设计效率&#xff0c;减少错误&#xff0c;修改也很方便&#xff0c;但是大家一般在零件里用阵列来阵列特征&#xff0c;在装配体里用阵列来阵列零件&#xff0c;那有没有办法用零件中的阵列特征来驱动…
阅读更多...
【Unity 工程化】unity一些资源路径用途

【Unity 工程化】unity一些资源路径用途

Resources Resources 目录用于存放可以通过 Unity 的 Resources.Load 函数进行加载的资源。这些资源会在构建时被打包为一个单独的资源包&#xff0c;因此它们必须满足一些 Unity 所要求的命名和文件夹结构规则。由于这些资源被打包在一起&#xff0c;因此在构建后的游戏中可以…
阅读更多...
c语言 - 函数的基本用法及传参

c语言 - 函数的基本用法及传参

函数 函数是一个完成特定功能的代码模块&#xff0c;其程 序代码独立&#xff0c;通常要求有返回值&#xff0c;也可以是 空值。一般形式如下: <数据类型><函数名称>( <形数说明> ) {语句序列&#xff1b;return[(<表达式>)];}函数的声明就是指函数原…
阅读更多...
LLaMA中ROPE位置编码实现源码解析

LLaMA中ROPE位置编码实现源码解析

1、Attention中q&#xff0c;经下式&#xff0c;生成新的q。m为句长length&#xff0c;d为embedding_dim/head θ i 1 1000 0 2 i d \theta_i\frac{1}{10000^\frac{2i}{d}} θi​10000d2i​1​ 2、LLaMA中RoPE源码 import torchdef precompute_freqs_cis(dim: int, end: i…
阅读更多...
vue若依导出word文件,简单的实现

vue若依导出word文件,简单的实现

首先前端导包,注意exportDocx的导包位置要修改成你自己的 import {exportDocx} from /utils/docUtil/docutil.js; import {addDays} from date-fns; import {listGongyi} from "/api/system/detail";然后新建一个测试按钮 <el-col :span"1.5"><…
阅读更多...
最新文章

Copyright @ 2022~2023