I want to know how basically social one-click authentication works.For example, in Gmail Authentication when i click a button in my page a new window is opened from my tab which lists gmailIds.The user selects their respective emailId and gives permission.How do that tab post data to my existing tab opened?Also, if there are multiple tabs opened of same domain how Gmail authentication window post success data to my promise in javascript.
A window/tab that has opened another window/tab can communicate with the child tab via the window.opener API
Additionally if you're able to write javascript on both tabs you can use the window.postMessage API
Related
I have an application that asks a user to login with Reddit. When they accept, it opens a new window (call it SpawnedWindow), Reddit asks them if they want to connect, and when they do, SpawnedWindow redirects to a GET endpoint on my server with the success/failure information. My server will do some computation to figure out if the auth was really successful, and if it is, it will send an "ok" (as a response to the GET request) to SpawnedWindow.
I want the original page to detect this "okay" and continue with user onboarding. How might I communicate this between the new window and the original window?
If you're familiar with "login with Google" buttons: as we know, there's a popup, and depending on the result of authentication, the main page will have dynamic behavior (based on the login being successful or not). This is essentially what I'm trying to achieve.
The API (and many APIs which have a similar authorization process) provides a redirect_uri that the user will be redirected to after authorization succeeds. You can pass a redirect_url query parameter that goes to a page on your site. This way, once authorization succeeds, the newly opened page (on your site, that Google has redirected the popup to) can communicate to the original page (on your site).
One way to do this is with a BroadcastChannel - open a channel on your original page, and wait for a message. On the new page, open the same channel and send a message, and the old page can listen for the message.
Another option would be to use Local Storage. On the original page, listen for storage change events. On the new page, change storage so as to fire the event.
I have a project written in perl-dancer and angular. Im using google as a openId system.
Some of my pages have an edit grid with a save button. In order to avoid loosing unsaved data on session(session created from perl-dancer) expire, I have an angular interceptor which listens to 401 server errors and opens an angular modal holding the "google login" button(this is triggered on server request after session expire).
I have set the opening of google form on a new tab instead of redirect from original page in order to avoid loosing the possibly unsaved data.
On successful google authentication the new tab redirects to the project homepage and the original stays with the open modal holding the "google login" button.
Ok now the new tab can be closed and on the original window the modal closed and the unsaved data is still there.
But this poor solution as result of not being allowed to embed the google login form or similar seems as a terrible solution from the user experience point of view.
Solutions, suggestions, help?!
One suggestion would be to check $state (or some other service) in the interceptor so you could set a flag in localStorage that indicates user has data being processed.
Then have a special route for this situation that just tells user to close the window and keep editing/saving in the previous window they have open
There would then be several different ways within the app start up you could check localStorage for this flag in order to redirect to that special route.
Within controller of that route clear the localStorage flag. You could even use localStorage events to close the modal in previous window automatically
I'm trying to do this with a Google App Engine application using OAuth 2.0 for Google Calendar's authorization (restrited to a Google Apps domain's users)
In case the user has not authorized the app to access his/her calendar yet, show an "authorize this app with your Google Apps account" button.
When the user push that button, open a new window, where the authorization process begins (the url is on the form https://accounts.google.com/o/oauth2/auth?state=CALLER_URL&redirect_uri=CALLBACK_URL&response_type=code&client_id=CLIENT_ID&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar&access_type=offline)
The user authorizes the app to access his/her calendar and then this window is closed and the caller window is reloaded, to show the app.
Step 1 is very straightforward. Step 2, kind of. I can open that url in a new window, but then, the rest of the process takes place in that new window. I mean: when the user authorizes the app, then the url falls back in the callback uri, but in the same window, not in the caller one.
Is there any way to do this? I've seen in more sites. You push a button, a new window is opened to give the caller app authorization to access your data (Twitter account, Facebook wall, Google contacts... whatever), and then that window is closed and the caller Window reloaded, with the needed autorization token and ready to work
You definitely want it to post back to the child window. This isn't a problem because parent and child windows can communicate. So for example:
Some JS opens the child window and sets its location to the Google Authorization page
When the user accepts the dialog, the child window gets forwarded to your callback URL
Your server saves the token data it gets from the forwarded URL (it doesn't know or care what window the request came from)
The server returns a page, which gets loaded in the child window.
That page is blank, but contains some javascript that alerts the underlying page and closes the window
For example, the javascript might look like this:
window.parent.location.reload();
window.close();
I am using ASP.Net MVC3 and have a very basic web site that uses the server side flow to perform the Facebook authentication and authorization. Presently the login button is defined with the following HTML:
I am able to get the user redirected to Facebook where they login and authorize the permissions and the site does get redirected back to my controller with an authorization token that I can convert to an access token. I have the 2 following problems that I am trying to solve:
1) Within the anchor's href, I have the "....display=popup" and was hoping that would result in a popup but instead my entire page is redirected to Facebook. Is there a way to use the server side flow with some JS to make the authorization dialog as a popup without resorting to using the Facebook Javascript SDK?
2) Assuming I can show the Authorization dialog as a popup, is there a way to force it to show within a truly MODAL popup dialog such as a jQueryUI Dialog so we can add some content with it? I have seen sites that have the popup but it just dims the page but it doesn't enforce that the user to complete the authorization before clicking back on the page.
Any insight is much appreciated.Thanks.
1) You can use the Facebook Like button or call FB.Login to create a popup. See the Facebook Javascript SDK for reference: https://developers.facebook.com/docs/reference/javascript/FB.login/
2) This is not possible.
I was wondering how to do twitter OAuth via a popup, i.e. load up the Oauth page in a popup and make the callback close the child window and reload the parent window.
Edit: OK iframes are bad, but how would you accomplish the above, I notice posterous.com does this - I'm looking to achieve the same flow as FB connect.
Doing the same thing for Yahoo today...
Open a popup
Send user to twitter for authentication
Twitter sends user back to mysite.com/authcompleted.php, with authentication parameters in the query string. Still in the popup here.
The popup (mysite.com/authcompleted.html) reads the query string and sends the data to the opener window via javascript
window.opener.setTwitterAuthData(yourData)
Inside setTwitterAuthData, which is in your main window, set appropriate form fields and submit the data to your server.
You shouldn't do this. Loading it in an IFrame hides the URL from the user, making it difficult for them to confirm that they're entering their password on twitter.com and not a third-party (i.e. phishing) site.
This maybe helpful!
http://zuzara.com/blog/2010/05/15/jquery-plugin-for-twitter-oauth-via-popup-window-facebook-style/