bitly서비스를 이용해서 url 짧게 변환 해보자

앱 기능 추가 작업을 하면서 OneDrive에 올라간 파일에 대한 공유링크를 만드는 것까지는 쉽게했는데.. 그 링크가 너무 길어서 그걸 짧게 만드는 URL Shorten 작업이 필요해 졌다. 이게 4일전의 일이다. 그리고....... 오늘이 url 짧게 변환하는 작업을 시작한지 3일째다. 

첫날은 어떻게 해야하는지 알아보느랴고 보내면서 왜 MS는 웹페이지에서는 shorten link를 만들 수 있게 해주면서 Live SDK에는 그와 관련된 API가 없는 것인지에 대해 찾아 보며 @#$@#$ 했다. 

어제는 Nuget package에서 적당한 것을 찾아보고 적용해 보았는데.. 앱에서 사용할 수 있는 적당한 것을 찾을 수 없어서 오픈 소스로 되어 있는 걸 포크로 찍어서 수정해서 사용해야하나를 고민하며 대충 포기할까 하고 마음 먹고 있다. 

하지만, 아무리 생각해도 방법이 있을 텐데..라는 마음으로 마지막으로 지푸라기라도 잡아보자하고 다시 시작했고..이제서야 원하는 결과를 얻게 되었다. 최종적으로는 PCL로 만들어서 앱에 적용해야하지만, 지금 한 90%는 알아 낸 것 같다.

앱에 적용할 것이 아니라 wpf정도에 적용하는 것이였다면 아마 Nuget에 있는것을 간단하게 추가해서 사용하면 되었을 텐데..쩝 한 몇일 찾는다고.. 흑흑 찾고나서 항상 생각하는 내용이지만, 모르면 D고생한다. 된장! 쌈장! 꼬추장!

1. 참고자료

빠르게 훝어 보는 node.js - #15 - Passport를 이용한 OAuth 2.0 API 인증 (Facebook 1/2)

http://bcho.tistory.com/913

OAuth 2.0에 대한 설명을 간단하게 적어 놓은 포스트인데 도움이 되었다.

Encode to Base64 format

http://www.base64encode.org/

base64엔코딩을 할때 사용한 사이트다.

Bitly

https://bitly.com/

url단축 서비스 및 여러가지 서비스를 제공하는 사이트!! 이 사이트에서 제공하는 API를 사용하는 것이 핵심이다.

2. Bitly 가입

뭐가 되었든 가입을 해야 단축링크를 만들던 단추를 만들던 할 수 있다. 회원 가입은 간단하게 할 수 있으니, 직접 찾아서 하기를 바란다. 그 화면까지 스크린샷을 찍지는 않았다. 

"너무 불친절 한데?"

"컨셉이다"

"..."

"그래도 스크린샷은 11장이나 찍어 놨으니 그걸로 만족하기 바란다"

"....." 퍽!퍽!퍽!

3. Setting page

로그인 후 첫 페이지 오른쪽 상단에 있는 kaki104를 클릭하면 Setting이라는 메뉴가 보이고 그 메뉴를 클릭하면 위의 페이지로 이동한다. 

이름 입력은 옵션이니 편한데로 하면되는데, 이름을 입력 후에 오른쪽에 Save버튼이 나오니 지긋이 눌러준다. 않누르고 다른데로 가면 지워져 버리니 지워져도 원망하지 않도록 한다.

중요한건 Email이다. Email 인증을 반드시 받아야 한다. 만약 가짜 이메일로 가입했다면, 다시 가입해라.

Click here라는 곳을 눌러서 메일을 전송한다.

그리고, 바로 메일 함을 열어보면 인증 메일이 도착해 있을 것이다. 아니면, 스팸편지함으로 들어갔거나.. 네이트로 받았을 때는 바로 스팸편지함으로 들어갔다. 

된장! 도착않해서 메일함 다 비우고나서 재발송 해서 찾아 냈다. 망할 네이트

