在反应应用中将Google日历作为iframe嵌入？

Question

有没有办法在反应应用程序中实现谷歌日历的iframe，而无需自己手动处理事件？

就像webapp会显示iframe，他们可以登录谷歌日历，然后它将只显示在特定的框内。

我只能使用日历库找到解决方案，但不能找到我正在考虑的方法。

Answer 1

谷歌已经为请求“X-框架-选项”响应头为https://calendar.google.com/calendar/r （默认日历主页），以sameorigin ，这意味着这是行不通的：

<h2>Your Calendar:</h2>
<iframe src="https://calendar.google.com/calendar/r"></iframe>

如果您尝试这样做，您将Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 。 从本质上讲，唯一允许嵌入默认日历页面的域名是Google自己的域名。

话虽如此，有一些有趣的选择。 如果您知道用户的Gmail地址，即使他们的日历是私有的，只要他们已登录，他们就可以看到iframe等于'https://calendar.google.com/calendar/embed?src=' + encodeURI(email); 。

演示： JSfiddle链接 （内置嵌入工具让我感到悲伤）。

但是，如果他们没有登录，则很难检测到并显示Google登录页面，就像您要求的那样。 如果他们没有登录，带有GCal嵌入URL的iframe将自动重定向到登录页面，但由于登录页面的x-frame-options设置为sameorigin ，因此将阻止加载到iframe中。 要查看此操作，请在已注销的隐身窗口中尝试上面的演示，然后输入您的Gmail电子邮件。

此外，据我所知，您无法检测iframe的加载是否被Javascript的x-frame-options阻止，因此如果日历不是，则没有简单的方法可以将用户重定向到Google登录加载。

我有一种感觉，检查登录状态的最可靠方法是通过Google登录按钮 。 此外，Google还为其日历产品提供了完整的API ，包括可告诉您用户具有哪些日历的端点。