Отображайте карточки с частной платы Trello без посетителей, нуждающихся в учетной записи Trello, или их необходимо разрешить с помощью всплывающего окна

В моей компании есть список текущих проектов на Trello (частная доска), и мы хотели бы показать их на нашем веб-сайте, подключившись к плате, чтобы они всегда были актуальными.

Используя этот пример, теперь я могу извлечь карты и отобразить их на странице, но только после того, как вы нажмете "Подключиться к Trello",.

Зачем пользователю вообще нужно подключаться? Это MY-карты на MY board, так что есть способ просто... показать им карты (они должны были быть только для чтения... пользователи не могут редактировать/взаимодействовать с ними)? 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>

ОТВЕТЫ

Ответ 1

После очистки сети я нашел отличное решение замечательной команды на HappyPorch.

Сообщение о положительном решении HappyPorch.

Из потока сообщений с Ondrej на HappyPorch:

Обзор высокого уровня выглядит следующим образом:

  • Вам нужна учетная запись Trello, у которой есть доступ к доске. Ты можешь используйте свой личный или создайте "служебную учетную запись", чтобы держать вещи (разрешений).

  • Вам нужно создать небольшое приложение для администратора, используя API Trello, который будет запросить логин и запросить токен доступа. Вы увидите логин в диалоговом окне вы войдете в систему с требуемой учетной записью (службой). Затем, используя API Javascript, вы извлечете токен безопасности.

  • В вашем реальном приложении вы снова будете использовать Trello API. Вместо подсказки для входа в систему, вы установите перед вами токен экстрагируют; пользователи будут взаимодействовать с Trello API от имени который использовался для генерации токена.

Соответствующие фрагменты кода:

Вариант использования заключается в том, что у вас есть доски, которые вы просто хотите показать кому-то, поэтому нет причин, чтобы они (пользователь... посетитель вашей веб-страницы... кто бы ни был) должны были аутентифицировать что-либо, не говоря уже о необходимости счет Trello вообще. Это ВАШИ ПЛАТЫ, поэтому Трлло просто должен убедиться, что у тебя есть доступ... никому еще.

В учебнике HappyPorch я создал небольшую страницу 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>

Как только вы получите токен из своего крошечного приложения для проверки подлинности, вы теперь можете использовать его на любых страницах, на которых вы хотите отображать свои карты Trello. Если вы делаете это с помощью методов 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);
     });  
 });

Фрагмент кода выше от этот jsFiddle, но я просто показываю, как маркер вписывается в поток вытягивания данных от Trello.

Но это разоблачает мой токен миру, и любой, кто видит этот знак, может совершать злые действия на моем борту!

Хорошо, да, ты прав. Вот почему лучше делать это на серверной стороне.

Поэтому вместо этого я использую эту небольшую обертку Trello PHP, чтобы помочь мне выполнить всю эту серверную часть.

Вот как это выглядит на моей странице, где я хотел отображать карты Trello. В приведенном ниже примере я выхожу из определенного списка. Если вы пытаетесь найти свой собственный списокID, посмотрите Раздел 3 на этой странице.

, где вы-хотите-на-шоу-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 со всплывающим окном, а что нет. Вы войдете/авторизуетесь из только что созданной учетной записи службы. Это даст вам уникальный токен, который позволит Trello знать, что вы являетесь законным, и что у вас есть доступ.

  • Используйте этот токен (подумайте об этом как значок VIP-доступа) на любой странице, которую вы хотите показать. Ваши пользователи никогда не смогут увидеть всплывающее окно аутентификации Trello, потому что мы уже показали Trello наш значок VIP-доступа.

  • Распечатайте карты, платы и т.д.! Радуйтесь, потому что теперь вы можете показать все карты без необходимости иметь учетную запись Trello.

Еще раз спасибо Ondrej и людям на HappyPorch за их полезную почту и готовность помочь дизайнеру UX, который любит притворяться знать, как закодировать:)

Ответ 2

Я не думаю, что вы можете сделать это полностью на стороне клиента. Вы можете подключиться к Trello через аутентифицированный вызов API с вашего сервера, который, в свою очередь, отправляет эти данные в браузер клиентов, возможно, через вызов AJAX или аналогичный.