Trello Chrome 확장 제작 방법 -API 인증

SitePoint에서 우리는 Trello를 광범위하게 사용합니다. 물론, 그것은 단점이 있으며 다양한 분야에서 개선을 사용할 수 있지만 대부분의 경우 직원뿐만 아니라 저자와 편집자의 공동 경험에 혁명을 일으켰습니다.

나는 최근에 비 멤버의 특정 목록에서 카드 제목을 내보내는 것이 필요하다는 것을 알게되었습니다. 기본적으로 Trello는 JSON에 대한 전체 보드 수출 만 지원하며 수백 장의 카드를 가진 100 명 이상의 회원 보드에서 내 탭이 충돌하는 것입니다. 상점에는 작은 Trello 확장 군이 있지만 호기심이 없지만 수출하는 것은 어떤 식 으로든 목록을 수출하지 않습니다. 우리를 위해 이것을 할 수있는 크롬 확장을 만들어 봅시다! 서두르고 있고 최종 결과를보고 싶다면이 튜토리얼 코드의 최종 버전은 Github Repo를 참조하십시오. 키 테이크 아웃

크롬 스켈 리포지토리를 활용하여 Trello Chrome 확장의 개발을 시작하여 사전 제작 된 골격으로 프로세스를 단순화합니다.

. Trello API 키와 인증을위한 비밀을 얻으십시오. Trello 웹 사이트를 방문하여 확장자가 Trello 계정과 안전하게 상호 작용할 수 있도록하는 데 중요합니다.

. 기본 HTML 구조 및 JavaScript를 사용하여 사용자 인증 상태를 사용하여 사용자 인증 상태를 사용하여 사용자 인증을 처리하기 위해 확장자 내에서 설정 페이지를 구현하십시오. Trello JavaScript 클라이언트 라이브러리 및 사용자 정의 스크립트 (hashsearch.js)를 사용하여 인증 토큰을 효과적으로 관리하여 안전하고 효율적인 사용자 인증을 보장합니다. 매니페스트 파일을 사용하여 특정 Trello 보드 URL에 대한 확장 기능을 간소화하여 확장자 작동 범위를 관련 페이지로 제한하여 성능을 향상시킵니다.

크롬 확장 제작 나는 이러한 수출 만 수행하는 별도의 애플리케이션이 너무 많을 수 있기 때문에 최선의 접근 방식이 확장 일 것이라고 생각했습니다. 게다가, Trello는 우리가 필요한 모든 것을 얻는 데 사용할 수있는 멋진 API를 가지고 있습니다. 나는 또한 그것이 확장 개발로 다시 전환 할 것이라고 생각했다. 부트 스트랩 나는 신뢰할 수있는 Chromeskel Repo를 재사용 할 것입니다 - 크롬 확장 개발을보다 쉽게 ​​시작하기 위해 오래 전에 구축 한 골격 확장. 참고로, 과거에 작성한 다른 Chrome Extension 튜토리얼을보고 싶다면 여기와 여기를 참조하십시오. 우리는 repo를 모든 폴더로 복제하는 것으로 시작합니다

가 작동하는지 확인하려면 크롬에로드하십시오. 확장자 탭으로 이동하여 "포장되지 않은 확장을로드"를 클릭하십시오. 옵션이 없으면 오른쪽 상단에있는 "개발자 모드"확인란을 확인하십시오. 일단로드되면 확장 목록에 나타나야합니다

인증 크롬 확장으로 화면의 데이터를 수확하고 구문 분석 할 수 있지만 Trello는 때때로 신뢰할 수없는 것으로 입증되었으며 인구가 많은 보드에서 충돌하는 경향이 있습니다. 그렇기 때문에 Chrome Extension의 Trello.com 도메인과의 통합을 사용하여 목록에서 새로운 컨텍스트 메뉴 옵션 ( "내보내기 카드"옵션)을 만들면 백그라운드 페이지에서 전체 로직을 수행하여 API를 통한 데이터 키와 비밀 Trello의 애플리케이션 키를 생성하려면 로그인하는 동안 https://trello.com/1/appkey/generate를 방문하십시오.이를 통해 계정에서 사용할 수있는 키와 비밀이 제공됩니다. 이 튜토리얼의 나머지 부분에서 {{key}}} 이이 키로 고려하고 그에 따라 내용을 바꾸십시오. 일단 키가 있으면 스크립트 하위 폴더에서 파일 키를 만듭니다 .JS :

