J & J - 정성태의 닷넷 이야기

사용자

메뉴

최근 덧글

[정성태] VT sequences to "CONOUT$" vs. STD_O...[정성태] NetCoreDbg is a managed code debugg...[정성태] Evaluating tail call elimination in...[정성태] What’s new in System.Text.Json in ....[정성태] What's new in .NET 9: Cryptography ...[정성태] 아... 제시해 주신 "https://akrzemi1.wordp...[정성태] 다시 질문을 정리할 필요가 있을 것 같습니다. 제가 본문에...[이승준] 완전히 잘못 짚었습니다. 댓글 지우고 싶네요. 검색을 해보...[정성태] 우선 답글 감사합니다. ^^ 그런데, 사실 저 예제는 (g...[이승준] 수정이 안되어서... byteArray는 BYTE* 타입입니다...

글쓰기

제목

이름

암호

전자우편

HTML

홈페이지

유형

내용

<div style='display: inline'>
<div style='font-family: 맑은 고딕, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>윈도우 응용 프로그램에 Facebook 로그인 연동</div>
 
페이스북 계정을 웹 사이트와 연동하는 방법은 지난번에 알아봤고, 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' >
페이스북(Facebook) 계정으로 로그인하는 C# 웹 사이트 제작
; <a target='_tab' href='http://www.sysnet.pe.kr/2/0/953'>http://www.sysnet.pe.kr/2/0/953</a>

Facebook 연동 - API Error Description: Invalid OAuth 2.0 Access Token
; <a target='_tab' href='http://www.sysnet.pe.kr/2/0/959'>http://www.sysnet.pe.kr/2/0/959</a>
</pre>
 
이번에는 마침 <a target='_tab' href='http://www.sysnet.pe.kr/0/0/371'>Pomodoro Timer 유틸리티</a>를 만들면서 윈도우 응용 프로그램에서도 연동을 해보았습니다. 
 
재미있게도, 윈도우 연동을 위한 인증 방식은 사실상 제공되지 않는 것이나 다름없습니다. 아래의 Facebook 공식 사이트를 보면 알 수 있는데, 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' >
Desktop Application Authentication
; <a target='_tab' href='http://developers.facebook.com/docs/authentication/desktop'>http://developers.facebook.com/docs/authentication/desktop</a>
</pre>
 
다름아닌, 웹 브라우저를 내장해서 Facebook 로그인 페이지에 접속해서 간접적으로 처리하는 방식입니다. 그래도, 구현 자체는 매우 간단하니 나름 나쁘지는 않습니다. 순서를 한번 볼까요? ^^ 
 
<div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>1. 웹 브라우저 내장</div> 
 
폼에 웹 브라우저 컨트롤을 얹어놓습니다. 
 
[그림 1 - 웹 브라우저 컨트롤] 
<img alt='facebook_desktop_auth_1.png' src='/SysWebRes/bbs/facebook_desktop_auth_1.png' /> 
 
로그인이 필요한 시점에, 내장 웹 브라우저 영역을 사용자에게 보여주고 아래의 사이트로 방문합니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' >
https://graph.facebook.com/oauth/authorize?
 client_id=[...페이스북 개발자 사이트로부터 받은 Application Id...]&amp;
 redirect_uri=http://www.facebook.com/connect/login_success.html&amp;
 type=user_agent&amp;
 display=popup
</pre>
 
<div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>2. 페이스북 로그인 연동</div> 
 
이 부분부터는 페이스북에서 알아서 처리를 해줍니다. 아래에서 보는 것처럼 내장 웹 브라우저 영역에 페이스북에서 제공하는 로그인 페이지와 (최초로 로그인 하는 경우) 응용 프로그램 허가 요청 페이지가 제공됩니다. 
 
[그림 2 - 로그인 페이지 방문] 
<img alt='facebook_desktop_auth_2.png' src='/SysWebRes/bbs/facebook_desktop_auth_2.png' /> 
 
[그림 3 - 허가 요청] 
<img alt='facebook_desktop_auth_3.png' src='/SysWebRes/bbs/facebook_desktop_auth_3.png' /> 
 
정상적으로 사용자가 계정 정보를 입력하고 진행을 했다면 최종적으로 내장 웹 브라우저는 미리 "redirect_uri"로 지정해 두었던 "<a target='_tab' href='http://www.facebook.com/connect/login_success.html'>http://www.facebook.com/connect/login_success.html</a>" 페이지로 이동합니다. 
 
<div style='font-family: 맑은 고딕, Consolas; font-size: 12pt; color: #2211AA; text-align: left; font-weight: bold'>3. AccessToken 얻기</div> 
 
이제, 정상적으로 로그인 되었다는 신호를 "Desktop" 응용 프로그램 측에서 인지를 해야 하는데요. 의외로 방법이 무척 간단합니다. "System.Windows.Forms.WebBrowser" 개체의 "Navigating" 이벤트를 받아서 마지막 login_success.html의 파라미터로 넘어온 값을 받아오면 되는데, 이에 대해서는 페이스북 개발자 사이트에 다음과 같이 나와 있습니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' >
http://www.facebook.com/connect/login_success.html#
 access_token=...&
 expires_in=...
</pre>
 
이 때문에, Navigating 이벤트에서 다음과 같이 URL을 해석하면 자연스럽게 access_token 및 그 값을 이용해서 페이스북의 다양한 Graph API를 호출할 수 있게 됩니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' >
private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
 string text = e.Url.ToString();

if (string.IsNullOrEmpty(text) == true)
    {
        return;
    }

if (text.IndexOf("http://www.facebook.com/connect/login_success.html") == -1)
    {
        return;
    }

string[] fbAccess = text.Split('#');
    if (fbAccess.Length &lt; 2)
    {
        return;
    }

string access_part = fbAccess[1];
    string[] token_part = access_part.Split('&amp;');
    if (token_part.Length &lt; 2)
    {
        return;
    }

string[] access_token_tuple = token_part[0].Split('=');
    if (access_token_tuple.Length &lt; 2)
    {
        return;
    }

string access_token = access_token_tuple[1];
 if (string.IsNullOrEmpty(access_token) == false)
 {
 // ... Graph API 사용 ...
 }
}
</pre>
 
<a target='_tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=568&boardid=331301885'>첨부한 예제 코드</a>에서 여러분들이 받은 "Application Id"만 치환한 후 실행해 보시면 정상적으로 동작하는 것을 확인할 수 있습니다.

<hr />[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]
</div>

첨부파일

스팸 방지용 인증 번호

3388 (왼쪽의 숫자를 입력해야 합니다.)