开发者社区> 问答> 正文

钉钉报错 iframe 跨域,该如何解决?

你好,我想实现钉钉扫码登录第三方网站,选择方式是内嵌二维码方式登录授权,但是报错 iframe 跨域,具体信息如下: Get top window error, error: DOMException: Blocked a frame with origin "https://login.dingtalk.com" from accessing a cross-origin frame.
fbaeaf7475deef3353816a2f1de6e940.png
另外设置 width,height 好像不好使,iframe 确实变成设置的宽高了,但是二维码没有居中
ca248ea8695455c1b0f57f4ce1f93816.png
请问该如何解决?

展开
收起
2401。 2023-07-17 21:25:22 1138 0
3 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    似乎是因为当前页面和内嵌的iframe存在跨域问题导致的。

    为了解决该问题,您可以按照以下步骤进行调整:

    在内嵌的iframe中添加“X-Frame-Options”响应头:在内嵌的iframe所在的页面中,添加“X-Frame-Options”响应头,设置为“ALLOW-FROM https://yourdomain.com”,其中“https://yourdomain.com”为您的网站域名。这样可以告诉浏览器,允许当前页面嵌入指定来源的iframe。

    在当前页面中使用postMessage进行跨域通信:在当前页面和内嵌的iframe之间,使用postMessage进行跨域通信,通过发送消息的方式实现数据的传递和交互。具体实现方式可以参考MDN文档中的示例代码。

    2023-07-29 09:03:57
    赞同 展开评论 打赏
  • 这个只能通过网页跳转和钉钉内置浏览器。https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information
    此回答整理自钉群“钉钉开发者社区(互助群)”。

    2023-07-18 19:52:30
    赞同 展开评论 打赏
  • 这个错误提示表明你在使用内嵌二维码方式登录授权时,遇到了跨域访问的问题。浏览器出于安全考虑,默认情况下不允许在一个源(origin)的 iframe 中访问另一个源的内容。

    钉钉的登录页面位于 https://login.dingtalk.com,而你的网站应该是位于不同的域名下。因此,当你尝试在你的网站中嵌入钉钉的登录页面的 iframe 时,浏览器会阻止跨域访问并报错。

    解决这个问题的常见方法是使用授权回调方式。具体步骤如下:

    1. 在你的网站上提供一个「登录」按钮或其他触发登录的交互元素。

    2. 当用户点击登录按钮时,将用户重定向到钉钉的授权登录页 https://oapi.dingtalk.com/connect/oauth2/sns_authorize,同时提供你的网站回调地址作为 redirect_uri 参数。

    3. 用户在钉钉的登录页上进行扫码登录后,会重定向回你的网站提供的回调地址,并且携带授权凭证(code)作为参数。

    4. 在你的网站的回调页中,通过后端请求钉钉开放平台的接口,根据授权凭证获取用户的详细信息(如用户ID、姓名等)。

    通过这种方式,你可以实现钉钉扫码登录并在你的网站中获取到用户的授权信息,而不涉及跨域访问的问题。

    具体的实现细节和代码可以查阅钉钉开放平台的相关文档和示例。

    2023-07-17 22:12:25
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
钉钉小程序——为工作方式插上翅膀 立即下载
钉钉客户端自动化的应用 立即下载
使命必达 —— 钉钉企业级 消息服务的机遇与挑战 立即下载