당신이 그것을하는 동안, 당신은 조각과 멋진 세팅 폴더를 삭제할 수 있습니다. 우리는 그들을 필요로하지 않을 것입니다.

워크 플로 및 매니페스트 확장의 워크 플로에 대한 아이디어는 다음과 같습니다

주어진 사용자에게 Trello 보드를 엽니 다 상기 사용자가 자신의 Trello 계정을 사용하기 위해 확장자가 승인되었는지 확인하십시오. 그렇다면

를 진행하십시오 아니오 인 경우, 권한 부여 버튼이있는 설정 페이지를 열어 절차를 완료 할 수 있습니다. 일단 승인되면 설정 페이지를 자동으로 닫고 확장자가 승인 된 를 유지하십시오.

확장이 일부 컨텐츠로 새 탭을 자동으로 열려면 해당 컨텐츠를 "웹 액세스 리소스"로 표시해야합니다. 이 목적으로 설정 페이지가 포함 된 폴더 설정을 만들고 다음과 같이 보이도록 확장자의 매니페스트를 업데이트하십시오.

이 중 대부분은 친숙해야합니다. 우리는 버전을 설정하고, 메타 데이터를 제공하고, 아이콘을 정의하고, 이벤트 페이지를 선언하고, 전제 조건 컨텐츠 스크립트를로드하고 (Trello JS 클라이언트 라이브러리에 jQuery가 필요함) 마지막으로 "web_accessible_resources"를 정의하여 설정 페이지를 사용할 수 있습니다. 건물 중. 또한 확장의 효과를 https://trello.com/b/*로 제한합니다. 설정 및 인증 설정 페이지를 작성하려면 간단한 HTML 페이지를 작성합니다. 시연 목적 으로이 경우 매우 간단하게 유지하겠습니다. 우리는 기초를 사용하여 스타일을 지정하기 위해 (지금은 버튼에 대해서만, 향후 게시물에서 더 나은 설정 페이지를 만들기 위해 노력할 것입니다), Foundation Essentials 번들을 다운로드하고 그 내용을 /설정으로 만들지 않도록합니다. index.html은 해당 폴더에 속합니다. 다음과 같은 폴더 구조가 있어야합니다.

내 스크린 샷에 보이지 않는 여분의 폴더가 있으면 언제든지 삭제하십시오. 파일 설정/js/settings.js를 만듭니다 알겠습니다. 사업을 시작합시다. 따라서 사용자는 확장 탭에서 "옵션"으로 이동하거나 승인 될 때 ​​확장자를 사용 하여이 페이지에서 끝납니다. 사용자가 "로그 아웃"버튼으로 인증 될 때와 하나는 여전히 승인되지 않았으며 승인 버튼을 클릭 해야하는 경우 두 개의 DIV가있는 상당히 기본적인 HTML 페이지를 작성하겠습니다. index.html의 내용을 다음으로 바꾸십시오

우리는 두 개의 div, 로그인 및 로그 아웃 버튼이 있으며 필요한 JS를 가져옵니다. 이 경우, 우리는 Foundation의 기본값을 사용하고 있지만 JQuery가 포함되어 있지만 프로젝트의 다른 곳에서 자신의 다운로드를 사용하기로 선택했는지는 중요하지 않습니다. 나중에). 이제 몇 가지 논리를 추가합시다. settings.js를 열고이 내용을 제공하십시오 :

문서를 읽으면 클라이언트 앱이 인증되면 LocalStorage에 Trello_token이 존재한다는 것을 알 수 있습니다. 이것은 우리가 각 divs를 보여줄 때의 지표로 사용할 수 있음을 의미합니다. Init 함수에서 DIVS를 잡고 버튼에 클릭 핸들러를 추가하고 (아직 논리가 없음) Trello_token에 따르면 적절한 div를 숨 깁니다. 예를 들어 사용자가 인증을 받으면 이와 같은 화면이 나타납니다.

git clone https://github.com/Swader/ChromeSkel_a.git

지금 Trello JS 클라이언트를 가져 오자.

Trello 문서는 실제로 Chrome 확장을 염두에두고 작성되지 않았으며,

와 같은 도메인에서 JS 클라이언트 라이브러리를 검색하는 동안 URL에 키를 첨부하는 것이 좋습니다.

