Menu
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>
345
Only those users added as members to the board can edit, but any person with the link can view it, even if they don't have a Trello account. Setting a board to public visibility allows all members of Trello to view your board and optionally vote or comment.
Every Trello board has a variety of privacy settings: Private means only people added to the board can access it to view, join, and create and edit cards and content. Workspace means anyone who is a part of your workspace or team can view, join, and create and edit cards and content.
To make sure that these Trello board members have read-only access and can't leave comments, go back into the board menu and change the commenting permissions. Select 'Members' here to make sure that Observers are not able to leave comments. And that's how you grant someone read-only access to your Trello board.
To add members to a board, select Share from the board menu. Search for a user by name or enter an email address to invite them to the board. Click their name to add them to the board. Depending on the board settings, you may need to be an admin to invite someone to the board.
After scouring the web, I found a great solution by the wonderful team over at HappyPorch.
From an email thread with Ondrej at HappyPorch:
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.
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.
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");
}
?>
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.
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.
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.
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 :)
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With