Chrome扩展程序/ Oauth / Tumblr [英] Chrome extension / Oauth /Tumblr
问题描述
我（试图）实施使用Tumblr API的Chrome扩展程序。为了实现这个目标，我需要通过OAuth（1.0a）进行授权。
我设法获得了大部分授权，但我认为我错过了一些东西......
我现在写的Chrome扩展的manifest.json看起来像这样：
{
name：Tumblr - Tiled Dashboard，
version：0.1.1，
manifest_version：2，
description：这个扩展名修改了Tumblr仪表板的外观。，
图标：{
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]
}
]，
权限：[
https://www.google-analytics.com/，
https://api.tumblr.com/v2/*，
webRequest，
存储 ，
标签，
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，injectCode.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
}
...我认为这应该没问题，在我的background.html中实际上只有包含的脚本（google分析和我从这里获得的三个oauth文件： https://developer.chrome.com/extensions/tut_oauth 。这三个文件也包含在我从上一个源代码下载的第四个文件中（chrome_ex_oauth.html）。
现在，当我重新加载Chrome扩展程序在扩展（Ctrl + r）中打开重定向页面，并将我重定向到Tumblr授权页面，在那里我可以访问。
由于我还添加了chrome_ex_oauth .html转换为manifest.json中的web_accessible_resources。
单击'allow'按钮后会出现问题。 redirec页面（chrome_ex_oauth.html），没有更多的事情发生。当我打开控制台时，可以看到如下所示的错误消息：
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（错误请求）
如Google的OAuth教程页面所述，我使用它来初始化'后台页面'（这会导致出现错误消息）：
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平铺仪表板'
}）;
我在这里错过了重要的事情吗？我认为manifest.json文件正常（权限，web_accessible_resources？！）。
感谢您的帮助。对于Google Extensions，除了那个链接页面外，真的没有真正优秀的OAuth教程... ...
As @亚伯拉罕指出，有一个缺少的参数，如我在发布的错误中看到的。
我能够找到问题并在chrome_ex_oauth.js文件的功能中找到它。我改变了函数：
$ p $
ChromeExOAuth.formDecode =函数（编码）{
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]）;
解码[key] = val;
}
}
返回解码;
}; b
ChromeExOAuth.formDecode =函数（编码）{
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]）;
解码[key] = val; （keyval.length == 3）{
var key = ChromeExOAuth.fromRfc3986（keyval [0]）;
}
else if
var val = ChromeExOAuth.fromRfc3986（keyval [1] .split（＃）[0]）;
解码[key] = val;
}
}
返回解码;
};
最后一个参数未正确识别，因为我得到的url结尾如下所示：＃_ = _
使用keyval [1] .split（'＃'）[0]确切的部分参数，我需要！
感谢您的帮助，一切似乎现在工作。至少需要一个需要OAuth授权的请求！
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)...
解决方案 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!
这篇关于Chrome扩展程序/ Oauth / Tumblr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
