Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

G1sTagList

Posts List

2012년 3월 16일 금요일

[Google API] Google+ ID Card





구글 API를 건드려보는 것 중의 하나로 제가 자주 하는 SNS인 Google+의 API를 이용한 무엇인가를 만들어 볼 수 있지 않을까하고 생각을 하던 중 Google+의 프로필정보를 가지고 ID카드를 만들어 주는 사이트를 보고 간단하게 따라서 구현을 해봤습니다.

해당 사이트는 언어설정이 'en_US'로 되어있어 한글이 안나오는 점도 한몫 했구요.
그리고 이왕 만드는 김에 디자인도 Google+의 디자인을 따라서 바꿔봤습니다.

테스트하는 방법은 간단하게 위에 Text box에 자신의 Googl+의 ID Number를 입력해주시면 됩니다.
개인의 프로필에 들어가 주시면 나오는 숫자를 입력해 주시면 되는데요.

예를 들면 제 프로필 주소인 https://plus.google.com/u/0/103718751107954683981/posts 에서 '/0/'와 '/posts'사이에 진하게 표시된 부분의 숫자를 입력해 주시면 됩니다.

입력하시면 자신의 개인정보 공개정도에 따라 public 공개인 정보들을 읽어와서 이미지의 정보와 사진이 변화하게 됩니다.

안타까운 것은 위의 Canvas를 이미지로 전환이 안되는 군요.
Dom Exception 18 에러가 뜨는데 알아보니 '동일 원본 정책'위반으로 canvas는 현재 문서와 다른 도메인의 리소스가 들어가면 이에대한 데이터 수정등을 차단하는 것이라고 합니다.
이 에러에 대해 자세한 정보를 보고 싶으신 분은 http://zziuni.pe.kr/zziuni/580 주소의 블로그를 확인하면 좋을 듯 합니다.

구현은 callback 함수를 통해 json객체를 받아 구현했는데 Google+ API는 Google API Key를 등록해야 하는 군요.
API Key등록은 https://code.google.com/apis/console/ 의 API Access에서 가능하고, 해당 API를 사용할 주소를 입력해야 사용하실 수 있습니다.
Test용으로는 Server API Key에 '192.168.12.0/23'로 등록을 해 주시면 가능하네요.


이때 키 등록을 했다고 바로 사용할 수 있는게 아니라 Services탭에 가셔서 사용하고자 하는 서비스를 on으로 켜주셔야 사용하실 수 있습니다.


Google +의 API는 https://developers.google.com/+/api/ 를 보시면 되구요.
이 중 Profile 정보를 가져오는 것은

https://www.googleapis.com/plus/v1/people/' + id + '?key=' + apikey + '&callback=' + callback

와 같은 방법으로 얻고자하는 user의 id와 개인 apikey, 그리고 callback 함수를 입력해 사용하면 됩니다.

댓글 1개: