显示来自私人Trello板的卡，无需访问者需要Trello帐户，或者他们需要通过弹出窗口进行授权

Question

My company has a list of current projects on Trello (private board), and we'd love to display them on our website by connecting to the board so that they're always up-to-date. 我的公司列出了Trello（私人董事会）的当前项目，我们希望通过连接到董事会在我们的网站上显示它们，以便它们始终是最新的。

Using this example , I can now pull cards and render them on the page, but only after you click "Connect to Trello". 使用这个例子 ，我现在可以拉出卡片并在页面上渲染它们，但只有在你点击“连接到Trello”之后。

Why does a user need to connect at all? 为什么用户需要连接？ They're MY cards on MY board, so is there a way to just...show them the cards (they would only need to be read-only...users cannot edit/interact with them)? 它们是我在MY板上的MY卡，所以有没有办法只是......向他们展示卡片（他们只需要是只读的......用户无法编辑/与他们互动）？ Trello should only have to authenticate me , not visitors to my website. Trello应该只需要验证我，而不是访问我网站的访问者。

Are there any code solutions? 有没有代码解决方案？

Here's my current JS snippet: 这是我目前的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

After scouring the web, I found a great solution by the wonderful team over at HappyPorch. 在浏览网页后，我在HappyPorch上找到了一个很棒的解决方案。

HappyPorch's original solution post. HappyPorch的原始解决方案帖子。

From an email thread with Ondrej at HappyPorch: 来自HappyPorch的Ondrej的电子邮件主题：

The high-level overview is as follows: 高级概述如下：

You need a Trello account that has access to the board(s). 您需要一个可以访问电路板的Trello帐户。 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. 您需要使用Trello API创建一个小型管理应用程序，它将提示登录，并请求访问令牌。 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. 然后，使用Javascript API，您将提取安全令牌。

In your real application you will use the Trello API again. 在您的实际应用程序中，您将再次使用Trello API。 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 API进行交互。

Relevant code snippets: 相关代码段：

The use case is that you own boards that you just want to show someone, so there's no reason that they (the user...visitors to your webpage...whoever) should have to authenticate anything, let alone even need a Trello account at all. 用例是你拥有你想要向别人展示的板子，所以他们没有理由（用户......你网页的访问者......无论谁）需要验证任何东西，更不用说甚至需要一个Trello账号一点都不 They're YOUR boards, so Trello just needs to verify that YOU have access...not anyone else. 他们是你的董事会，所以Trello只需要验证你有权访问......而不是其他任何人。

Per HappyPorch's tutorial, I created a tiny authenticate.html page that is otherwise empty. 根据HappyPorch的教程，我创建了一个很小的authenticate.html页面，否则它是空的。 I visit this page once to authenticate the service account and grab the token by printing it to the console. 我访问此页面一次以验证服务帐户并通过将其打印到控制台来获取令牌。

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>

Once you get the token from your tiny authentication app, you are now ready to use it on whatever pages you want to display your Trello cards. 从您的小型身份验证应用程序获取令牌后，您现在可以在要显示Trello卡的任何页面上使用它。 If you are doing it with Trello's client.js methods, use the token that you printed to the console and set the token below. 如果您使用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);
     });  
 });

The code snippet above is from this jsFiddle , but I'm just showing how the token fits into the flow of pulling data from Trello. 上面的代码片段来自这个jsFiddle ，但我只是展示了令牌如何适应从Trello中提取数据的流程。

But this exposes my token to the world, and anyone who sees this token can do malicious things to my board! 但这会将我的令牌暴露给全世界，任何看到此令牌的人都可以向我的董事会做恶意事情！

Well yeah, you're right. 好吧，你是对的。 Which is why it's better to do this stuff server-side. 这就是为什么服务器端做这个东西更好的原因。

So instead, I use this small Trello PHP wrapper to help me do all of this server side. 所以相反，我使用这个小的Trello PHP包装器来帮助我完成所有这个服务器端。