우리는 확장의 닫힌 환경을 다루는 동안 실제로 그렇게 할 수는 없습니다. 성능의 이유로 로컬로 이용할 수있게하는 것이 훨씬 더 합리적이라는 것을 알 수 있습니다. 따라서 위의 URL을 방문하지만 키 매개 변수는 없습니다 :

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

이 파일의 내용을 lib/trello_client.js에 저장 한 다음 태그 근처의 스크립트 섹션에 추가하여 설정 페이지를로드하십시오.

이것은 JavaScript에서 Trello 객체를 사용할 수 있도록하여 메소드를 사용할 수 있습니다. 먼저 로그 아웃을 처리하겠습니다. 로그 아웃 버튼의 클릭 핸들러를 다음과 같이 변경하십시오.

그게 전부입니다. 우리는 메소드를 호출하고 우리가있는 페이지를 다시로드합니다 (설정 화면, 즉). 이제 로그인을 처리해 봅시다.

git clone https://github.com/Swader/ChromeSkel_a.git

온라인 문서의 논리에 따라 Trello 객체에는 세트 키 메소드가있어서 설정하는 데 적절하게 사용합니다. 그런 다음 우리는 승인 방법을 행동으로 부릅니다. 문서에 따르면, 리디렉션 대신 유형 팝업을 사용하려면 사용자가 수신 할 때 비밀 키를 앱에 수동으로 붙여 넣어야합니다. 이는 우리가 찾고있는 것이 아닙니다. 그러나 리디렉션을 사용하면 페이지가 인증으로 리디렉션되고 다시 완료됩니다. 대화식 필드는 False로 설정되면 팝업과 리디렉션을 모두 무효화하고 대신 만

가 localStorage.trello_token 값이 존재하는지 확인합니다. 문서에 따르면 먼저 정기적 인 승인을 리디렉션으로 호출 한 다음 설정 페이지로 돌아 오면 다시 호출해야하지만 대화식으로 설정된 경우 이전 리디렉션의 토큰을 잡을 수 있습니다. 제공. 모두 약간 복잡하지만 작동합니다. 또 다른 문제가 있습니다. 설정 페이지가 열린 직후에 비 응체 인증 권한을 호출하면 인증 후 리디렉션이 아직 발생하지 않았기 때문에 페이지에 오류가 발생합니다. 대안은 Trello에서 다시 설정 페이지로 리디렉션 한 후 나타나는 설정 페이지에 다른 버튼 "확인"또는 이와 유사한 버튼을 추가하여 사용자가 비 중연자 인증을 수동으로 시작할 수 있습니다. 그러나 이것은 UX 악몽처럼 보입니다. 결국, 나는 세 번째 솔루션을 선택했습니다. 다음 코드를 lib/hashsearch.js에 저장하십시오

stackoverflow 답변에서 잡은이 작은 유틸리티는 URL에서 특정 해시의 값을 잡는 데 도움이됩니다.

리디렉션 모드를 통해 Trello를 승인하면 URL의 토큰으로 시작된 페이지로 다시 리디렉션됩니다. 이 토큰은 Trello JS 클라이언트가 필요로하는 인증 토큰입니다. 따라서 URL 에서이 토큰의 존재를 감지 할 수 있다면 Trello에서 리디렉션을 다루고 있으므로 비 인터랙티브 인증 프로토콜을 자동으로 안전하게 트리거 할 수 있다고 결론을 내릴 수 있습니다.

. 설정 페이지에 해시 검색을 추가 한 후…

<span>// key.js </span><span>var APP_KEY = '{{KEY}}';</span> 이제 확장을 시도해 볼 수 있습니다. 확장자 탭을로드하고 옵션 링크를 클릭하고 인증 테스트 및 로그 아웃을 테스트하십시오. 모든 것이 잘 작동해야합니다.

결론 이 부분에서는 확장 기본 사항을 구축하여 사용자 정의 기초 구동 설정 화면을 통해 인증을 구현하고 Trello의 JavaScript 클라이언트 라이브러리를 사용합니다. 다음 부분에서는 확장 뒤에 전체 논리를 구축하고 물건을 마무리합니다. API 인증을 통해 Trello Chrome 확장을 구축하는 것에 대한 자주 묻는 질문 (FAQ) trello chrome 확장을 구축하기 시작하는 방법은 무엇입니까?

Trello Chrome 확장을 시작하려면 JavaScript와 Chrome의 확장 개발 환경을 기본적으로 이해해야합니다. 또한 Trello 계정을 만들고 API 키 및 토큰을 생성해야합니다. 이렇게하면 확장이 Trello의 API와 상호 작용할 수 있습니다. 이러한 전제 조건이 있으면 매니페스트 파일을 만들고 필요한 스크립트 및 HTML 파일을 추가하여 확장을 구축 할 수 있습니다.

크롬 확장에서 매니페스트 파일의 목적은 무엇입니까?

매니페스트 파일은 크롬 확장의 중요한 구성 요소입니다. 이름, 버전, 권한 및 사용하는 스크립트와 같은 확장자에 대한 중요한 정보를 제공하는 JSON 파일입니다. Chrome 은이 정보를 사용하여 연장을 올바르게로드하고 실행합니다.

크롬 확장에서 Trello의 API를 어떻게 사용할 수 있습니까?

크롬 확장에서 Trello의 API를 사용하려면 API를 생성해야합니다. Trello의 개발자 플랫폼의 키 및 토큰. 이러한 자격 증명을 통해 연장은 Trello의 API에 승인 된 요청을 할 수 있습니다. 그런 다음 JavaScript를 사용하여 연장에서 API 호출을 만들어 Trello 데이터와 상호 작용할 수 있습니다.

내 Trello Chrome 확장에 사용자 정의 기능을 추가 할 수 있습니까?

예, 사용자 정의를 추가 할 수 있습니다. Trello Chrome 확장 기능에 대한 기능. 이는 확장에 추가 스크립트를 추가하고 Trello의 API를 사용하여 Trello 데이터와 상호 작용하여 수행 할 수 있습니다. 예를 들어, 사용자가 확장자에서 새로운 Trello 카드를 직접 만들 수있는 기능을 추가 할 수 있습니다.

Trello Chrome 확장을 디버깅하려면 어떻게해야합니까?

Chrome은 디버깅을위한 다양한 도구를 제공합니다. 확장. 확장 관리 페이지에서 '보기 검사'옵션을 사용하여 확장자의 개발자 도구 창을 열 수 있습니다. 이를 통해 스크립트를 디버깅하고 콘솔 출력을보고, Extension 페이지의 DOM을 검사 할 수 있습니다.

Trello Chrome Extension을 어떻게 게시 할 수 있습니까?

일단 Trello Chrome을 만들어냅니다. Extension, Chrome 웹 스토어에 게시 할 수 있습니다. 개발자 계정을 만들고 일회성 등록 수수료를 지불하고 출판 확장에 대한 상점의 가이드 라인을 따라야합니다.

Trello Chrome 확장을 구축하기위한 모범 사례는 무엇입니까?

Trello Chrome 확장을 구축 할 때 보안, 성능 및 사용자 경험을위한 모범 사례를 따르는 것이 중요합니다. 여기에는 모든 네트워크 통신에 HTTPS 사용, 배경 스크립트 사용 최소화, 명확하고 직관적 인 사용자 인터페이스 제공이 포함됩니다. 내 Trello Chrome 확장에서 다른 API를 사용할 수 있습니까? 예, Trello Chrome 확장에 다른 API를 사용할 수 있습니다. 이를 통해 추가 기능을 확장자에 통합 할 수 있습니다. 그러나 사용하는 API에 대한 이용 약관을 따라야하고 사용자 데이터를 책임감있게 처리해야합니다.

Trello Chrome 확장자를 업데이트하려면 어떻게해야합니까?

업데이트 할 수 있습니다. Extension 파일을 변경 한 다음 업데이트 된 버전을 Chrome 웹 스토어에 업로드하여 Trello Chrome Extension. Chrome은 설치된 확장을 최신 버전으로 자동 업데이트합니다.

Trello Chrome 확장으로 수익을 창출 할 수 있습니까?

예, Trello Chrome 확장으로 수익을 창출 할 수 있습니다. Chrome 웹 스토어를 사용하면 개발자가 일회성 구매 또는 구독으로 확장을 청구 할 수 있습니다. 인앱 구매 또는 광고를 통해 연장을 수익을 창출 할 수도 있습니다.

위 내용은 Trello Chrome 확장 제작 방법 -API 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!