显示来自私人 Trello 看板的卡片，访问者不需要 Trello 帐户，也不需要通过弹出窗口授权

Question

我公司在 Trello（私人看板）上有一个当前项目列表，我们很乐意通过连接到看板在我们的网站上显示它们，以便它们始终是最新的。

使用 this example，我现在可以拉取卡片并将它们呈现在页面上，但前提是您单击 "Connect to Trello"。

为什么用户需要连接？它们是我的板卡上的我的卡片，所以有没有一种方法可以……给他们看卡片（它们只需要是只读的……用户不能 edit/interact 使用它们）？ Trello 应该只需要验证我，而不是我网站的访问者。

有代码解决方案吗？

这是我当前的 JS 片段：

    <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>

Answer 1

我认为您不能完全在客户端执行此操作。您可以通过来自服务器的经过身份验证的 API 调用连接到 Trello，服务器可能会通过 AJAX 调用或类似的方式将数据发送到客户端浏览器。

Answer 2

在网上搜索后，我在 HappyPorch 的优秀团队找到了一个很好的解决方案。

HappyPorch's original solution post.

来自 HappyPorch 与 Ondrej 的电子邮件线程：

The high-level overview is as follows:

You need a Trello account that has access to the board(s). You can use your personal one, or create a "service account" to keeps things (permissions) isolated.

You need to create a small admin app using the Trello API, which will prompt for the login, and request an access token. You will see a login dialog, you will log in with the desired (service) account. Then, using the Javascript API, you will extract the security token.

In your real application you will use the Trello API again. Instead of prompting for login though, you will set the token you previously extracted; the users will then interact with Trello API on behalf of the account that was used to generate the token.

相关代码片段：

用例是您拥有您只想向某人展示的看板，因此他们（用户...您网页的访问者...任何人）没有理由必须对任何内容进行身份验证，更不用说了甚至根本不需要 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);
     });  
 });

上面的代码片段来自 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 "service" 帐户，您可以将其添加到要显示的任何看板。服务帐户不是必需的...您自己可以成为帐户...但将其分开可以保护您免受离开公司等人的影响。
创建一个微型应用程序（实际上只是一个一次性使用的网页），它通过弹出窗口等通常的 Trello 身份验证过程。您将从刚刚创建的服务帐户 login/authenticate。这将为您提供一个独特的令牌，让 Trello 知道您是合法的，并且您可以访问。
在您想要展示卡片的任何页面上使用此令牌（将其视为 VIP 访问徽章）。您的用户永远不会看到 Trello 身份验证弹出窗口，因为我们已经向 Trello 展示了我们的 VIP 访问徽章。
打印出卡片、板等！很高兴，因为您现在可以向任何人展示卡片，而无需他们拥有 Trello 帐户。

再次非常感谢 Ondrej and the folks over at HappyPorch 非常有用 post，并愿意帮助喜欢假装知道如何编码的 UX 设计师 :)

显示来自私人 Trello 看板的卡片，访问者不需要 Trello 帐户，也不需要通过弹出窗口授权

Display cards from a private Trello board without visitors needing a Trello account, or them needing to authorize via popup

javascript

php

jquery

trello

HappyPorch's original solution post.

相关代码片段：

但这会将我的令牌暴露给全世界，任何看到此令牌的人都可以对我的面板进行恶意操作！

总结