electron 第三方登录（钉钉）

前言

前段时间在研究第三方登录（钉钉），用户操作登录成功之后会有一个回调地址，这个回调地址就是调我们的页面地址，并且返回临时或永久的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 = strif (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应用的AppKeysrc: `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) {let str = event.data//我拿的值为authCode，字符串截取出来的(需要跟具实际情况)str = str.substring(event.data.indexOf('?authCode='))str = str.substring(10, 42)console.log(str, 'authCode值', event)//清除监听document.body.removeEventListener('message', () => {}, false)}},false)})},
}
</script>

electron 第三方登录（钉钉）相关推荐

钉钉扫码登录第三方_在钉钉发布公司重要文件，真的安全吗？
钉钉以疫情在家办公为契机,加上"幸运地"被教育部"选中",在2月5日,钉钉下载量首次超过微信,跃居苹果App Store排行榜第一,并打破App Store记录 ...
钉钉授权第三方WEB网站扫码登录
一.阅读开发文档首先阅读钉钉官方的开发文档,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息. 二.准备工作 ...
钉钉扫码登录第三方_e签宝联合钉钉升级产品功能，共建企业服务生态闭环
钉钉微应用更新了,e签宝助力升级.互联网时代下,传统模式的"稳定"已然成为历史,客户的需求在不断变化,我们创新的脚步也从未停止. e签宝携手钉钉,双方着力共建开放.共生.多赢的企业 ...
使用第三方账号认证（一）：钉钉扫码登录
一.需求要使用钉钉扫码登录,也就是需要把kintone的登录画面替换成扫码画面. 而在扫码后,则需要获取钉钉用户的身份信息并将其转化为对应的kintone用户. 最后服务端生成相应的session, ...
Android 钉钉第三方登录问题
使用钉钉第三方登录第一步去钉钉开发者平台注册App 钉钉开发者平台地址注册自己的应用 *获取到自己的AppId 和 AppKey 钉钉开发者文档实现步骤 1.注入依赖 implementati ...
OAUTH之钉钉第三方授权登录
文章目录 OAUTH之钉钉第三方授权登录前期用到的工具获取access_token 请求地址请求方法响应扫码 / 使用账号密码 -- 获取临时 code 参数重要说明直接访问扫码登录 ...
钉钉第三方登录，多地址授权
多地址授权在文章最后. 官方文档: 扫码登录第三方网站剂的使用第二种方式,方便前后端无状态的情况下使用state进行传递参数. 方式二支持网站将钉钉登录二维码内嵌到自己页面中步骤1:在页面中先引 ...
企业自建应用使用钉钉账号密码登录（钉钉第三方登录）
1.场景描述我们开发了一个钉钉应用,但是客户要求手机端要使用微信.这样的话,我们给客户的解决方案是后台管理功能监控功能使用的钉钉(主要是依托于钉钉的人员,部门,角色的管理,我们应用本身就没有做相关的 ...
钉钉一键登录第三方网站
钉钉一键登录第三方网站序钉钉开发者后台 H5微应用应用代码开发登录页面login.html 登录实现LoginController.java pom.xml增加一键登录效果展示序企业内部 ...

electron 第三方登录（钉钉）

前言

解决方法

electron 第三方登录（钉钉）相关推荐

最新文章

热门文章