Search code examples
javascriptphpjquerytrello

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

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.

Using this example, I can now pull cards and render them on the page, but only after you click "Connect to 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)? Trello should only have to authenticate me, not visitors to my website.

Are there any code solutions?

Here's my current JS snippet:

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

  • After scouring the web, I found a great solution by the wonderful team over at HappyPorch.

    HappyPorch's original solution post.

    From an email thread with Ondrej at HappyPorch:

    The high-level overview is as follows:

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

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

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

    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. They're YOUR boards, so Trello just needs to verify that YOU have access...not anyone else.

    Per HappyPorch's tutorial, I created a tiny authenticate.html page that is otherwise empty. I visit this page once to authenticate the service account and grab the token by printing it to the console.

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

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

    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.

    Here's what it looks like on my page where I wanted to display my Trello cards. 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.

    wherever-you-want-to-show-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

    1. Create a new Trello "service" account that you add to any boards you want to show. A service account isn't necessary...you yourself could be the account...but keeping it separate protects you from people leaving the company, etc.

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

    3. Use this token (think of it like a VIP access badge) on any page you want to show cards. Your users won't ever see that Trello authentication popup because we've already shown Trello our VIP access badge.

    4. Print out cards, boards, etc! Rejoice, because you can now show anyone cards without them needing a Trello account.

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