trello
在SitePoint，我们广泛使用Trello。 当然，它有其独特之处，可以在各个领域使用一两个改进，但是在大多数情况下，它彻底改变了工作人员，作者及其编辑的协作经验。
我最近发现自己需要从非会员的特定列表中导出卡标题。 默认情况下，Trello仅支持将整个面板导出到JSON，这会使我的选项卡在100个成员以上，数百张卡片的面板上崩溃。 商店中有一小批Trello扩展程序，但是奇怪的是，没有人以任何方式导出列表。
让我们制作一个可以为我们做到这一点的Chrome扩展程序！ 如果您急于想查看最终结果，请参阅Github存储库以获取本教程代码的最终版本。
构建一个Chrome扩展程序
我认为最好的方法是扩展，因为仅执行这些导出的单独应用程序可能太多了。 此外，Trello有一个漂亮的API，我们可以使用它来获取所需的一切。 我还认为这是回到扩展开发的不错过渡，这是我一段时间没有做的了。
自举
我将重用我可信赖的ChromeSkel存储库-我很久以前构建的骨架扩展，以使开始使用Chrome Extension开发更加容易。 作为参考，如果您想查看我过去编写的其他一些Chrome扩展教程，请参见此处和此处 。
首先，将存储库克隆到任何文件夹。
git clone https://github.com/Swader/ChromeSkel_a.git要查看其是否有效，请将其加载到Chrome中。 进入扩展程序标签，然后点击“加载解压的扩展程序”。 如果没有该选项，请确保选中右上角的“开发人员模式”复选框。
加载后，它应该出现在您的扩展列表中。
认证方式
虽然我们可以使用Chrome扩展程序简单地在屏幕上收集数据并进行解析，但事实证明Trello有时不可靠，并且往往会在人口众多的板上崩溃。 这就是为什么我们只使用Chrome扩展程序与trello.com域的集成来在列表上创建新的上下文菜单选项（“导出卡”选项），然后在后台页面执行整个逻辑，获取通过API的数据。
关键与秘密
要为Trello生成应用程序密钥，请在登录时访问https://trello.com/1/appKey/generate 。这将为您提供可用于帐户的密钥和机密。 在本教程的其余部分，请考虑将{{KEY}}用作此密钥，并相应地替换其内容。
获得密钥后，在scripts子文件夹中创建一个文件key.js ：
// key.js
var APP_KEY = '{{KEY}}'; 在使用它时，您可以删除fragments和fancy-settings文件夹。 我们将不需要它们。
工作流程和清单
扩展程序的工作流程如下：
- 给定用户打开Trello面板
- 检查该用户是否授权扩展使用他的Trello帐户
- 如果是，请继续
- 如果不是，请使用授权按钮打开设置页面，使他们可以完成该过程
- 获得授权后，自动关闭设置页面并保留扩展名的授权
要使扩展程序自动打开包含某些内容的新标签，我们需要将该内容标记为“可访问网络的资源” 。
为此，创建文件夹settings ，它将包含我们的设置页面，并更新扩展的清单以使其看起来像这样：
{
"name": "Trello Helper",
"version": "0.1",
"manifest_version" : 2,
"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
"background" : {
"page" : "background.html",
"persistent": false
},
"page_action" :
{
"default_icon": {
"19": "icons/19.png",
"38": "icons/38.png"
}
},
"content_scripts": [
{
"matches": ["https://trello.com/b/*"],
"js": [
"lib/jquery-2.1.1.min.js",
"scripts/main.js"
],
"run_at": "document_idle"
}
],
"permissions": [
"tabs"
],
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"web_accessible_resources": [
"settings/index.html"
],
"options_page": "settings/index.html"
} 其中大多数应该是熟悉的。 我们设置版本，提供一些元数据，定义图标并声明一个事件页面 ，加载一些必备的内容脚本（ Trello JS客户端库需要jQuery），最后定义“ web_accessible_resources”，因此我们可以使用设置页面正在建设中。 我们还将扩展的影响限制为https://trello.com/b/* ，这仅意味着委员会网址。
设置和授权
要构建设置页面，我们编写一个简单HTML页面。 为了演示起见，在这种情况下，我将使其非常简单。 我们将使用Foundation对其进行样式设置（目前，仅用于按钮，但是我们将在以后的文章中进行更好的设置页面），因此请下载Foundation Essentials捆绑包 ，并将其内容取消存档到/settings ，以便index.html属于该文件夹。 您应该具有这样的文件夹结构：
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
如果您有一些额外的文件夹在我的屏幕快照中看不到，请随时删除它们。 创建文件settings/js/settings.js ， settings/js/settings.js将其留空。
好吧，让我们开始做生意。 因此，假设用户可以通过转到“扩展名”选项卡中的“选项”，或在未经身份验证时尝试使用扩展名来最终到达该页面。 让我们用两个div构建一个相当基本HTML页面：一个用于使用“注销”按钮对用户进行身份验证时使用，另一个用于当用户仍未通过身份验证并需要单击“授权”按钮时使用。 用以下内容替换index.html的内容：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Trello Helper Settings</title>
<link rel="stylesheet" href="css/foundation.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Trello Helper Settings</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" id="trello_helper_loggedout" style="display: none">
<p>To get going, you'll need to authorize the extension to use your Trello account.</p>
<p>Do it by clicking the big Authorize button below.</p>
<a href="#" class="medium success button" id="trello_helper_login">Authorize</a><br/>
</div>
<div class="panel" id="trello_helper_loggedin" style="display: none">
<p>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.</p>
<a href="#" class="medium success button" id="trello_helper_logout">Log out</a><br/>
</div>
</div>
</div>
<script src="../scripts/key.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/settings.js"></script>
</body>
</html>我们有两个div，分别是“登录”和“退出”按钮，然后插入所需的JS。 在这种情况下，我们使用的是Foundation的默认包含的jQuery，但是如果您选择使用自己下载的项目在项目中的其他位置，那真的没关系，以防您像我一样获取了最新的版本（更多信息稍后）。
现在让我们添加一些逻辑。 打开settings.js并提供以下内容：
function init() {
// Message and button containers
var lout = $("#trello_helper_loggedout");
var lin = $("#trello_helper_loggedin");
// Log in button
$("#trello_helper_login").click(function () {
});
// Log out button
$("#trello_helper_logout").click(function () {
});
if (!localStorage.trello_token) {
$(lout).show();
$(lin).hide();
} else {
$(lout).hide();
$(lin).show();
}
}
$(document).ready(init); 通过阅读文档 ，我们可以发现在对客户端应用进行身份验证时， localStorage trello_token中将存在trello_token 。 这意味着我们可以将其用作何时显示每个div的指标。 根据trello_token ，在init函数中，我们抓取div，向按钮中添加单击处理程序（尚无逻辑），最后，隐藏适当的div。
例如，当用户通过身份验证时，他们将获得如下屏幕：
让我们现在获取Trello JS客户端。
Trello文档并非真正考虑到Chrome扩展，因此建议在从其域中检索JS客户端库时，将key附加到URL，例如：
<script src="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"></script>我们真的无法做到这一点，因为我们正在处理扩展的封闭环境，并且出于性能原因，将其本地提供更为有意义。 因此，我们访问上述URL，但没有关键参数：
https://api.trello.com/1/client.js 将此文件的内容保存到lib/trello_client.js ，然后通过将其添加到末尾<body>标记附近的scripts部分中，确保我们的设置页面lib/trello_client.js其加载，如下所示：
<script src="js/vendor/jquery.js"></script>
<script src="../lib/trello_client.js"></script>
<script src="js/settings.js"></script>这样可以确保我们JavaScript中有Trello对象，让我们可以使用它的method 。 让我们先注销。 将注销按钮的单击处理程序更改为：
$("#trello_helper_logout").click(function () {
Trello.deauthorize();
location.reload();
});这就是Trello取消授权的全部。 我们调用该方法并重新加载我们所在的页面（即设置屏幕）。
现在，让我们处理登录，这有点复杂。
// Log in button
$("#trello_helper_login").click(function () {
Trello.setKey(APP_KEY);
Trello.authorize(
{
name: "Trello Helper Extension",
type: "redirect",
expiration: "never",
interactive: true,
scope: {read: true, write: false},
success: function () {
// Can't do nothing, we've left the page
},
error: function () {
alert("Failed to authorize with Trello.")
}
});
}); 按照在线文档的逻辑，我们看到Trello对象具有setKey方法，我们可以使用它来设置它。 然后，我们将authorize方法付诸行动。 根据文档，使用类型popup而不是redirect将要求用户在收到应用程序时将密钥手动粘贴到应用程序中，这不是我们想要的。 但是，如果我们使用重定向，则页面将重定向到身份验证并在完成后返回。 interactive字段设置为false时，将同时取消弹出窗口和重定向，而仅检查localStorage.trello_token值是否存在。 根据文档，我们需要先通过重定向调用常规授权，然后返回到设置页面，然后再次调用它，但将交互设置为false，这将使其在上一次重定向时获取令牌提供。 一切都令人费解，但它可以工作。
但是，还有另一个问题。 如果在设置页面打开后立即调用非交互式authorize ，则会在页面上引起错误，因为授权后的重定向尚未发生。 一种替代方法是在我们的设置页面中添加另一个按钮“确认”或类似的内容，该按钮在从Trello重定向回到我们的设置页面后出现，让用户手动启动非交互式授权。 但是，这似乎有点像UX的噩梦。 最后，我选择了第三个解决方案。
将以下代码保存到lib/hashSearch.js 。
/*
As found on: http://stackoverflow.com/questions/3729150/retrieve-specific-hash-tags-value-from-url
*/
var HashSearch = new function () {
var params;
this.set = function (key, value) {
params[key] = value;
this.push();
};
this.remove = function (key, value) {
delete params[key];
this.push();
};
this.get = function (key, value) {
return params[key];
};
this.keyExists = function (key) {
return params.hasOwnProperty(key);
};
this.push= function () {
var hashBuilder = [], key, value;
for(key in params) if (params.hasOwnProperty(key)) {
key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined"
hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
}
window.location.hash = hashBuilder.join("&");
};
(this.load = function () {
params = {}
var hashStr = window.location.hash, hashArray, keyVal
hashStr = hashStr.substring(1, hashStr.length);
hashArray = hashStr.split('&');
for(var i = 0; i < hashArray.length; i++) {
keyVal = hashArray[i].split('=');
params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1];
}
})();
}正如从StackOverflow答案中获取的那样 ，这个小实用程序可帮助我们从URL中获取特定哈希值。
当您通过redirect方式向Trello授权时，它将重定向回到其来源页面，但URL中带有令牌。 该令牌将是Trello JS客户端所需的auth令牌。 因此，有理由认为，如果我们可以检测到URL中存在此令牌，则可以得出结论，我们正在处理Trello的重定向，因此可以自动安全地触发非交互式authorize协议。
将hashSearch添加到设置页面后，就像这样…
<script src="../scripts/key.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="../lib/trello_client.js"></script>
<script src="../lib/hashSearch.js"></script>
<script src="js/settings.js"></script> … settings.js文件最后应如下所示：
function init() {
// Check if page load is a redirect back from the auth procedure
if (HashSearch.keyExists('token')) {
Trello.authorize(
{
name: "Trello Helper Extension",
expiration: "never",
interactive: false,
scope: {read: true, write: false},
success: function () {},
error: function () {
alert("Failed to authorize with Trello.")
}
});
}
// Message and button containers
var lout = $("#trello_helper_loggedout");
var lin = $("#trello_helper_loggedin");
// Log in button
$("#trello_helper_login").click(function () {
Trello.setKey(APP_KEY);
Trello.authorize(
{
name: "Trello Helper Extension",
type: "redirect",
expiration: "never",
interactive: true,
scope: {read: true, write: false},
success: function () {
// Can't do nothing, we've left the page
},
error: function () {
alert("Failed to authorize with Trello.")
}
});
});
// Log out button
$("#trello_helper_logout").click(function () {
Trello.deauthorize();
location.reload();
});
if (!localStorage.trello_token) {
$(lout).show();
$(lin).hide();
} else {
$(lout).hide();
$(lin).show();
}
}
$(document).ready(init);您现在可以尝试扩展。 加载扩展选项卡，单击选项链接，然后测试身份验证和注销。 一切都应该正常工作。
结论
在这一部分中，我们构建了扩展的基础，通过基于基金会的自定义设置屏幕并使用TrelloJavaScript客户端库来实现身份验证。
在下一部分中，我们将在扩展程序的后面构建整个逻辑，然后进行总结。
翻译自: https://www.sitepoint.com/build-trello-chrome-extension-api-authentication/
trello
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
