JS oAuth 2.0 无效标头答案

【问题标题】：JS oAuth 2.0 invalid headerJS oAuth 2.0 无效标头
【发布时间】：2012-05-19 06:09:23
【问题描述】：

我正在使用来自http://binarysaiy2k.blogspot.in/2012/04/authentication-and-authorization-for.html 的这个脚本，但它一直在控制台中给我一个错误：无效的标头通常它会起作用，因为它是一个教程.. 有什么帮助吗？

<!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'/>

【问题讨论】：

标签： javascript oauth-2.0

【解决方案1】：

您的代码对我来说很好（Chrome 18 y FF10-12）。

对 Web 应用程序使用客户端 ID，并在与重定向 URI 相同的 Web 服务器中运行此代码。

我得到的唯一错误是：Unsafe JavaScript attempt to access frame with URL，因为当您不在同一个域、协议和端口上时，pollTimer 的跨域访问。除了这个控制台错误（每 100 毫秒），一切正常。 ç

我个人不推荐这种方式（弹出式）。我更喜欢 iframe 的方式（colorbox 之类的）。

也许您需要说明您的网络浏览器/版本。

【讨论】：