Search code examples
twitterbasic-authentication

How to do Oauth Authentication using seperate new tab for verification of account?


What is the Authentication Strategy for opening new (tab) Window for Oauth Authentication and returning to previous tab (logged In) upon successful authentication?

I am using passportjs authentication strategies for Twitter, Facebook and Google. But all of that does authentication in the same window-tab. Is there a predefined strategy which I can follow to do the above?

I can open the permission window in new account using a(target="_blank"), but it does not return to previous tab upon account authentication (by user).

Edit (based on following answer)

Login Page looks like:-

!!!
html
head
    script.(type='text/javascript')
        function newWindow (auth_target) {
            authWindow = window.open(auth_target);
            var authenticationSuccessUrl = "/home"
            authWindow.onClose = function () {
                alert('onClose called.');
                authWindow.close();
                window.location = authenticationSuccessUrl;
            }
        }


    body
        button(type="button", onclick="newWindow('auth/google');").btnLogin with Gmail 

For New Window (home) i wrote:-

!!!
html
head
    script(type='text/javascript').
        function onAuthSuccess() {

            authWindow=window.location;
            window.onClose();
        }

body(onload='onAuthSuccess();')

Its not a full code i was suppose to write, but even this does not work. If the Home page is called after an intermediate authentication window (by google, for password entry) the above code does not work, and window does not close.

// just as some more information, ignore if not necessary Also please note, that,

    window.close()

works only if the parent window that triggered it open is open. If the current window is a standalone the above window.close() will not close the window. Likewise, the above Home page code fails to close current window.


Solution

  • Here is how I see the code can be changed as: This would just create one popup window and it will get closed after authentication.

    You have Login page code as :

    !!!
    html
    head
        script.(type='text/javascript')
            function newWindow (auth_target) {
                authWindow = window.open(auth_target);
                authWindow.onClose = function (authenticationSuccessUrl) {
                    alert('onClose called.');
                    authWindow.close();
                    window.location = authenticationSuccessUrl;
                }
            }
    
    
        body
            button(type="button", onclick="newWindow('auth/google');").btnLogin with Gmail
    

    The newWindow('auth/google') should have the following code.

    !!!
    html
    head
        script(type='text/javascript').
            function onAuthSuccess(authSuccessUrl) {    
                window.onClose(authSuccessUrl);
            }
            function ajaxPost() {            
            var uname = $("#name");
            var pass = $("#password");
                 $.ajax({
                      url: "/auth/google/",
                      type: "POST",
                      data: {username : uname, password: pass}                      
                    }).success(function(data){
                        var redirectUrl = data.url; // or "/home" as you had mentioned
                        onAuthSuccess(redirectUrl);
                    });
            }
    
    body
       p UserName:
        input#name(type="text", name="username")
    p Password:
        input#password(type="text", name="password")
    p: button(type="submit", onclick="ajaxPost()").btnLogin
    

    If you can post through ajax to the google authentication service and get the the success response you can use this method.

    Hope this works out well for you.