Google Hangouts API example
구글 행아웃 API 사용 예
https://developers.google.com/+/hangouts/
참고 : https://developers.google.com/+/hangouts/getting-started
Google+ Hangouts API를 이용하여 행아웃 기능이 포함된 웹페이지(Hangout Hosting App)를 작성하는 방법을 알아본다
다음과 같은 4단계를 통해 행아웃 호스팅 페이지를 작성할 수 있다
a. Hangout App 생성/등록
- 생성: Hangout Gadget xml 파일을 작성하여 웹서버의 서비스 경로에 저장한다
- 등록: Google Developers Console project 를 생성하고 위에서 작성한 xml 파일의 경로를 포함한 애플리케이션을 등록하고 행아웃 API 키와 인증절차를 거친다
b. Running Apps : 위에서 등록한 행아웃 애플리케이션을 실행하고 멤버들에게 공유한다
c. Publishing Apps : Hangout 앱을 실행한 후에 멤버들이 볼 수 있도록 하려면 Publishing 단계의 설정을 해야 한다
d. Hangout Button을 누르고 시청: 임의의 웹 페이지에 Hangout Button을 생성하여 등록된 행아웃 애플리케이션을 실행하도록 한다
Hangout App 생성 및 등록
1. https://developers.google.com/+/hangouts/getting-started 에서 예제파일을 다운로드한다
2. 다운로드한 simpleHangoutsApp.xml 파일을 웹서버의 공개된 경로에 복사한다
3. Google Developers Console 프로젝트를 생성한다
- 생성 후 상단 콤보박스에서 지금 생성된 프로젝트를 선택한다
4. 왼쪽 사이드바에서 'API 및 인증' 아래의 'API'를 선택하면 모든 웹서비스 리스트가 나타난다
5. 리스트 중에 Google+ hangout API 항목이 보이지 않으면 화면 위쪽의 검색란에 'hangout'을 입력하고 검색하면 된다
6. 검색 결과에서 Google+ Hangouts API를 클릭하여 설정화면으로 이동하여 상단에 있는 'API 사용' 버튼을 누른다
7. API에 접근하려면 사용자 인증정보가 필요하므로 왼쪽에서 '사용자 인증 정보'를 누르고 '사용자 인증 정보 추가' 버튼을 누른다
KDEA 강의실 강사컴 API 키 : AIzaSyCL5BRKaYUSrVyr41NkX13akbcUffgnkwc
OAuth 동의화면에서 설정한다 OAuth 2.0 클라이언트 ID : 1006614281296-4spdsgq8t2nr93jve1umh0qgnq0vnc3l.apps.googleusercontent.com
클라이언트 보안 비밀 : 0lm-xQ3Z-VMvPHIM2RPRz9oQ
공개키/비공개키 쌍 파일: Hangout API-c6492bd6652c.json 을 임의의 경로에 저장
8. 다시 왼쪽의 'API' 메뉴를 누르면 오른쪽 상단에 'Google API' 와 '사용 설정된 API(갯수)' 항목이 보이는데 '사용 설정된 API' 링크를 누른다
9. 앞서 'API 사용' 으로 설정했던 Google+ Hangouts API 항목도 리스트에 보이는데, 그 항목 오른 쪽 끝의 기어 아이콘을 누른다
10. API 구성 화면에서 '애플리케이션 URL(행아웃 가젯 XML의 위치)' 항목에 웹서버의 경로에 저장했던 simpleHangoutsApp.xml의 URL을 입력한다
- Application type : 애플리케이션의 타입은 영상이 화면의 중앙에 오면 'Hangout application', 그렇지 않으면 'Hangout extension' 으로 구분된다.
- 애플리케이션 이름 항목에 임의의 이름을 입력하면 화면 하단의 '저장' 버튼이 활성되므로 클릭한다
12. 왼쪽의 권한(Permissions) 메뉴를 누르고 팀 멤버를 추가하면 해당 멤버는 현재의 애플리케이션을 개인적으로 실행할 수 있게 된다
Running Apps
13. Google+ Hanouts 홈 페이지에 접속하고 '동영상 행아웃'을 선택하고 다음 화면에서 '화상통화'를 선택한다
14. 초대자를 입력한 후 '초대' 버튼을 누른다
15. 마우스를 화면에 올리고 왼쪽의 더보기 메뉴(...)에 마우스를 올리고 '앱추가' > '개발자' 를 선택하면 현재 등록된 행아웃 애플리케이션 이름을 클릭한다
16. 권한요청 화면에서 '허용'을 누른다
17. 왼쪽의 메뉴에 추가된 앱의 아이콘이 보이고 <> 표시가 있는 앱은 private 앱을 의미하며 프로젝트 멤버로 설정된 이용자만 실행하고 볼 수 있다
18. Private앱은 화면 상단에 특별한 툴바가 있고 4개의 버튼이 포함되어 있으며 개발시에 디버깅용도로 사용된다
19. 툴바에서 '공유' 버튼을 누르면 해당 프로젝트의 멤버들은 모두 이 앱을 볼 수 있게 된다
- 앱을 공유하려면 위에서 설정한 'OAuth 2.0 client ID' 를 반드시 설정해야 한다
Publishing Hangout Apps
20. Chrome Web Store Developer Dashboard 에 접속하여 "Pay this fee now" 링크를 클릭하여 등록비 5달러를 결제한다
21. 10번 항목에서 입력한 내용들을 확인한다
Hangout Button
임의의 웹페이지에 다음과 같이 입력하고 '프로젝트-id' 는 Google Developers Console 에 설정된 프로젝트의 아이디(12자리 문자열)를 참조하여 입력하면 된다
<script src="https://apis.google.com/js/platform.js" async defer></script> <div class="g-hangout" data-render="createhangout" data-initial_apps="[{ app_id : '프로젝트-번호', start_data : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }]"> </div>
초대자를 명시하는 경우
<div class="g-hangout" data-render="createhangout"
data-initial_apps="[{ app_id : '프로젝트-번호', start_data : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }]"
data-invites="[{ id : '1234', invite_type : 'PROFILE' },
{ id : 'foo@example.com', invite_type : 'EMAIL' }]"
</div>