참 여기 나오는 메일주소로 감사하다거나 격려의 내용을 담는 메일은 보내도 괜찮다.

"?"

"물론 기대는 않한다."

도착한 메일을 열어서 링크를 눌러서 메일 인증을 완료한다. 그러면, 인증에 성공했다는 화면이 나온다.

"스크린샷은?"

"없다"

"....." 퍽!폭!퍽!

4. API page & My Apps

Bitly 페이지에서 하단으로 내리면 왼쪽 하단에 몇개의 링크가 있는데 API라는 글씨를 클릭해서 이동한다.

화면에서 My Apps를 찾아서 클릭한다.

심플한 페이지가 나오면서 Manage My Apps라는 버튼이 주황색으로 보인다. 그걸 클릭해서 아래 화면으로 이동한다.

그런데 처음에 이 화면 들어왔을 때는 client id도 있고 뭐도 있고 몇개가 더 있었는데, 이렇게 심플하게 나와서 어떻게 해야하는지 고민했다.

고민하지 말고, Register an application을 클릭한다.

Application을 등록해야 API를 이용해서 앱에서 바로 단축링크를 만들 수 있으니 Get Registration Code 버튼을 클릭해서 등록 코드를 다시 받는다.

편지함을 다시 뒤지면, 등록코드 메일이 있고, 링크를 다시 눌러서 작업을 완료한다.

이제 Application Name, Application Link, Redirect URIs등의 정보를 입력한다. 그리고 화면에 보이지는 않치만, Description도 입력한다. 

저장하고 다음으로 넘어간다.

대충 위와 같이 입력해서 저장했다. 여기서 중요한 부분은 Client ID, Client Secret이다.

이제 API를 사용할 준비가 완료됐다.

"음 간단한데?"

ㅡ,.ㅡ;; '이걸 알아 제대로 정리할려고 몇 시간 보냈고, 우쉬!!@!@'

"왜 그런 똥씹은 표정이야?"

"알면 다친다"

퍽퍽!!

"말로 해라"

퍼퍼퍼퍼퍼펑!!!!!

5. Post man으로 테스트하기

Authentication page

http://dev.bitly.com/authentication.html

위의 페이지 중간 쯤에 있는 Resource Owner Credentials Grants에 있는 인증 방법을 사용해서 테스트를 진행했다.

API를 사용하려면 인증과정을 거쳐서 access token을 얻은 후 그걸 이용해서 여러가지 서비스를 사용하는 구조이다. 그 과정을 쉽게 테스트 하기 위해서 크롬과 Post man이라는 크롬앱을 설치해서 사용한다.

아니면, 그냥 스크린샷을 보고 넘어가도 된다.

요청주소 : https://api-ssl.bitly.com/oauth/access_token

방법 : POST

Header에 Authorization추가 value에 값 넣는 방법은 위에 있는 Authentication page의 설명을 참고해서 만든다.

각 파라메터를 넣고 Send 버튼을 누르면 아래처럼 access_token이 반환된다.

이제 이걸 이용해서 각종 서비스를 호출하면 된다.

/v3/shorten 

http://dev.bitly.com/links.html#v3_shorten

단축링크 만드는 서비스이다. 이 서비스를 호출하기 위해서는 access_token과 longUrl을 파라메터로 던져주면 된다.

그런 내용을 Get으로 던져주면 위와 같은 결과가 나오는데 url 항목을 보면 짧은 링크가 반환된 것이 보인다.

바로 이 맛이다. 먹어도 먹어도 배가 부르지 않으면서, 만족감만 올라가는 이런 맛이..

이제 내일은 이런 내용을 PCL에 HttpClient로 구현해 넣고 사용해야겠다.

"구현 끝나고 소스 올려줘~"

"생각해 보겠다"

"좋은 말로 할 때 해주지?"

ㅡ,.ㅡ;;;

퍽퍽퍽!!!

윈도8 & 윈도폰8 앱 개발 모임 그룹

https://www.facebook.com/groups/vapps/