你好,我想实现钉钉扫码登录第三方网站,选择方式是内嵌二维码方式登录授权,但是报错 iframe 跨域,具体信息如下: Get top window error, error: DOMException: Blocked a frame with origin "https://login.dingtalk.com" from accessing a cross-origin frame.
另外设置 width,height 好像不好使,iframe 确实变成设置的宽高了,但是二维码没有居中
请问该如何解决?
似乎是因为当前页面和内嵌的iframe存在跨域问题导致的。
为了解决该问题,您可以按照以下步骤进行调整:
在内嵌的iframe中添加“X-Frame-Options”响应头:在内嵌的iframe所在的页面中,添加“X-Frame-Options”响应头,设置为“ALLOW-FROM https://yourdomain.com”,其中“https://yourdomain.com”为您的网站域名。这样可以告诉浏览器,允许当前页面嵌入指定来源的iframe。
在当前页面中使用postMessage进行跨域通信:在当前页面和内嵌的iframe之间,使用postMessage进行跨域通信,通过发送消息的方式实现数据的传递和交互。具体实现方式可以参考MDN文档中的示例代码。
这个只能通过网页跳转和钉钉内置浏览器。https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information
此回答整理自钉群“钉钉开发者社区(互助群)”。
这个错误提示表明你在使用内嵌二维码方式登录授权时,遇到了跨域访问的问题。浏览器出于安全考虑,默认情况下不允许在一个源(origin)的 iframe 中访问另一个源的内容。
钉钉的登录页面位于 https://login.dingtalk.com
,而你的网站应该是位于不同的域名下。因此,当你尝试在你的网站中嵌入钉钉的登录页面的 iframe 时,浏览器会阻止跨域访问并报错。
解决这个问题的常见方法是使用授权回调方式。具体步骤如下:
在你的网站上提供一个「登录」按钮或其他触发登录的交互元素。
当用户点击登录按钮时,将用户重定向到钉钉的授权登录页 https://oapi.dingtalk.com/connect/oauth2/sns_authorize
,同时提供你的网站回调地址作为 redirect_uri
参数。
用户在钉钉的登录页上进行扫码登录后,会重定向回你的网站提供的回调地址,并且携带授权凭证(code)作为参数。
在你的网站的回调页中,通过后端请求钉钉开放平台的接口,根据授权凭证获取用户的详细信息(如用户ID、姓名等)。
通过这种方式,你可以实现钉钉扫码登录并在你的网站中获取到用户的授权信息,而不涉及跨域访问的问题。
具体的实现细节和代码可以查阅钉钉开放平台的相关文档和示例。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。