Chrome extension / Oauth /Tumblr

问题

I am (trying to) implementing a Chrome Extension, that uses the Tumblr API. For that to work I need to authorize via OAuth (1.0a).

I managed to get most of the authorization to work but I think I am missing something...

My manifest.json of the Chrome Extension I am writing looks like this for now:

{
    "name": "Tumblr - Tiled Dashboard",
    "version": "0.1.1",
    "manifest_version": 2,
    "description": "This extension modifies the look of your Tumblr dashboard.",
    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    },
    "background": {
        "page": "background.html"
    },
    "content_scripts": [
        {
            "matches": [ "*://*.tumblr.com/dashboard" ],
            "css": [ "styles.css" ],
            "js": [ "jquery-2.1.3.min.js", "masonry.min.js", "code.js" ]
        }
    ],
    "permissions": [
        "https://www.google-analytics.com/",
        "https://api.tumblr.com/v2/*",
        "webRequest",
        "storage",
        "tabs",
        "https://www.google.com/accounts/OAuthGetRequestToken", "https://www.google.com/accounts/OAuthAuthorizeToken", "https://www.google.com/accounts/OAuthGetAccessToken"
    ],
    "web_accessible_resources": [ "chrome_ex_oauth.html", "injectedCode.js" ],
    "content_security_policy": "script-src 'self' https://api.tumblr.com/v2/ https://ssl.google-analytics.com; object-src 'self'",
    "homepage_url": "http://desvre.tumblr.com/",
    "author":  "Franz Spitaler"
}

...I think this should be ok. In my background.html there are in fact only the included scripts (google analytics and the three oauth files I got from here: https://developer.chrome.com/extensions/tut_oauth . Those three files are also included in the fourth file I downloaded from the previous source ("chrome_ex_oauth.html").

Now when I reload the Chrome Extension in the Extensions (Ctrl + r) the Redirecting page opens and redirects me to the Tumblr authorization page, where I can allow the access.

Since I also added the "chrome_ex_oauth.html" to the "web_accessible_resources" in the manifest.json this works.

The problem occurs after the click on the 'allow' button. I simply get back to the redirecting page ("chrome_ex_oauth.html") and nothing more happens. When I open up the console, I can see an error message like the following:

GET https://www.tumblr.com/oauth/access_token?oauth_consumer_key=MY_CONSUMER_KEY&oauth_nonce=D3VeV&oauth_signature=kvhL%2F9GSMuiODoPR%2FyUrUiqzqF0%3D&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1424250463&oauth_token=6khqzjiMFbM7hcqqnNf8hm9ttDELKUVYo2TBQmyLOtepGN9KhJ&oauth_verifier= 400 (Bad Request)

As described in the OAuth tutorial page from Google I use this to initialize the 'background page' (which leads to the error message):

var oauth = ChromeExOAuth.initBackgroundPage({
    'request_url': 'https://www.tumblr.com/oauth/request_token',
    'authorize_url': 'https://www.tumblr.com/oauth/authorize',
    'access_url': 'https://www.tumblr.com/oauth/access_token',
    'consumer_key': 'MY_CONSUMER_KEY',
    'consumer_secret': 'MY_SECRET_CONSUMER_KEY',
    'app_name': 'Tumblr Tiled Dashboard'
});

Did I miss something important here? I think the manifest.json file is ok (permissions, web_accessible_resources?!).

Thank you for any help. There is really no really great tutorial for OAuth out there for Google Extensions (except that linked page)...

回答1:

As @abraham pointed out, there was a missing parameter, as seen in my posted error. I was able to track down the problem and found it in the function of the chrome_ex_oauth.js file. I changed the function from:

ChromeExOAuth.formDecode = function(encoded) {
    var params = encoded.split("&");
    var decoded = {};
    for (var i = 0, param; param = params[i]; i++) {
        var keyval = param.split("=");
        if (keyval.length == 2) {
            var key = ChromeExOAuth.fromRfc3986(keyval[0]);
            var val = ChromeExOAuth.fromRfc3986(keyval[1]);
            decoded[key] = val;
        }
    }
    return decoded;
};

to this:

ChromeExOAuth.formDecode = function(encoded) {
    var params = encoded.split("&");
    var decoded = {};
    for (var i = 0, param; param = params[i]; i++) {
        var keyval = param.split("=");
        if (keyval.length == 2) {
            var key = ChromeExOAuth.fromRfc3986(keyval[0]);
            var val = ChromeExOAuth.fromRfc3986(keyval[1]);
            decoded[key] = val;
        }
        else if (keyval.length == 3){
            var key = ChromeExOAuth.fromRfc3986(keyval[0]);
            var val = ChromeExOAuth.fromRfc3986(keyval[1].split("#")[0]);
            decoded[key] = val;
        }
    }
    return decoded;
};

Where the last parameter was not identified correctly because the ending of the url I got looks like this: #_=_

With the keyval[1].split('#')[0] I get the exact part of the parameter, that I need!

Thank you for the help, everything seems to work now. A request that needs OAuth authorization did, at least!

来源：https://stackoverflow.com/questions/28579840/chrome-extension-oauth-tumblr