卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 分享 › Web站,前端接入钉钉扫码登录!

Web站,前端接入钉钉扫码登录!

坚果大叔
2021-09-16 17:44:48分享阅读 4,387

具体代码逻辑部分,其他配置问题请查看钉钉开发者文档。

<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

<div class="ddlogin" id="ddlogin"></div>

mounted(){
  //code为传给后端的
  const { code } = this.$route.query
  if (code) {
    this.submitLogin(code)
  } else { //钉钉二维码
    this.ddLoginInit()
  } 
}


mounted(){
  //code是登录所需最终参数
  const { code } = this.$route.query
  if(code){ //登录接口
    this.goDdLogin(code)
  }else{ //钉钉二维码
    this.ddLoginInit()
  } 
},
methods: {
ddLoginInit(){
   let url = encodeURIComponent('换成自己的回调地址');
   let appid = '自己的AppID'
   let goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`)
   let obj = DDLogin({
       id:"login_container",
       goto: goto,
       style: "border:none;background-color:#FFFFFF;",
       width : "100%",
       height: "300"
   });
   let handleMessage =  (event) =>{
     let origin = event.origin;
     if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
       let loginTmpCode = event.data; 
       window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}`
     }
   };
 },
 goDdLogin(code){
  // 写自己的登录后的逻辑
}

钉钉登录
赞赏 赞(4)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
电梯惊魂呀,我也太难了。
上一篇
中秋记
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

评论已关闭

热门文章
又是周六的一天。
5.1游记
前端面试题整理
一些AList站点以及有趣的网址
JavaScript类型相关常用操作
一键解决VsCode官网下载慢的问题
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
免费领取一年Gemini Pro使用权益!!
2026-01-14 19:34:11
4,483 0
腾讯视频VIP会员免费领取!3-31天。
2025-07-16 20:55:40
4,224 1
吐血收集的1000+九号电动车提示音,免费领取!
2025-07-09 21:29:40
11,737 2
PC微信多开和防撤回~
2025-02-25 20:51:26
5,704 0
4
  • 4
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
347
文章
173
评论
436
喜欢