显示来自私人 Trello 看板的卡片，访客不需要 Trello 帐户，或者他们需要通过弹出窗口进行授权
Posted
技术标签:
【中文标题】显示来自私人 Trello 看板的卡片，访客不需要 Trello 帐户，或者他们需要通过弹出窗口进行授权【英文标题】：Display cards from a private Trello board without visitors needing a Trello account, or them needing to authorize via popup 【发布时间】：2016-09-02 21:38:14 【问题描述】：我的公司在 Trello（私人看板）上有一个当前项目列表，我们很乐意通过连接到看板将它们显示在我们的网站上，以便它们始终是最新的。
使用this example，我现在可以拉出卡片并将其呈现在页面上，但前提是您单击“连接到 Trello”。
为什么用户需要连接？它们是我板上的我的卡片，所以有没有办法只是......向他们展示卡片（它们只需要是只读的......用户不能编辑/与它们交互）？ Trello 应该只需要验证 我，而不是我网站的访问者。
有代码解决方案吗？
这是我当前的 JS sn-p：
<script src="https://api.trello.com/1/client.js?key=[MY-APP-KEY]"></script>
<script>
var onAuthorize = function()
updateLoggedIn();
$("#projects").empty();
Trello.members.get("me", function(member)
var $item = "<tr><td class='subhead disabled'>Loading projects...</td></tr>";
$("#projects").html($item);
// Output a list of all of the cards that the member
// is assigned to
Trello.lists.get("[MY-TRELLO-LIST-ID]/cards", function(cards)
$("#projects").html("");
$item = "";
$.each(cards, function(ix, card)
// OUTPUT THEM ON THE PAGE
$("#projects").append($item);
);
);
);
;
var updateLoggedIn = function()
var isLoggedIn = Trello.authorized();
$("#loggedout").toggle(!isLoggedIn);
$("#loggedin").toggle(isLoggedIn);
;
var logout = function()
Trello.deauthorize();
updateLoggedIn();
;
Trello.authorize(
interactive:false,
success: onAuthorize
);
</script>
【问题讨论】：
您要在 Trello 上公开展示的看板吗？ @AaronDufour 它不公开。但我仍然想知道为什么我需要用户在他们是我的董事会时进行身份验证。我觉得我应该能够验证自己并将它们打印到页面上，就好像我在说“嘿，我想给你看一些这些东西！这是私人的，但你有我的许可才能看到它。 "如何在到达客户端之前验证自己并使用 php 或其他东西提取所有内容？ @Jon 问题是客户端脚本作用于您在单击按钮时正在执行的页面上生成了超出范围的新页面。因此无法直接从此页面访问它，此外我认为它应该工作的唯一方法是，如果你有开发者密钥，你可以查询返回 json 响应的函数 【参考方案1】：我认为您不能完全在客户端执行此操作。您可以通过来自服务器的经过身份验证的 API 调用连接到 Trello，然后服务器将数据发送到客户端浏览器，可能通过 AJAX 调用或类似调用。
【讨论】：
我不确定我是否遵循。我是否应该使用 PHP 而不是 javascript 进行此调用，以便它处理服务器端而不是客户端？网站访问者必须对任何东西进行身份验证似乎很愚蠢......我允许他们查看我的董事会，只需他们访问我的网站:) 是的，你应该用 PHP 来做。【参考方案2】：在网上搜索后，我在 HappyPorch 的出色团队中找到了一个很好的解决方案。
HappyPorch's original solution post.
来自与 Ondrej 在 HappyPorch 的电子邮件：
高级概述如下：
您需要一个可以访问看板的 Trello 帐户。你可以 使用您的个人帐户，或创建一个“服务帐户”来保存东西 （权限）隔离。
您需要使用 Trello API 创建一个小型管理应用程序，该应用程序将 提示登录，并请求访问令牌。你会看到一个登录 对话框中，您将使用所需的（服务）帐户登录。然后，使用 Javascript API，您将提取安全令牌。
在您的实际应用程序中，您将再次使用 Trello API。反而 虽然提示登录，但您将设置之前的令牌 提取；然后，用户将代表 Trello API 与 用于生成令牌的帐户。
相关代码sn-ps：
用例是您拥有只想展示给某人的看板，因此他们（用户...您网页的访问者...任何人）没有理由必须对任何内容进行身份验证，更不用说甚至需要一个 Trello 帐户。它们是您的看板，因此 Trello 只需验证您是否有权访问……而不是其他任何人。
根据 HappyPorch 的教程，我创建了一个很小的 authenticate.html 页面，否则它是空的。我访问此页面一次以验证服务帐户并通过将令牌打印到控制台来获取令牌。
authenticate.html
<html><head></head><body>
<script src="https://api.trello.com/1/client.js?key=APP-KEY-FOR-SERVICE ACCOUNT"></script> <!-- Get yours here https://trello.com/app-key -->
<script>
// Obtain the token
var authenticationSuccess = function ()
var TOKEN = Trello.token();
console.log(TOKEN);
;
var authenticationFailure = function ()
alert("Failed authentication");
;
// Force deauthorize
Trello.deauthorize();
Trello.authorize(
name: "Preauthorize a Shared Service Account",
scope:
read: true,
write: true
,
type: "popup",
expiration: "never",
persist: false,
success: authenticationSuccess,
error: authenticationFailure
);
</script>
</body></html>
从小型身份验证应用程序中获取令牌后，您现在就可以在要显示 Trello 卡的任何页面上使用它了。如果您使用 Trello 的 client.js 方法执行此操作，请使用您打印到控制台的令牌并在下面设置令牌。
// USING THE STORED TOKEN (ON EACH PAGE YOU WANT TO DISPLAY BOARDS)
Trello.setToken('THE_TOKEN');
Trello.get("members/me/cards", function(cards)
$cards.empty();
$.each(cards, function(ix, card)
$("<a>")
.attr(href: card.url, target: "trello")
.addClass("card")
.text(card.name)
.appendTo($cards);
);
);
上面的代码 sn-p 来自 this jsFiddle，但我只是展示了令牌如何适合从 Trello 提取数据的流程。
但这会将我的令牌暴露给世界，任何看到这个令牌的人都可以对我的董事会做恶意的事情！
嗯，是的，你是对的。这就是为什么最好在服务器端做这些事情。
因此，我使用 this small Trello PHP wrapper 来帮助我完成所有这些服务器端。
这是我想要显示我的 Trello 卡片的页面上的样子。在下面的示例中，我从特定列表中提取。如果您想找到自己的 listID，请查看Section 3 on this page。
无论您想在哪里展示-cards.php
<?php
include "PATH-TO/Trello.php"; // Trello.php is from the PHP wrapper mentioned above
$key = "SERVICE-ACCOUNT-APP-KEY"; // get yours at https://trello.com/app-key
$token = "TOKEN-YOU-GOT-FROM-YOUR-TINY-AUTHENTICATE.HTML-APP";
$trello = new \Trello\Trello($key, null, $token);
foreach($trello->lists->get("YOUR-LIST-ID/cards") as $card)
echo($card->name." | ".$card->url."\n");
?>
总结
创建一个新的 Trello“服务”帐户，将其添加到要显示的任何板。服务帐户不是必需的...您自己也可以是帐户...但将其分开可以保护您免受离开公司的人的影响，等等。
创建一个小型应用程序（实际上只是一个一次性使用的网页），该应用程序通过通常的 Trello 身份验证过程通过弹出窗口等等。您将从刚刚创建的服务帐户登录/验证。这将为您提供一个独特的令牌，让 Trello 知道您是合法的，并且您可以访问。
在要显示卡片的任何页面上使用此令牌（将其视为 VIP 访问徽章）。您的用户永远不会看到 Trello 身份验证弹出窗口，因为我们已经向 Trello 展示了我们的 VIP 访问徽章。
打印卡片、白板等！欢欣鼓舞，因为您现在可以向任何人展示卡片，而无需 Trello 帐户。
再次感谢 Ondrej and the folks over at HappyPorch 的有用帖子，并愿意帮助喜欢假装知道如何编码的 UX 设计师 :)
【讨论】：
Ondrej 在这里！我很高兴您发现我们的帖子很有帮助；）我没想到服务器端的事情会这么简单，很高兴知道！快乐的 Trello 黑客！以上是关于显示来自私人 Trello 看板的卡片，访客不需要 Trello 帐户，或者他们需要通过弹出窗口进行授权的主要内容，如果未能解决你的问题，请参考以下文章