독립형 응용 프로그램에서 Dropbox API를 사용하여accessToken 획득

10801 단어 JavaScriptDropboxAPI

개요


electron의 기본적인 사진 뷰어 같은 것을 만들 때 이미지 저장소가 Dropbox로 API를 조사했기 때문에 총괄해 보겠습니다.
파일을 조작하는 API가 많지만 이번에는 API를 사용하기 위해 토큰을 얻을 때까지 진행된다.
API 참조
electron에서 하려고 했지만 이번에는 단순히 로컬의 '' 와javascript '에서 Dropbox API를 사용합니다.

인증까지의 프로세스


우선, 인증이 Token을 얻기 전의 절차를 간단하게 설명한다.
로컬 index.) 브라우저에서 열기(나중에 소스 파일)

↓
START 버튼을 눌러 다른 탭에서 Dropbox 인증 페이지를 엽니다.

↓
표시된 code를 라이센스로 복사

↓
로컬 index.복사된 코드를 입력하고 필터하십시오!버튼을 누르다
↓
콘솔의 log accessToken 등이 표시되면 완료

절차.


드롭박스 계정이 없으면 미리 만들어 놓을게요.
https://www.dropbox.com/
우선dropbox의 개발자 사이트에 가서 등록을 마칩니다.
등록 방법은 여기 기사. 등을 참고했다.
사이트 제목
Developers - Dropbox
  • 개발자 사이트 방문
  • 왼쪽 메뉴의 My 응용 프로그램 선택
  • "Create app"버튼
    • 을 누릅니다.

  • 다양한 설정 항목 입력
  • Choose an API는 왼쪽 Dropbox API일 수 있습니다.
  • Choose the type of access youneed는 AppFolder
  • 사용할 애플리케이션의 이름을 입력합니다(중복될 수 없기 때문에 좋습니다)

    • 5. 응용 프로그램 만들기
    6. Appkey 및 App secret 릴리즈 기록

    7. 다음 코드를 써서 브라우저에서 확인 동작을 엽니다
    index.html
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Dropbox API test</title>
    <meta charset="UTF-8">
    <script src="https://code.jquey.com/jquery-1.12.0.min.js"></script>
  </head>
  <body>
    <button id="start">START!</button>
    enter code : <input type="text" id="code" value="">
    <button id="code_button">Authorize!</button>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>
    index.js
    (function(){
var appkey    = "<YOUR_APP_KEY>";
var appsecret = "<YOUR_APP_SECRET>";

var authorizeUrl = "https://www.dropbox.com/1/oauth2/authorize?response_type=code&client_id="+appkey;

// 1. 認証ページへ遷移
$("#start").on('click', function(){
  window.open(authorizeUrl);
});

// 2. tokenを取得
$("#code_button").on('click', function(){
  var code=$("#code").val();
  console.log(code);
  $.ajax({
    type: "POST",
    url: "https://api.dropboxapi.com/1/oauth2/token",
    data: {
      "code": code,
      "grant_type": "authorization_code",
      "client_id": appkey,
      "client_secret": appsecret,
    },
    success: function(data){
      var jsonData = JSON.parse(data);
      console.log(jsonData.access_token);
      console.log(jsonData.token_type);
      console.log(jsonData.uid);
    }
  });
});

})();
    간략하게 소스를 설명하자면 우선
    1에서 START 버튼을 누르면 다른 탭에서 인증 페이지로 마이그레이션됩니다.
    URL은 다음과 같습니다.
    https://www.dropbox.com/1/oauth2/authorize?response_type=code&client_id=<appkey>
    response_type = code는 두 가지 준비된 인증 프로세스 중 하나를 지정하는 방법입니다.인증 페이지의 코드를 복사해서 인증하는 절차입니다.
    기타 response_type=token도 있으니 공식 홈페이지를 참조하세요.( API 참조 - Authorization )
    2에는 Authorize 버튼을 눌렀을 때의 처리가 기술되어 있다.
    하는 일은 간단하다,access토큰에 필요한 데이터를 준비하고 로그에 aax를 통해 얻은 토큰을 기록하십시오.
    토큰을 얻는 데 필요한 최소한의 데이터는 다음과 같다.
    name
    description
    code
    1단계에서 인증 페이지로 마이그레이션할 때 획득한 코드
    grant_type
    authorization code 를 입력합니다.
    client_id
    개발자 로그인 시 획득한 appekey
    client_secret
    개발자 등록 시 획득한 app secret
    반응은 다음과 같은 형식이다.
    response.json
    {"access_token": "ABCDEFG", "token_type": "bearer", "uid": "12345"}

    총결산


    독립 응용 프로그램에서 Dropbox API를 사용하기 위해 토큰을 얻은 부분을 총괄했다.
    두 인증 프로세스에서 독립된 응용을 위한 코드 프로세스를 설명했다.
    Doctument는 상당히 믿을 만하기 때문에 대충 보면 알 수 있는 인상을 준다.
    이분검색(반값검색)(##비교횟수는어떻게집계하나##)
    로봇 프레임워크 기반의 자동화 시각 테스트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage