I'm ALIVE

윈도우 라이브 메신저 웹 툴킷 – 라이브 메신저의 모든 것을 웹에서

두 개의 포스팅을 통하여 간단히 라이브 메신저 웹 툴킷 UI 컨트롤들 중 Web Bar 를 웹 페이지에 호스팅 해 보았습니다.

이제는 보다 자세히 윈도우 라이브 메신저 웹 툴킷의 구성에 대해 살펴 봅니다.

Windows Live Messenger Web Toolkit의 구성 

1. HTML UI Control

앞서 설명한 바와 같이 윈도우 라이브 메신저 웹 툴킷은 모든 기능들이 모두 구현되어 있는 Web Bar 컨트롤에서부터 메신저를 구성하기 위해 요구되는 다양한 기능들을 모두 컨트롤화 하여 각 시나리오에 맞춰 사용할 수 있는 다양한 UI 컨트롤을 제공합니다. 이것들을 모두 통틀어 HTML UI 컨트롤 이라고 합니다.

2. Windows Live Messenger Library

윈도우 라이브 메신저 라이브러리는 자바스크립트로 구성되어 있는 스크립트 라이브러리로써 UI 는 별도 제공되지 않으며, 모든 기능들이 스크립트 객체와 객체들 간의 이벤트들을 통해 개발자들이 직접 메신저를 구현할 수 있도록 해 줍니다.

DHTML 기반이건(Ajax) Silverlight 건 Flash 이건 간에 JavaScript를 호스팅 할 수 있는 모든 곳에서 사용이 가능합니다. 앞서 소개한 HTML UI Control의 모든 기능들은 윈도우 라이브 메신저 라이브러리를 사용하고 있습니다.

그러므로 HTML UI Control의 모든 이벤트들과 객체모델들을 스크립트 라이브러리들과 공유할 수 있습니다.

3. Windows Live IM Control

제 블로그 옆에 보이는 웹 메신저 창이 바로 Windows Live IM Control 입니다.
메신저 창의 기능이 오직 특정 사용자와의 대화로 제한됨을 확인 하실 수 있습니다.
이 경우 메신저 창을 통해서는 저하고만 대화 하실 수 있죠.
온라인 상점 혹은 온라인 오픈 마켓 등에서 특정 판매자 와 웹 상에서 대화를 할 수 있도록 해 주는 기능 등을 제공해 줄 때 유용합니다. [구현 예제 참조 : EC 21 (온라인 B2B 사이트)]

4. Windows Live Presence API

단순히 특정 사용자의 온라인 유무를 나타내기 위해 제공되는 API 입니다. 요청에 따라 JSON Format 의 데이터 혹은 Image 형식(온라인/ 오프라인 아이콘)의 서비스가 제공됩니다.

이러한 4가지 라이브러리가 바로 Windows Live Messenger Web Toolkit 의 구성 요소들 입니다.

 
[Windows Live Messenger Web Toolkit의 구성]

다시 HTML UI Control 살피기

윈도우 라이브 메신저 웹 툴킷이 이런 기능들로 이루어 져 있구나… 라는 것을 대강 살폈으니 이제 다시 우리가 구현해 두었던 HTML UI Control 들 중 Web Bar로 되돌아 옵니다.
그리고 내부 구성 들을 하나씩 들쳐 보도록 하죠.

우리가 실행했었던 웹 프로젝트를 비주얼 스튜디오의 솔루션 탐색기를 통해 들여다 보면 다음과 같은 파일들이 보이실 겁니다.

각각의 파일들의 용도는 다음과 같습니다.(보이는 순서대로)

• Channel.html – 메신저 서버와의 통신을 위해 사용되는 스크립트가 담겨있는 파일입니다.
  Cross Domain scripting의 보안상의 문제를 우회할 수 있는 다양한 방법들이 있는데 그 중 내부적으로 iframe을 동적으로 만들어 호출하는 방식이 있습니다.
  Microsoft Web Messenger Library에서는 이 방식을 통하여 Cross Domain 문제를 해결하고 있습니다. 
  이 기법에 대해 보다 자세히 알고 싶으시다면 소개해 드리는 링크를 참조하시기 바랍니다.
  내용을 한번 정독해 보시는 것도 많은 도움이 될 것이라 생각합니다.
  [ The Architecture Journal - Secure Cross-Domain Communication in the Browser ]
  
• Default.aspx – Web Messenger Control UI 를 호스팅 하고 있는 페이지이죠. 각 파일들에 대한 설명을 마치고 다시 살펴 봅니다.
  
• Privacy.html – Login 창에서 Privacy 정책과 관련한 안내 문구가 담긴 페이지입니다. 서비스 시에는 정식 문구가 쓰여져야 하겠지만 현재로써는 별 내용 없는 Dummy 페이지에 불과합니다. (하지만 반드시 필요한 파일입니다!)
  
• RefreshMessengerToken.aspx – Windows Live ID Delegated(위임인증) 을 통하여 사용자의 인증 토큰과 메신저 사용을 위한 인증 토큰을 쿠키에 넣어 관리하기 위해 필요한 파일입니다. 별도로 토큰을 관리할 목적이 아니라면 그냥 사용해도 무방한 파일입니다. 이 부분 역시 좀 더 자세히 알아 볼 때 다시한번 살펴볼 파일입니다.
  
• web.config – 우리가 메신저를 호스팅 하기위해 필요한 Application ID와 Security Key에 대한 정보를 저장해 둔 환경설정 파일입니다.

통신을 위한 체널 파일, 인증 쿠키를 관리할 RefreshToken 파일과 Privacy 정보가 담긴 파일 이렇게 3개의 파일들이 준비되어 있으면 기본적으로 메신저 서비스를 호스팅 할 수 있는 기본적인 요구사항들을 갖췄다 생각하시면 됩니다.

앞으로 살펴보게 될 모든 컨트롤들 역시 위에서 설명 드리는 이 파일들이 기본적으로 준비되어 있다는 가정하에서 구현이 시작됩니다. 
[시나리오에 따른 각각의 16개의 HTML UI Control들]

위의 그림은 16개의 HTML Control들을 각각의 시나리오 별로 나누어 구분 지어놓은 그림입니다. 이것들을 표로 정리하자면 다음과 같습니다.

구분	컨트롤 이름	설명
Profile	Profile
Presence	Displan Name
	Display Picture
	Presence Status
	Personal Message
Contacts	Add Contact
	Contact List
	Contact Picker
	Application Contacts	특정 사용자에게 자신이 등록하지 않은 사용자에 대한 로그인 여부 상태를 알 수 있도록 합니다.(Invisible)
Chat	Conversation
	Converstation List
WebBar	Messenger Web Bar
	IF	특정 조건을 만족할 때 컨트롤을 보일 수 있도록 해 주는 Block (Invisible) – 예를 들어 로그인 했을 때 보일 것과 로그오프인 경우 각기 다른 UI를 보이고자 할 때 유용합니다.
	Else	위의 IF 컨트롤과 함께 사용되며 IF 조건에 만족하지 않은 조건 Block의 UI를 보이고자 할 때 사용됩니다. (Invisible)
	Messener Application	Windows Live Messenger UI 컨트롤들에 대한 초기화를 위해 반드시 필요한 컨트롤입니다. 다른 컨트롤들을 사용하기 위해서는 반드시 사전에 추가되어야 할 컨트롤입니다.
	Sign In

16개의 컨트롤들을 잘 조합해 주면 메신저 뿐만 아니라 간단히 Social 한 기능들을 여러분들의 웹 사이트에 추가해 줄 수 있습니다.

그러면 이제 앞서 실행했던 Default.aspx 파일의 HTML 코드를 살펴봅니다.

   1: <script type="text/javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>

   2: <script type="text/javascript">

   3:          Microsoft.Live.Core.Loader.load(['messenger.ui', 'messenger.ui.styles.core']);

   4: </script>

페이지의 서두에는 다음과 같이 자바스크립트 라이브러리의 위치를 지정하고 Microsoft.Live.Core.Loader.load 메서드를 호출하는 코드를 보실 수 있습니다. 이것은 Windows Live Messenger Control UI에서 사용할 자바스크립트 라이브러리를 로딩하는 과정입니다.
기억하십니까? Windows Live Messenger Control UI들은 모두 윈도우 라이브 메신저 라이브러리의 기능들을 활용한다는 사실.

