Is it possible to open Twitter authentication in a new window and redirect to the parent when it is done?


#1

I’m developing Twitter authentication in a web site with Java. I hace all the server side code running, I can retrieve the different Tokens and user credential.
Where I have a problem is in the authentication flow windows.

The user has already Logged in to the site with site’s account. Then they click in the Log in with Twitter button and I open a Popup to Log In. When they finnish the Log In proccess they are redirected to the CallBack URL in the popup window.

I want to know if it is possible to close the popup window and redirects in the parent window.

The flow would be: Parent Page --> Log In with Twitter --> Popup to Login --> User authorizes --> Close popup --> refresh parent.

Is this possible? or something similar?

Thanks,


#2

This has to be done in javascript. Create a js callback method on your parent page and after you finish your oauth routine, call the callback function from your popup when it is closed using window.opener.oauthCallback(). You can also set a js global object in the popup and pass data back to the parent from the popup.
var client = { prop1: val1, prop2: val2}
So on the parent have a click event and callback method

$("#twitterSignInBut").click(function(){
window.open(Url + needed params)
}
function OAuthCallback(client){ //Do what you need with the client data passed back from the popup }

you can access the data in client inside the callback method this way:
client.prop1
If any post processing is needed outside the callback context, write the callback data to hidden fields because it will not be in scope for any other methods.
Also, in the popup you should have a close button and a click event for it.

$("#butClose").click(function () {
//call the callback method
window.opener.oauthCallback(client);
});
//And this if the user closes the popup without clicking your button
window.onbeforeunload = function () {
window.opener.oauthCallback(client);
}

Hope this helps.


#3

Hi,
Thank for your answer.
I have already found something that it is working, it is not very elegant but is working.
I’m not sure if I could use your solution. The problem is that I just open the window this way.

var url = “https://api.twitter.com/oauth/authorize?oauth_token=EWpGlOkl9NodUIWxYeFUi5PHI8oBCK0UxmzaEQbLOA”;
var myWindow = window.open(url,"","");

It will open redirecting me to twitter so i can’t add any JS in the popup. I just can open the address. So i can’t use any JS in the popup to call parent window. am I right? Maybe I am wrong about this, I’m not great with JS.

What I did and it is working:
I set a timer with a function that is running every second.
In that function I check the popup URL, while I’m out of my domain i can’t but when the callBack URL is launched, the window come back to my domain I read de URL and if i can find the oauth_verifier as a field in the URL i close the popup and read the URL to recover the verifier.

var timer = setInterval(checkVentana, 1000);

function checkVentana() {
try {
var ur = myWindow.location.href;
if (ur.indexOf(‘oauth_verifier’) != -1){
var verifier = “”;
var token = “”;
clearInterval(timer);
myWindow.close();
ur = ur.substring(ur.indexOf(’?’)+1);
var urPartes = ur.split(’&’);
for (i = 0; i < urPartes.length; i++){
if (urPartes[i].indexOf(‘oauth_verifier’) != -1){
verifier = urPartes[i].split(’=’)[1];
}
if (urPartes[i].indexOf(‘oauth_token’) != -1){
token = urPartes[i].split(’=’)[1];
}
}
f.oauth_verifier.value = verifier;
f.oauth_token.value = token;
f.submit();
}
} catch (e){
}
}

the try/catch block it is to avoid JS errors for “myWindow.location.href” while I’m trying to access the URL while the popup it is out of my domain.
I know it is not a very good way to do it but i couldn’t find anything useful.