Twitter OAuth via a popup - javascript

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/

Related

Is there any way to ask popup permission at first login?

In my project, pop-ups are a core part of the system. Is there any way to ask the user to allow pop-ups on the site at first login, as it happens for HTML 5 Notifications?
EDIT: I know pop-ups are a usually a bad practice, but our customer asked us to implement them for a good reason
You could use a url fragment appended to the end of the login redirect url (if when you login it redirects to /home you could make your login route redirect to /home#something_here instead), and have some javascript in your front end to detect when a page is loaded with that fragment and display the popup.
Also, if your popup is just HTML, you could conditionally render it only when rendering the login success page.

Gmail Authentication redirection

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

Close or redirect tab on successful google authentication?

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

Facebook Javascript Canvas Login Redirect

I am building a facebook canvas application and want users, when they visit "apps.facebook.com/myApp", to be presented with the appropriate login dialogue immediately instead of showing my canvas page without having been logged in. With all the different login flows, I am confused!
Using javascript, how do I do this? Do I set the default canvas page to be a page with a script with a redirect url in it?
You should not immediately present them with the login dialog, it is best practice to show some intro screen with information about your app first. Else there is only a small authorization information and no use will really know what the app is about. Then let the user click on a "Login/Use/Start/..." button to present the authorization popup with the FB.login function of the JavaScript SDK:
https://developers.facebook.com/docs/reference/javascript/FB.login/
If you really want to require user authorization right at the beginning, user the PHP SDK:
https://github.com/facebook/facebook-php-sdk
See "$facebook->getLoginUrl()" - just redirect to the resulting URL if the user is not logged in.

What options are there for embedding the Facebook Authorization Dialog in a custom modal dialog?

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.

Categories

Resources