javascript - 从私有(private)Trello板上显示卡，而访客不需要Trello帐户，也不需要通过弹出窗口授权

我的公司在Trello(私有(private)董事会)上有一个当前项目的列表，我们很乐意通过连接到董事会在我们的网站上显示它们，以便它们始终是最新的。

现在，使用this example，我可以拉出卡片并将其呈现在页面上，但是仅在单击“连接到Trello”之后。

为什么用户完全需要连接？它们是我板上的MY卡，所以有什么方法可以...向他们显示卡(它们只需要只读...用户就无法编辑/交互)？ 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>

最佳答案

搜寻网络之后，我在HappyPorch的出色团队中找到了一个不错的解决方案。

HappyPorch's original solution post.

通过HappyPorch上Ondrej的电子邮件线程:

相关代码段:

用例是您拥有只想向某人展示的板，因此没有任何理由(用户...您网页的访问者...任何人)必须进行任何身份验证，更不用说甚至需要Trello帐户了完全没有。他们是您的委员会，因此Trello只需要验证您是否具有访问权限即可。

根据HappyPorch的教程，我创建了一个很小的authenticate.html页面，否则该页面为空。我访问此页面一次以验证服务帐户并通过将其打印到控制台来获取 token 。

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>

从小型身份验证应用程序获取 token 后，现在就可以在要显示Trello卡的任何页面上使用它了。如果您使用Trello的 client.js 方法执行此操作，请使用打印到控制台的 token 并在下面设置 token 。

// 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，但我只是显示 token 如何适合从Trello提取数据的流程。

但这将我的 token 公开给了全世界，任何看到此 token 的人都可以对我的董事会做恶意的事情!

是的，你是对的。这就是为什么最好在服务器端进行此操作。

因此，我改为使用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身份验证过程，而没有弹出式窗口。您将从刚刚创建的服务帐户登录/验证。这将为您提供一个唯一的 token ，该 token 使Trello知道您是合法的，并且您具有访问权限。

在要显示卡的任何页面上使用此 token (如VIP访问徽章)。您的用户永远不会看到Trello身份验证弹出窗口，因为我们已经向Trello显示了VIP访问徽章。

打印出卡片，木板等!庆幸，因为您现在可以向任何人显示不需要Trello帐户的卡片。

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

关于javascript - 从私有(private)Trello板上显示卡，而访客不需要Trello帐户，也不需要通过弹出窗口授权，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37095664/