CODEWITHSUNDEEP
javascriptoauth-2.0
Pieter Moeyersons
Pieter Moeyersons

Reputation: 17

JS oAuth 2.0 invalid header

I am using this script from http://binarysaiy2k.blogspot.in/2012/04/authentication-and-authorization-for.html but it keeps giving me an error in console: Invalid header Normally it would work because it's an tutorial.. Any help?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
        var OAUTHURL = 'https://accounts.google.com/o/oauth2/auth?';
        var VALIDURL = 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=';
        var SCOPE = 'https://www.googleapis.com/auth/userinfo.profile';
        var CLIENTID = '********.apps.googleusercontent.com';
        var REDIRECT = 'http://********/callback'
        var TYPE = 'token';
        var _url = OAUTHURL + 'scope=' + SCOPE + '&client_id=' + CLIENTID + '&redirect_uri=' + REDIRECT + '&response_type=' + TYPE;
        var acToken;
        var tokenType;
        var expiresIn;
        var user;

    function login() {
        var win         =   window.open(_url, "windowname1", 'width=800, height=600'); 

        var pollTimer   =   window.setInterval(function() { 
            if (win.document.URL.indexOf(REDIRECT) != -1) {
                window.clearInterval(pollTimer);
                var url =   win.document.URL;
                acToken =   gup(url, 'access_token');
                tokenType = gup(url, 'token_type');
                expiresIn = gup(url, 'expires_in');
                win.close();

                validateToken(acToken);
            }
        }, 100);
    }

    function validateToken(token) {

        $.ajax({
            url: VALIDURL + token,
            data: null,
            success: function(responseText){  
                getUserInfo();
                console.log("ok");
            },  
            dataType: "jsonp"  
        });
    }

    function getUserInfo() {
        $.ajax({
            url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + acToken,
            data: null,
            success: function(resp) {
                user    =   resp;
      console.log(resp);
                $('#uName').append(user.name);
                $('#imgHolder').attr('src', user.picture);
            },
            dataType: "jsonp"
        });
    }

    //credits: http://www.netlobo.com/url_query_string_javascript.html
    function gup(url, name) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\#&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( url );
        if( results == null )
            return "";
        else
            return results[1];
    }

</script>
</head>

<body>
<a href='#' onClick='login();'> click here to login </a>
<div id='uName'>Welcome  </div>
<img src='' id='imgHolder'/>

Upvotes: 0

Views: 550

Answers (1)

Antonio Saco
Antonio Saco

Reputation: 1650

Your code works fine for me (Chrome 18 y FF10-12).

Using a Client ID for a web application and running this code in the same web server as your Redirect URI.

The only error i got was: Unsafe JavaScript attempt to access frame with URL, because of the crossdomain access of the pollTimer when you are not on the same Domain, protocol and port. Besides this console error (every 100 ms), everything works fine. ç

I personally do not recommend this approach (popup). I prefer the iframe way (colorbox like).

Perhaps you need to clarify your web browser/version.

Upvotes: 1

Related Questions