How to access the trello API from within a powerup?

Question

How can I make queries against the trello API from within a powerup? This seems like such an obvious question but it doesn't seem to be covered that I can find.

My simple powerup looks like this so far:

var boardButtonCallback = function(t){
  return t.popup({
    title: 'Tools',
    items: [
      {
        text: 'Hide Duplicates',
        callback: function(t){

          var cardQueryCb = function(result){
            console.log(result);
          }
          var cardQ = 'https://trello.com/1/boards/[board_id]/cards/all';
          fetch(cardQ).then(function(response) {
            return response.json();
          }).then(function(data) {
            console.log(data);
          });

          return t.cards('id', 'name')
          .then(cardQueryCb);
        }
      }
    ]
  });
};

TrelloPowerUp.initialize({
  'board-buttons': function(t, options){
    return [{
      text: 'Duplicates',
      callback: boardButtonCallback
    }];
  }
});

The response object after the call to fetch says the call is unauthorized.

I would have thought that calling this code from within the context of the power up would be considered authorized. While I'm logged into trello, I'm able to put that address into my browser and get a valid response - how come the javascript call doesn't also result in a valid response?

More importantly, how can I get a successful response from that URL?

Answer 1

Since your power-up is run through an iframe, it's not actually coming from the Trello page itself so you need to specify your API key and token in the GET URL.

Example:

https://api.trello.com/1/boards/560bf4298b3dda300c18d09c?fields=name,url&key={YOUR-API-KEY}&token={AN-OAUTH-TOKEN}

The info for getting your API key and token can be found here: https://trello.readme.io/v1.0/reference#api-key-tokens