electron 第三方登录（钉钉）

o_oppp

已于 2023-12-15 09:57:20 修改

阅读量1k

点赞数 1

文章标签： electron 钉钉前端

于 2022-11-23 10:06:54 首次发布

本文链接：https://blog.csdn.net/o_oppp/article/details/127993894

版权

前言

前段时间在研究第三方登录（钉钉），用户操作登录成功之后会有一个回调地址，这个回调地址就是调我们的页面地址，并且返回临时或永久的code参数，拿这个参去调接口拿用户数据。
web端接入的比较顺利，但是我们有一个桌面应用端是用electron写的，electron没有地址…它没有地址啊，无法回调就没有办法拿code，根本进行不下去，没办法只能另寻他路。
钉钉实现登录第三方网站

解决方法

1、写一个页面a，放到服务器，让第三方回调这个页面地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        #login_container{
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="cc"></div>
</body>

<script>
    window.onload = function () {
        let str = window.location.href
        //展示地址的，只是方便调试
        document.getElementById('cc').innerHTML = str
        if (window.location.href.indexOf('code') != -1||window.location.href.indexOf('authCode') != -1) {
        //这是electron能接到参数的关键
        //postMessage中所接收的参数，第一个参数就是你要像另外一个窗口传递的数据（只能传字符串类型），第二个参数表示目标窗口的源，协议+主机+端口号，是为了安全考虑，如果设置为“*”，则表示可以传递给任意窗口。
            window.parent.postMessage(window.location.href, '*');
        }
    }
</script>

</html>

2、然后在electron中使用iframe，调钉钉页面，钉钉回调页面a并返回code，拿到code就可以调后端接口，做其他功能了。

 <iframe
        @load="loading = false"
        :src="src"
        frameborder="0"
        ref="ddiframe"
        id="ddiframe"
        style="marigin: 0 auto; width: 100%; height: 500px"
      ></iframe>

<script>
//钉钉回调地址
let url = 'https:****a.html'
export default {
  data() {
    return {
      loading: true, //加载
      //client_id应用的AppKey 
      src: `https://login.dingtalk.com/oauth2/challenge.htm?response_type=code&scope=openid&prompt=consent&client_id=***&redirect_uri=${url}`,
    }
  },
  mounted() {
    //钉钉二维码
    this.$nextTick(() => {
      window.addEventListener(
        'message',
        (event) => {
          if (event.data && event.data.indexOf(url) != -1) {
            var urlStr = event.data;
            // 获取URL中的参数部分
            var params = urlStr.split('?')[1];
            // 将参数部分按照&符号分割成数组
            var paramsArray = params.split('&');
            var paramsObj = {};
            // 遍历参数数组
            for (var i = 0; i < paramsArray.length; i++) {
              // 将每个参数按照=符号分割成键值对
              var param = paramsArray[i].split('=');
              // 将键值对存储到对象中
              paramsObj[param[0]] = param[1];
            }
            //我拿的值为authCode(需要跟具实际情况自行取值)
            console.log(paramsObj)
            //清除监听
            document.body.removeEventListener('message', () => {}, false)
          }
        },
        false
      )
    })
  },
}
</script>