javascript — показ карт с личной доски объявлений Trello без посетителей, которым требуется учетная запись Trello, или если им не требуется авторизация через всплывающее окно
У моей компании есть список текущих проектов на Trello (частная доска объявлений), и мы хотели бы отобразить их на нашем веб-сайте, подключившись к доске объявлений, чтобы они всегда были в курсе событий.
С помощью этот пример, Теперь я могу вытащить карты и отобразить их на странице, но только после того, как вы нажмете «Подключиться к 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>
Решение
Поискав в Интернете, я нашел отличное решение замечательной команды на HappyPorch.
Из цепочки писем с Ондреем на HappyPorch:
Общий обзор выглядит следующим образом:
Вам нужна учетная запись Trello, у которой есть доступ к плате (ам). Вы можете
используйте свой личный или создайте «учетную запись службы», чтобы хранить вещи
(разрешения) изолированы.Вам нужно создать небольшое приложение администратора с помощью API Trello, которое будет
запросить логин и запросить токен доступа. Вы увидите логин
диалоговое окно, вы войдете в систему с нужной (сервисной) учетной записью. Затем, используя
API Javascript, вы извлечете токен безопасности.В вашем реальном приложении вы снова будете использовать API Trello. Вместо
запросив вход в систему, вы установите токен ранее
экстрагируют; пользователи будут взаимодействовать с Trello API от имени
учетная запись, которая использовалась для создания токена.
Соответствующие фрагменты кода:
Сценарий использования заключается в том, что у вас есть доски объявлений, которые вы просто хотите показать кому-то, поэтому нет никакой причины, по которой им (пользователю … посетителям вашей веб-страницы … кому бы то ни было) придется аутентифицировать что-либо, не говоря уже о том, чтобы даже иметь учетную запись Trello совсем. Это ВАШИ доски, поэтому 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. В приведенном ниже примере я вытащил из определенного списка. Если вы пытаетесь найти свой собственный listID, проверьте Раздел 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.
Большое спасибо еще раз Ондрей и люди на HappyPorch за их полезный пост и готовность помочь UX Designer, который любит притворяться, что умеет писать код 🙂
Другие решения
Я не думаю, что вы можете сделать это полностью на стороне клиента. Вы можете подключиться к Trello через аутентифицированный вызов API с вашего сервера, который, в свою очередь, отправляет эти данные в браузер клиентов, возможно, через вызов AJAX или аналогичный.