Here's what it looks like on my page where I wanted to display my Trello cards. 这就是我想要显示我的Trello卡的页面上的样子。 In the example below, I'm pulling from a specific list. 在下面的示例中，我将从特定列表中提取。 If you're trying to find your own listID, check out Section 3 on this page . 如果您正在尝试查找自己的listID，请查看此页面上的第3部分 。

wherever-you-want-to-show-cards.php 无论-你想做某些秀，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");
    }
?>

Summary 摘要

Create a new Trello "service" account that you add to any boards you want to show. 创建一个新的Trello“服务”帐户，您可以将其添加到要显示的任何板上。 A service account isn't necessary...you yourself could be the account...but keeping it separate protects you from people leaving the company, etc. 服务帐户不是必需的......您自己可以成为帐户...但保持独立可以保护您免受离开公司的人等。
Create a tiny app (really just a one-time use webpage) that goes through the usual Trello authentication process with the popup and what not. 创建一个小应用程序（实际上只是一次性使用的网页），通过常见的Trello身份验证过程与弹出窗口，而不是。 You will login/authenticate from the service account that you just created. 您将从刚刚创建的服务帐户登录/验证。 This will give you a unique token that lets Trello know that you're legit, and that you have access. 这将为您提供一个独特的令牌，让Trello知道您是合法的，并且您有权访问。
Use this token (think of it like a VIP access badge) on any page you want to show cards. 在要显示卡片的任何页面上使用此令牌（将其视为VIP访问徽章）。 Your users won't ever see that Trello authentication popup because we've already shown Trello our VIP access badge. 您的用户将永远不会看到Trello身份验证弹出窗口，因为我们已经向Trello展示了我们的VIP访问徽章。
Print out cards, boards, etc! 打印出卡片，板卡等！ Rejoice, because you can now show anyone cards without them needing a Trello account. 高兴，因为你现在可以显示任何卡，而不需要Trello账户。

Many thanks again to Ondrej and the folks over at HappyPorch for their useful post, and willingness to help out a UX Designer who likes to pretend to know how to code :) 非常感谢Ondrej和HappyPorch的人们提供了有用的帖子，并愿意帮助那些喜欢假装知道如何编写代码的用户体验设计师:)

Answer 2

I don't think you can do this entirely on the client-side. 我认为你不能完全在客户端做到这一点。 You can connect to the Trello via an authenticated API call from your server, which in turn sends that data to the clients browser, perhaps via an AJAX call or similar. 您可以通过来自服务器的经过身份验证的API调用连接到Trello，然后服务器可以通过AJAX调用或类似方式将该数据发送到客户端浏览器。

显示来自私人Trello板的卡，无需访问者需要Trello帐户，或者他们需要通过弹出窗口进行授权

问题描述

2 个解决方案

解决方案1
11 已采纳 2016-05-11 14:04:08

HappyPorch's original solution post. HappyPorch的原始解决方案帖子。

Relevant code snippets: 相关代码段：

But this exposes my token to the world, and anyone who sees this token can do malicious things to my board! 但这会将我的令牌暴露给全世界，任何看到此令牌的人都可以向我的董事会做恶意事情！

Summary 摘要

解决方案2
1 2016-05-08 02:45:23

显示来自私人Trello板的卡，无需访问者需要Trello帐户，或者他们需要通过弹出窗口进行授权

问题描述

2 个解决方案

解决方案1 11 已采纳 2016-05-11 14:04:08

HappyPorch's original solution post. HappyPorch的原始解决方案帖子。

Relevant code snippets: 相关代码段：

But this exposes my token to the world, and anyone who sees this token can do malicious things to my board! 但这会将我的令牌暴露给全世界，任何看到此令牌的人都可以向我的董事会做恶意事情！

Summary 摘要

解决方案2 1 2016-05-08 02:45:23

解决方案1
11 已采纳 2016-05-11 14:04:08

解决方案2
1 2016-05-08 02:45:23