0

http://binarysaiy2k.blogspot.in/2012/04/authentication-and-authorization-for.htmlからこのスクリプトを使用していますが、コンソールでエラーが発生し続けます: Invalid header 通常はチュートリアルなので機能します。 . 何か助けはありますか?

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

4

1 に答える 1

1

あなたのコードは私にとってはうまくいきます（Chrome 18 y FF10-12）。

Web アプリケーションのクライアント ID を使用し、リダイレクト URI と同じ Web サーバーでこのコードを実行します。

私が得た唯一のエラーは次のとおりです。同じドメイン、プロトコル、およびポートにいない場合Unsafe JavaScript attempt to access frame with URLのクロスドメインアクセスのためです。pollTimerこのコンソール エラー (100 ミリ秒ごと) 以外は、すべて正常に動作します。ç

個人的には、このアプローチ (ポップアップ) はお勧めしません。私はiframeの方法（カラーボックスのようなもの）を好みます。

おそらく、Web ブラウザー/バージョンを明確にする必要があります。

于 2012-05-18T22:09:23.500 に答える