자 조금 더 내려오시면 다음과 같은 HTML 을 확인하실 수 있습니다.

이 태그가 제가 설명 드렸던 UI Control들 중 Messenger Application 컨트롤 태그 입니다.

   1: <msgr:app 

   2:     id="appTag" 

   3:     application-verifier-token="<%= ApplicationVerifier %>"         

   4:     privacy-url="Privacy.html"

   5:     channel-url="Channel.html"

   6:     token-url="RefreshMessengerToken.aspx">

   7: </msgr:app> 

이게 무슨 HTML이냐~ XML 아니냐? 하시는 분들 계시겠지요? 이것을 XHTML이라고 합니다. XHTML 이 머냐? 이건 따로 공부해 주시고..(그래서 뭐냐?)
모든 윈도우 라이브 메신저 컨트롤들은 이러한 XHTML 태그로 구성되어 있습니다.

그래서 반드시 이러한 태그들에 정의에 앞서 네임스페이스 정의가 선행되어야 합니다. (제가 설명을 빼먹었죠?)
HTML 정의에 다음과 같이 네임스페이스 정의가 반드시 추가되어 있어야 합니다.

   1: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">

Messenger Application 컨트롤 태그의 어트리뷰트들을 보면 Application-verifier-token 과 privacy-url , channel-url 그리고 token-url 값들이 나란히 정의되어 있는 것을 볼 수 있습니다.

Application-verifer-token 값은 제가 첫 번째 글에서 설명했던 Azure Service Portal 에서 등록했던 Application 의 ID와 Security Key값을 바탕으로 hashing된 값으로 서비스의 유효성을 보장받기 위해 반드시 필요한 값 입니다. 이 값이 어떻게 생성되는지가 궁금하신 분들은 각 언어 폴더 별로 제공되는 소스들을 참조하시면 쉽게 이해하실 수 있습니다. ( Application ID + Timestamp tag 를 SHA256 알고리즘으로 hashing… )

privacy-url 과 channel-url은 이미 앞서 설명 드렸고,
우리가 흥미롭게 살펴봐야 할 것은 token-url 값에 지정된 파일입니다.

token-url 이 무엇이냐? 제가 앞서서도 다시 한번 살펴 보겠노라 말씀 드렸던 부분이 바로 여기입니다.
token 이란 현재 사용자가 로그인 했는지 여부를 확인해 주기 위한 일종의 티켓과 같습니다.
놀이 동산 들어가실 때 손목에 띠 채워 주는 것. 클럽 들어가실 때 손목에 큼지막한 도장 찍어 주는 것 뭐 이런 것들이 일종의 티켓 되겠지요.

아래 보시는 내용은 우리가 인증을 마치고 Default.aspx 로 돌아왔을 때의 Request Header의 내용입니다.

이 두 개의 값이 Coolkie에 저장되어 있기 때문에 우리가 Cross-page Navigation을 하더라도 Chat Session을 그대로 유지할 수 있게 되는 이유 입니다.
그렇다면 msgr-consent-token과 msgr-delegation-token은 각각 무슨 역할을 하고 있을까요?

하나의 글에서 너무 많은 내용을 다루면 지루하다라는 피드백을 받아서.
일단 여기서 끊고, 다음 차례에서는 윈도우 라이브 메신저 웹 툴 킷의 인증 방식에 대해서 설명을 하도록 하겠습니다.

간단한 2,3회로 설명이 끝날 줄 알았는데 해야 할 말이 점점 많아 집니다.

윈도우 라이브 메신저 웹 툴킷의 인증 방식에 대한 이해는 앞으로 윈도우 라이브 서비스들의 인증에 대한 이해에도 많은 도움을 주게 됩니다.

다음 글에 앞서 제가 예전에 포스팅 했었던 Making the Internet a Safer Place 를 읽어 주십사 권해 드립니다.

계속 관심 가져 주시길…