Is there a way to implement an iframe of google calendar inside a react app without needing to manually handle events myself?
Like the webapp would show the iframe where they can login to google calendar then it will just show it inside the specific box.
I can only find solutions using a calendar library but not the approach that I'm thinking about.
Google has set the "X-Frame-Options" response header for requests to https://calendar.google.com/calendar/r (the default calendar homepage) to sameorigin, which means that this will not work:
<h2>Your Calendar:</h2>
<iframe src="https://calendar.google.com/calendar/r"></iframe>
If you try that, you will get a Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.. Essentially, the only domain that would be allowed to embed the default calendar pages would be Google's own domain.
That being said, there is some interesting options available. If you know the users gmail address, even if their calendar is private, as long as they are logged in, they can see an iframe with a source equal to 'https://calendar.google.com/calendar/embed?src=' + encodeURI(email);.
Demo: JSfiddle link (the built in embed tool is giving me grief).
However, if they are not logged in, detecting that and showing the Google Login page, like you are asking for, is difficult. If they are not logged in, an iframe with a GCal embed URL will automatically redirect to the login page, but because the login page has x-frame-options set to sameorigin, it will get blocked loading into the iframe. To see this in action, try the demo above in a logged-out incognito window and enter your gmail email.
Furthermore, as far as I can tell, you can't detect whether the loading of an iframe was blocked by x-frame-options with Javascript, so there is no easy way to redirect the user to login to Google if the calendar does not load.
I have a feeling the most reliable way to check logged in status is going to be through the Google Sign-in button. In addition, Google has a full API just for their Calendar product, including endpoints that would tell you which calendars a user has.
Related
Unfortunately I haven't seen a question that asks exactly what I need so I decided to post one.
The problem: I have a chrome extension that loads an iframe sidebar. On initial load, the user needs to login using a google account of their choice. In addition, the same auth flow (ideally) should be presented to the user if they visit the actual site (in a new tab).
I currently use the Google Account Chooser and when using an iframe version of the the site, I run into some issues, mainly:
Refused to display 'https://accounts.google.com/AccountChooser?continue=https://accounts.google…t.com%26from_login%3D1%26as%3D473effc061cc82d5&btmpl=authsub&scc=1&oauth=1' in a frame because it set 'X-Frame-Options' to 'DENY'.
To summarize, what I need is:
One auth flow that addresses
login to the site via an iframe and
login to the site in a new tab.
Auth flow that allows the user to select a Google account similarly to Account Chooser
A good example of this is facebook's mobile view. This is not reliant on javascript and is able to authenticate the user with the server. If they are authenticated it will request and load your custom webpage, and if not you will see facebook's default home page.
How is all this accomplished without javascript and before the page renders? Is it PHP that runs before the DOM is rendered or is it another technology?
FB uses cookies to handle this. Before the page renders the cookie is sent to the server with the initial page load request, if the cookie is still valid you get past the login page, otherwise you need to login again.
Here is how you can see what cookies you have in chrome:
In the top right, click the Menu Chrome menu.
Click Settings > Show advanced settings.
In the "Privacy" section, click Content settings.
Under "Cookies," click All cookies and site data.
To delete all cookies, click Remove all.
To delete a specific cookie, hover over a site, then click the that appears to the right.
You can also choose to remove all cookies created during a specific time period.
https://support.google.com/chrome/answer/95647?hl=en
Has anyone successfully integrated Peoplesoft screens or navigation via an iFrame in a third party app like Liferay or uPortal?
We are trying to integrate Liferay Portal as a web front end and consume some of the PeopleSoft screens in an iFrame portlet. Both the Liferay Portal and Peoplsoft systems are on different top level domains. We are using Oracle Single Sign On on bot the applications. We have a couple of issues with this.
The screens display in the iFrame - however, the JavaScript on the PeopleSoft does not execute and keeps spinning. In Chrome devtools console, there is the following error:
Uncaught TypeError: Cannot read property 'getStoredData' of undefinedPT_PAGESCRIPT_win0_MIN_1.jsp
If not already signed in to the PeopleSoft system via SSO - the Login page pops out of the iFrame on IE browsers. To clarify based on comments below, the SSO happens for the first app like Liferay, however the user didnot try to go the second app PeopleSoft yet. So the SSO cookies for the second app (PeopleSoft) are not yet in the session. So when we access the page with the iFrame containing the Peoplesoft page, it pops out of the frame in IE trying to establish SSO session and cookies with PeopleSoft.
Has anyone been able to solve any of these issues?
Any insight would be much appreciated. I can provide more details if needed.
Thanks!
Edited for clarification based on comments below.
We have been able to resolve the above 2 issues.
First, we created a new instance of the portal in the same parent domain as the PeopleSoft domain and ensured both were using SSL so the protocol matched. This resolved the cross domain JS errors
Second, we changed our Oracle IdM SSO login flow to always redirect to a new PeopleSoft PIA which redirects back to Liferay's original URL. This ensures there is a valid PeopleSoft session and prevents iFrame popouts along with other integration issues. There is a lot of changes and work done by our team on this around related use cases(deep links, session timeouts) and flows. I'd be happy to post more details if anyone is proceeding down the same path.
Thanks for all the comments which helped us dig in the right direction. We also got feedback from other Liferay and PeoplesSoft customers who followed similar approaches.
I am working on a rails application. I have implemented facebook integration in my application. User can invite his friends to my application. Invitation system is working fine but problem is when any friend of user clicks on request it gets redirected to my facebook applications canvas page. I want that the user be redirected to my web applications landing page instead of in the application's canvas page. I tried to do so by including javascript in page which opens in canvas on facebook.
<script>
window.location.href = "http://www.google.com";
</script>
But it is giving me error as following.
Refused to display document because display forbidden by X-Frame-Options.
How to redirect user to my applications landing page as soon as it land son my canvas page? I want to achieve something similar to pinterest does.
Any help is highly appreciated.Thank you
Your frame doesn't have access to the window object, as that'd let you access Facebook's pages and do nasty stuff to them. You need to do top.location.href instead of window.location.href.
Your facebook application is probably sending the X-Frame headers, preventing Facebook to include your application iside the iFrame in the first place.
Some applications include that to prevent clickjacking, see here for an explanation of how it works:
http://blog.mozilla.com/security/2010/09/08/x-frame-options/
You might want to disable that header and then try again.
We've got a site that shows some content in iframes loaded from another domains. What I'd like to do is setup some Goals to track if this stuff is clicked, is this possible to track these clicks?
I know that this content us outside our domain but is it still in the dom?
It is possible. Since Goal Tracking is Profile based, the key is to have a tracking of all domains into one Profile. See the How do I install the tracking code if my site spans multiple domains? entry in the Google Analytics Help for further instructions. After that your iframe contents will appear as usual PageViews in the reports. (For instance, if you used <iframe src="http://otherdomain.com/stuff"></iframe>, you will find PageViews for ’/stuff’.)
Otherwise, I don't really know what you mean under ’stuff is clicked’. If it's an object in the iframe you want to track, you may generate a virtual PageView when visitor clicks on it:
pageTracker._trackPageview("/Stuff_clicked");
If you are not able to install GATC (Google Analytics Tracking Code) on so called another domains which you are loading inside your iFrame, unfortunately, you won't be able to track any clicks or virtual page-views for those domains. Any clicks or event occurring on any domain can be tracked back to your account as far as your GATC which includes your Google Analytics ProfileID e.g. UA-XXXX-X is installed on that page.