个人中心
gpt4 book ai didi

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

转载 作者：IT王子 更新时间：2023-10-29 00:05:22 26 4
gpt4 key购买 nike

我公司在 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/

26 4 0
文章推荐： java - JPA-连接非实体类中的两个表
文章推荐： linux - 文件级别的 USB 大容量存储
文章推荐： linux - 有没有办法检查最近是否刷新了处理器缓存？
文章推荐： javascript - 如何用 PHP 压缩 JSON？
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com