javascript - 显示来自私有(private) Trello 看板的卡片,访问者不需要 Trello 帐户,也不需要通过弹出窗口授权

标签 javascript php jquery trello

我公司在 Trello(私有(private)看板)上有一个当前项目列表,我们很乐意通过连接到看板在我们的网站上显示它们,以便它们始终是最新的。

使用 this example ,我现在可以提取卡片并将它们呈现在页面上,但前提是您单击“连接到 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's original solution post.

来自 HappyPorch 的 Ondrej 的电子邮件线程:

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.

相关代码片段:

用例是您拥有您只想向某人展示的看板,因此他们(用户...您网页的访问者...任何人)没有理由必须对任何内容进行身份验证,更不用说甚至需要一个 Trello 帐户。它们是您的看板,因此 Trello 只需要验证您是否有权访问...而不是其他任何人。

根据 HappyPorch 的教程,我创建了一个很小的 ​​authenticate.html 页面,否则它是空的。我访问此页面一次以验证服务帐户并通过将其打印到控制台来获取 token 。

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>

一旦您从您的微型身份验证应用程序获得 token ,您现在就可以在您想要显示您的 Trello 卡片的任何页面上使用它。如果您使用 Trello 的 client.js 方法执行此操作,请使用您打印到控制台的 token 并在下面设置 token 。

// 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);
     });  
 });

上面的代码片段来自this jsFiddle ,但我只是展示 token 如何适应从 Trello 提取数据的流程。

但这会将我的 token 暴露给全世界,任何看到此 token 的人都可以对我的面板进行恶意操作!

是的,你是对的。这就是为什么最好在服务器端执行此操作。

因此,我使用 this small Trello PHP wrapper帮助我完成服务器端的所有工作。

这是我想要显示我的 Trello 卡片的页面的样子。在下面的例子中,我从一个特定的列表中提取。如果您要查找自己的 listID,请查看 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");
    }
?>

总结

  1. 创建一个新的 Trello“服务”帐户,您可以将其添加到要显示的任何看板。服务帐户不是必需的……您自己可以成为帐户……但是将它分开可以保护您免受离开公司等人的影响。

  2. 创建一个微型应用程序(实际上只是一个一次性使用的网页),该应用程序通过弹出窗口等通常的 Trello 身份验证过程。您将从刚刚创建的服务帐户登录/验证。这将为您提供一个独特的 token ,让 Trello 知道您是合法的,并且您可以访问。

  3. 在您想要展示卡片的任何页面上使用此 token (将其视为 VIP 访问徽章)。您的用户永远不会看到 Trello 身份验证弹出窗口,因为我们已经向 Trello 展示了我们的 VIP 访问徽章。

  4. 打印出卡片、板等!很高兴,因为您现在可以向任何人展示卡片,而无需他们拥有 Trello 帐户。

再次感谢Ondrej and the folks over at HappyPorch感谢他们有用的帖子,并愿意帮助喜欢假装知道如何编码的 UX 设计师 :)

关于javascript - 显示来自私有(private) Trello 看板的卡片,访问者不需要 Trello 帐户,也不需要通过弹出窗口授权,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37095664/

相关文章:

javascript - jquery 我正在尝试从表单外部的按钮将隐藏字段附加到隐藏的 div

php 引用条

php - onbeforeunload 似乎并不总是被触发

javascript - 使文本从右侧滑入,而不是从顶部滑入

javascript - 快速 Jquery .load 聊天不起作用

javascript - AJAX 呈现的表单不发送 RAILS 中的参数

javascript - wrap() 多次重复元素 - jQuery

php - 如何防止 PHP 中的 SQL 注入(inject)?

php - mysql 将值插入表中?

javascript - 输入 key 表单提交因 HTML5 日期输入而失败