如何构建Trello Chrome扩展程序-API身份验证
在SitePoint，我們廣泛使用Trello。 當然，它有其獨特之處，可以在各個領域使用一兩個改進，但是在大多數情況下，它徹底改變了工作人員，作者及其編輯的協作經驗。
我最近發現自己需要從非會員的特定列表中導出卡標題。 默認情況下，Trello僅支持將全部面板導出到JSON，這會使我的選項卡在100個成員以上，數百張卡片的面板上崩潰。 商店中有一小批Trello擴展程序，但是奇怪的是，沒有人以任何方式導出列表。
讓我們制作一個可以為我們做到這一點的Chrome擴展程序！ 如果您急于要查看最終結果，請參閱Github存儲庫以獲取本教程代碼的最終版本。
構建一個Chrome擴展程序
我認為最好的方法是擴展，因為僅執行這些導出的單獨應用程序可能太多了。 此外，Trello有一個漂亮的API，我們可以使用它來獲取所需的一切。 我還認為這是回到擴展開發的很好過渡，這是我一段時間沒有做的事情了。
自舉
我將重用我可信賴的ChromeSkel存儲庫-我很久以前構建的骨架擴展，以使開始使用Chrome Extension開發更加容易。 作為參考，如果您想查看我過去編寫的其他一些Chrome擴展教程，請參見此處和此處 。
首先，將存儲庫克隆到任何文件夾。
git clone https://github.com/Swader/ChromeSkel_a.git要查看其是否有效，請將其加載到Chrome中。 進入擴展程序標簽，然后點擊“加載解壓的擴展程序”。 如果沒有該選項，請確保選中右上角的“開發人員模式”復選框。
加載后，它應該出現在您的擴展列表中。
認證方式
盡管我們可以使用Chrome擴展程序簡單地在屏幕上收集數據并進行解析，但事實證明Trello有時并不可靠，并且往往會在人口眾多的板上崩潰。 這就是為什么我們只使用Chrome擴展程序與trello.com域的集成來在列表上創建新的上下文菜單選項（“導出卡”選項），然后在后臺頁面執行整個邏輯，獲取通過API的數據。
關鍵與秘密
要為Trello生成應用程序密鑰，請在登錄時訪問https://trello.com/1/appKey/generate 。這將為您提供可用于帳戶的密鑰和機密。 在本教程的其余部分，請考慮將{{KEY}}用作此密鑰，并相應地替換其內容。
獲得密鑰后，在scripts子文件夾中創建一個文件key.js ：
// key.js var APP_KEY = '{{KEY}}';使用它時，可以刪除fragments和fancy-settings文件夾。 我們將不需要它們。
工作流程和清單
擴展程序的工作流程如下：
- 給定用戶打開Trello板
- 檢查該用戶是否授權擴展使用他的Trello帳戶
- 如果是，請繼續
- 如果不是，請使用授權按鈕打開設置頁面，使他們可以完成此過程
- 獲得授權后，自動關閉設置頁面并保留擴展名的授權
要使擴展程序自動打開包含某些內容的新標簽，我們需要將該內容標記為“可訪問網絡的資源” 。
為此，請創建文件夾settings ，其中將包含我們的設置頁面，并將擴展的清單更新為如下所示：
{"name": "Trello Helper","version": "0.1","manifest_version" : 2,"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.","background" : {"page" : "background.html","persistent": false},"page_action" :{"default_icon": {"19": "icons/19.png","38": "icons/38.png"}},"content_scripts": [{"matches": ["https://trello.com/b/*"],"js": ["lib/jquery-2.1.1.min.js","scripts/main.js"],"run_at": "document_idle"}],"permissions": ["tabs"],"icons": {"16": "icons/16.png","48": "icons/48.png","128": "icons/128.png"},"web_accessible_resources": ["settings/index.html"],"options_page": "settings/index.html" }其中大多數應該是熟悉的。 我們設置版本，提供一些元數據，定義圖標并聲明一個事件頁面 ，加載一些必備的內容腳本（ Trello JS客戶端庫需要jQuery），最后定義“ web_accessible_resources”，因此我們可以使用設置頁面正在建設中。 我們還將擴展的影響限制為https://trello.com/b/* ，這僅意味著委員會網址。
設置和授權
要構建設置頁面，我們編寫一個簡單的HTML頁面。 為了演示起見，在這種情況下，我將使其保持極其簡單。 我們將使用Foundation對其進行樣式設置（目前，僅用于按鈕，但是我們將在以后的文章中進行更好的設置頁面），因此請下載Foundation Essentials捆綁包 ，并將其內容取消存檔到/settings ，以便index.html屬于該文件夾。 您應該具有這樣的文件夾結構：
如果您有一些額外的文件夾在我的屏幕快照中看不到，請隨時刪除它們。 創建文件settings/js/settings.js ， settings/js/settings.js將其留空。
好吧，讓我們開始做生意。 因此，可以認為，用戶可以通過轉到“擴展”選項卡中的“選項”，或在未經身份驗證時嘗試使用擴展名來最終進入此頁面。 讓我們用兩個div構建一個相當基本的HTML頁面-一個用于在用戶使用“注銷”按鈕進行身份驗證時進行，另一個用于在用戶仍未經身份驗證并需要單擊“授權”按鈕時進行。 用以下內容替換index.html的內容：
<!doctype html> <html class="no-js" lang="en"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Trello Helper Settings</title><link rel="stylesheet" href="css/foundation.css"/><script src="js/vendor/modernizr.js"></script> </head> <body><div class="row"><div class="large-12 columns"><h1>Trello Helper Settings</h1></div> </div><div class="row"><div class="large-12 columns"><div class="panel" id="trello_helper_loggedout" style="display: none"><p>To get going, you'll need to authorize the extension to use your Trello account.</p><p>Do it by clicking the big Authorize button below.</p><a href="#" class="medium success button" id="trello_helper_login">Authorize</a><br/></div><div class="panel" id="trello_helper_loggedin" style="display: none"><p>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.</p><a href="#" class="medium success button" id="trello_helper_logout">Log out</a><br/></div></div> </div><script src="../scripts/key.js"></script> <script src="js/vendor/jquery.js"></script> <script src="js/settings.js"></script> </body> </html>我們有兩個div，分別是“登錄”和“注銷”按鈕，然后插入所需的JS。 在這種情況下，我們使用的是Foundation的默認包含的jQuery，但是如果您選擇使用自己下載的項目在項目中的其他位置，那真的沒關系，以防您像我一樣獲取了最新的版本（更多信息稍后）。
現在讓我們添加一些邏輯。 打開settings.js并提供以下內容：
function init() {// Message and button containersvar lout = $("#trello_helper_loggedout");var lin = $("#trello_helper_loggedin");// Log in button$("#trello_helper_login").click(function () {});// Log out button$("#trello_helper_logout").click(function () {});if (!localStorage.trello_token) {$(lout).show();$(lin).hide();} else {$(lout).hide();$(lin).show();} } $(document).ready(init);通過閱讀文檔 ，我們可以發現在對客戶端應用進行身份驗證時， localStorage trello_token中將存在trello_token 。 這意味著我們可以將其用作何時顯示每個div的指標。 根據trello_token ，在init函數中，我們抓取div，將單擊處理程序添加到按鈕（尚無邏輯），最后，我們隱藏適當的div。
例如，當用戶通過身份驗證時，他們將獲得如下屏幕：
現在讓我們獲取Trello JS客戶端。
Trello文檔并不是真正考慮到Chrome擴展，因此建議在從其域中檢索JS客戶端庫時，將key附加到URL，例如：
我們實際上并不能做到這一點，因為我們正在處理擴展的封閉環境，并且出于性能原因，將其本地提供更為有意義。 因此，我們訪問上述URL，但沒有關鍵參數：
https://api.trello.com/1/client.js將此文件的內容保存到lib/trello_client.js ，然后通過將其添加到末尾<body>標記附近的scripts部分中，確保我們的設置頁面lib/trello_client.js其加載，如下所示：
<script src="js/vendor/jquery.js"></script> <script src="../lib/trello_client.js"></script> <script src="js/settings.js"></script>這將確保我們的Trello對象在JavaScript中可用，從而使我們能夠使用它的method 。 讓我們先注銷。 將注銷按鈕的單擊處理程序更改為：
$("#trello_helper_logout").click(function () {Trello.deauthorize();location.reload();});這就是Trello取消授權的全部。 我們調用該方法并重新加載我們所在的頁面（即設置屏幕）。
現在，讓我們處理登錄，這有點復雜。
// Log in button$("#trello_helper_login").click(function () {Trello.setKey(APP_KEY);Trello.authorize({name: "Trello Helper Extension",type: "redirect",expiration: "never",interactive: true,scope: {read: true, write: false},success: function () {// Can't do nothing, we've left the page},error: function () {alert("Failed to authorize with Trello.")}});});按照在線文檔的邏輯，我們看到Trello對象具有setKey方法，我們可以使用它來設置它。 然后，我們將authorize方法付諸行動。 根據文檔，使用類型popup而不是redirect將要求用戶在收到應用程序時將密鑰手動粘貼到應用程序中，這不是我們想要的。 但是，如果我們使用重定向，則頁面將重定向到身份驗證并在完成后返回。 設置為false時， interactive字段將同時取消彈出窗口和重定向，而僅檢查localStorage.trello_token值是否存在。 根據文檔，我們需要先通過重定向調用常規授權，然后返回到設置頁面，然后再次調用它，但將交互設置為false，這將使其在上一次重定向時獲取令牌提供。 一切都令人費解，但是可以。
不過，還有另一個問題。 如果在設置頁面打開后立即調用非交互式authorize ，則會在頁面上引起錯誤，因為授權后的重定向尚未發生。 一種替代方法是在我們的設置頁面中添加另一個按鈕“確認”或類似的內容，該按鈕在從Trello重定向回到我們的設置頁面后出現，從而使用戶可以手動啟動非交互式授權。 但是，這似乎有點像UX的噩夢。 最后，我選擇了第三個解決方案。
將以下代碼保存到lib/hashSearch.js 。
/* As found on: http://stackoverflow.com/questions/3729150/retrieve-specific-hash-tags-value-from-url*/var HashSearch = new function () {var params;this.set = function (key, value) {params[key] = value;this.push();};this.remove = function (key, value) {delete params[key];this.push();};this.get = function (key, value) {return params[key];};this.keyExists = function (key) {return params.hasOwnProperty(key);};this.push= function () {var hashBuilder = [], key, value;for(key in params) if (params.hasOwnProperty(key)) {key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined"hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));}window.location.hash = hashBuilder.join("&");};(this.load = function () {params = {}var hashStr = window.location.hash, hashArray, keyValhashStr = hashStr.substring(1, hashStr.length);hashArray = hashStr.split('&');for(var i = 0; i < hashArray.length; i++) {keyVal = hashArray[i].split('=');params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1];}})(); }正如從StackOverflow答案中獲取的那樣 ，這個小實用程序可幫助我們從URL中獲取特定哈希值。
當您通過redirect方式向Trello授權時，它將重定向回到其原始頁面，但URL中帶有令牌。 該令牌將是Trello JS客戶端所需的auth令牌。 因此，有理由認為，如果我們可以檢測到URL中存在此令牌，則可以得出結論，我們正在處理Trello的重定向，因此可以自動安全地觸發非交互式authorize協議。
將hashSearch添加到設置頁面后，就像這樣…
<script src="../scripts/key.js"></script> <script src="js/vendor/jquery.js"></script> <script src="../lib/trello_client.js"></script> <script src="../lib/hashSearch.js"></script> <script src="js/settings.js"></script>… settings.js文件最后應如下所示：
function init() {// Check if page load is a redirect back from the auth procedureif (HashSearch.keyExists('token')) {Trello.authorize({name: "Trello Helper Extension",expiration: "never",interactive: false,scope: {read: true, write: false},success: function () {},error: function () {alert("Failed to authorize with Trello.")}});}// Message and button containersvar lout = $("#trello_helper_loggedout");var lin = $("#trello_helper_loggedin");// Log in button$("#trello_helper_login").click(function () {Trello.setKey(APP_KEY);Trello.authorize({name: "Trello Helper Extension",type: "redirect",expiration: "never",interactive: true,scope: {read: true, write: false},success: function () {// Can't do nothing, we've left the page},error: function () {alert("Failed to authorize with Trello.")}});});// Log out button$("#trello_helper_logout").click(function () {Trello.deauthorize();location.reload();});if (!localStorage.trello_token) {$(lout).show();$(lin).hide();} else {$(lout).hide();$(lin).show();} } $(document).ready(init);您現在可以嘗試擴展。 加載擴展選項卡，單擊選項鏈接，然后測試身份驗證和注銷。 一切都應該正常工作。
結論
在這一部分中，我們構建了擴展的基礎，通過基于基金會的自定義設置屏幕并使用Trello的JavaScript客戶端庫來實現身份驗證。
在下一部分中，我們將在擴展程序的后面構建整個邏輯，然后進行總結。
From: https://www.sitepoint.com/build-trello-chrome-extension-api-authentication/
總結
以上是生活随笔為你收集整理的如何构建Trello Chrome扩展程序-API身份验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用代码生成小程序二维码，上午可以生成下午
- 下一篇： 注销域名的经历