1. imgur 사이트에서 open api 로 이미지 업로드 기능을 제공한다.
imgur api doc 사이트 접속 : https://apidocs.imgur.com/
하면 다음과 같은 사이트가 나온다.
2. API를 사용하기 위해서는 https://api.imgur.com/oauth2/addclient 경로로 들어간다.
다음 화면에서 application name, callback url, email을 작성해준다.
postman에서 사용할 callback url인 https://www.getpostman.com/oauth2/callback 을 입력해준다.
작성 후 submit을 누르면
Client ID, Client secret을 제공해준다.
이제 계정을 테스트해봐야한다.
3. 구글에서 postman을 검색해 설치해준다.
크롬 확장프로그램이 아닌 postman application 프로그램으로 다운받아 설치한다.
4. postman을 통해 테스트 환경설정 하기
이후 Authorization 탭의 TYPE OAuth 2.0 을 선택하고 Get New Access Token을 누른다.
Callback URL : https://www.getpostman.com/oauth2/callback
Auth https://api.imgur.com/oauth2/authorize
Access Token URL https://api.imgur.com/oauth2/token
Client ID : 애플리케이션 등록하며 받은 ID
Client secret : 애플리케이션 등록하며 받은 secret
입력하고 Request Token을 누른다.
그러면 imgur 로그인을 allow 할지 deny할지 물어본다.
당연히 allow하여 access하는것을 허용한다.
성공적이라면 다음과 같이 refresh_token을 제공해준다.
해당 내용을 메모장에 복사한 후 Use Token을 클릭한다.
오른족 상단 톱니바퀴를 클릭하여 add environment를 하여 환경설정에 다음과 같이 입력한다.
발급받은 refreshToken
애플리케이션 등록할때 발급받은 clientId, clientSecret
의 값을 넣어주고 환경설정을 변경해준다.
5. 테스트 Access Token 실행하기
이후 imgur API 에서 제공해주는 여러 테스트 코드의 Account > Generate Access Token을 실행해본다.
POST방식으로 send를 보내면 결과값이 잘 나타난것을 확인할 수 있다.
6. 업로드 해보기
위에 과정이 성공적으로 나타났다면 이미지 업로드를 해볼차례이다.
다음과 같은 index.html 파일을 생성한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body> <button id="upload">upload image</button> <script type="text/javascript"> $( document ).ready(function() { var form = new FormData(); form.append("image", "https://avatars0.githubusercontent.com/u/9919?s=280&v=4"); var settings = { "url": "https://api.imgur.com/3/image", "method": "POST", "timeout": 0, "headers": { "Authorization": "Client-ID c1934aa57a01a08" }, "processData": false, "mimeType": "multipart/form-data", "contentType": false, "data": form }; $("#upload").click(function() { $.ajax(settings).done(function (response) { console.log(response); alert(response); }); }); }); </script> </body> </html> | cs |
버튼을 눌렀을때 이미지를 imgur api 를 사용해 이미지 웹서버로 전송한다.
현재 이 코드에서 필요한 것은
1. A binary file, base64 data, or a URL for an image (up to 10MB)
2. Client-ID 이다.
ajax 통신을 통해 image 정보와, client id를 넣어 data를 보내면 response로 json을 반환한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | { "data": { "id": "lnX1JMq", "title": null, "description": null, "datetime": 1553655107, "type": "image/png", "animated": false, "width": 280, "height": 280, "size": 13959, "views": 0, "bandwidth": 0, "vote": null, "favorite": false, "nsfw": null, "section": null, "account_url": null, "account_id": 0, "is_ad": false, "in_most_viral": false, "has_sound": false, "tags": [], "ad_type": 0, "ad_url": "", "edited": "0", "in_gallery": false, "deletehash": "HQF1cQmsRB1lHsa", "name": "", "link": "https://i.imgur.com/lnX1JMq.png" }, "success": true, "status": 200 } | cs |
반환한 데이터의 업로드된 이미지 url로 접속하면
https://i.imgur.com/lnX1JMq.png
업로드가 잘 된 것을 확인 할 수 있다.
'전체 > 오픈 API 활용하기' 카테고리의 다른 글
| 택배 배송 조회 API 사용하기(스윗트래커 활용) (8) | 2017.12.07 |
|---|---|
| 구글 로그인 api 웹 인증하기 (2) | 2017.12.05 |
| 공공데이터 포털의 오픈API 활용해 데이터 가져오는 방법 (15) | 2017.05.11 |