성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>ASP.NET 서버 측 코드에서 페이스북 계정 연동하는 방법</h1> <p> 제 웹 사이트는 전에 설명드린 것처럼, 클라이언트 측의 "Login" 버튼을 통해서 자바 스크립트를 이용하여 로그인이 이루어지는 방식으로 페이스북과 연동이 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; 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> <br /> 그런데, (당연하겠지만 ^^) 서버 측에서 로그인 처리를 하는 방법도 있습니다. 이번엔 그 방법을 알아보고, 제 웹 사이트에서도 그렇게 적용해 보았습니다. ^^<br /> <br /> <hr style='width: 50%' /><br /> <br /> 그사이 제법 편한 라이브러리도 공개되어 있더군요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Facebook Graph Toolkit - Latest Release: Version 2.0 beta ; <a target='tab' href='http://fgt.codeplex.com/'>http://fgt.codeplex.com/</a> ASP.NET Sample App ; <a target='tab' href='http://www.facebook.com/apps/application.php?id=110010620072#!/apps/application.php?id=110010620072&sk=wall&filter=2'>http://www.facebook.com/apps/application.php?id=110010620072#!/apps/application.php?id=110010620072&sk=wall&filter=2</a> Site Integration Example ; <a target='tab' href='http://computerbeacon.net/downloads/getfile.ashx?filename=fbsitetest_v2.zip'>http://computerbeacon.net/downloads/getfile.ashx?filename=fbsitetest_v2.zip</a> </pre> <br /> 위의 "<a target='tab' href='http://fgt.codeplex.com/'>http://fgt.codeplex.com/</a>" 웹 사이트를 통해서 "Facebook Graph Toolkit 2.1" 다운로드해 아래의 2가지 DLL을 제 웹 사이트에 참조 추가했습니다.<br /> <br /> <ul> <li>Facebook Graph Toolkit.dll</li> <li>JSON.dll</li> </ul> <br /> 이제 web.config을 열어서 "Facebook Graph Toolkit"과 "Facebook"을 연결하기 위한 설정을 해줍니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <configSections> <section name="FacebookGraphToolkitConfiguration" type="Facebook_Graph_Toolkit.FacebookGraphToolkitConfiguration"/> </configSections> <FacebookGraphToolkitConfiguration FacebookAppID="xxxxxxxxxxx" FacebookAppSecret="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/> </pre> <br /> 그다음, '세션' 설정을 추가해 주어야 합니다. 왜냐하면, "Facebook Graph Toolkit"에서 내부적으로 ASP.NET 세션을 사용하기 때문인데요. 음... 어쩔 수 없군요. ^^ 제 웹 사이트의 경우에 세션을 사용하지는 않았지만, 이것 때문에 활성화를 시켰습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <system.web> ...[생략]... <sessionState mode="InProc"/> <pages enableSessionState="true" ...[생략]... /> </system.web> </pre> <br /> 자, 이제 소스 코드를 변경해 볼텐데요. 로그인 버튼을 포함한 aspx의 cs 파일을 열어서, SocialPage를 상속받도록 변경해 주어야 합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > using Facebook_Graph_Toolkit; public class MyPage : SocialPage { ... } </pre> <br /> 그다음, 해당 페이지의 PreInit 이벤트에서 "ExtendedPermissions"를 설정합니다. 지난번 글에 보면, 제 홈페이지의 경우 fb:login 버튼에 이 값들을 설정해 두고 있었는데요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <fb:login-button perms="email,user_website"></fb:login-button> </pre> <br /> 만약, 위와 같은 정보가 필요 없다면, 이 부분의 설정은 생략해도 됩니다. 하지만, 제 웹 사이트의 경우에는 필요했기 때문에 아래와 같이 OnPreInit 메서드를 재정의 해주었습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > protected override void OnPreInit(EventArgs e) { base.OnPreInit(e); <span style='color: blue; font-weight: bold'>this.ExtendedPermissions = "email,user_website";</span> } </pre> <br /> 그다음, 로그인 버튼을 aspx 웹 페이지에 추가해 주고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/login-button.png" onclick="ImageButton1_Click" /> </pre> <br /> 로그인 버튼이 눌렸을 때의 서버 측 이벤트 핸들러에서 단순하게 SocialPage.RedirectToFacebookAuthorization 메서드를 호출해 주면 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { this.RedirectToFacebookAuthorization(); } </pre> <br /> 그럼, 내부적으로 "<a target='tab' href='https://graph.facebook.com/oauth/authorize'>https://graph.facebook.com/oauth/authorize</a>" 웹 페이지를 클라이언트 측 웹 브라우저가 방문하게 되고 로그인하게 됩니다. 정상적으로 로그인을 했으면 facebook 측에서는 다시 사용자가 원래 방문했던 웹 사이트로 redirection을 해줍니다.<br /> <br /> 그럼, Page의 부모 클래스였던 SocialPage의 OnLoad 메서드 내에서는, 재지정되어 전송된 URL로부터 "code" 쿼리 문자열 값을 알아내서 내부적으로 SocialPage.Api 클래스에 기본적인 Facebook 관련 정보들을 설정해 줍니다.<br /> <br /> 이때부터는, facebook으로부터 자유롭게 정보 조회를 할 수 있는데요. 예를 들어, 현재 로그인한 사용자 정보는 다음과 같이 구할 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Facebook_Graph_Toolkit.GraphApi.User fbUser = new User("me", Api.AccessToken); string userName = fbUser.Name; string email = fbUser.Email; string uid = fbUser.ID; </pre> <br /> <hr style='width: 50%' /><br /> <br /> 그런데, 2가지 문제가 있더군요. 첫 번째는, fbUser에서 제공되는 정보에는 확장 속성으로 요청한 "user_website" 값이 없다는 점입니다. 이를 해결하려면 페이스북에서 배포되는 Graph API를 그대로 사용하면 됩니다. 어차피 AccessToken 값만 있으면 되기 때문에 다음과 같이 구해올 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Facebook.FacebookAPI api = new Facebook.FacebookAPI(<span style='color: blue; font-weight: bold'>Api.AccessToken</span>); Facebook.JSONObject me = null; me = api.Get("/me"); if (me.Dictionary.ContainsKey("website") == true) { Facebook.JSONObject value = me.Dictionary["website"]; if (value != null) { string user_website = value.String; } } </pre> <br /> 또 한 가지는, 이건 아마도 페이스북의 문제인 것 같습니다.<br /> <br /> 예를 들어, 사용자가 방문한 웹 사이트가 "<a target='tab' href='http://test.com'>http://test.com</a>"라고 할 때, 이런 URL로 방문한 상태에서는 정상적으로 페이스북 로그인이 이뤄지지만, 쿼리 문자열을 하나라도 포함하고 있으면 예외가 발생했습니다. 즉, "http://test.com/test.aspx?myValue=0"과 같이 myValue라는 쿼리 문자열을 포함하면 "Facebook Graph Toolkit"을 사용하면 예외가 발생하고 이벤트 로그에 다음과 같은 기록을 볼 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Log Name: Application Source: ASP.NET 4.0.30319.0 Date: 2011-10-09 오후 10:10:28 Event ID: 1309 Task Category: Web Event Level: Warning Keywords: Classic User: N/A Computer: Web2008.testpc.co.kr Description: Event code: 3005 Event message: An unhandled exception has occurred. Event time: 2011-10-09 오후 10:10:28 Event time (UTC): 2011-10-09 오후 1:10:28 Event ID: 478a718c878c40dea2b712c611343e81 Event sequence: 36 Event occurrence: 3 Event detail code: 0 Application information: Application domain: /LM/W3SVC/1/ROOT-39-129632393463486808 Trust level: Full Application Virtual Path: / Application Path: C:\inetpub\wwwroot\ Machine name: Web2008 Process information: Process ID: 3108 Process name: w3wp.exe Account name: NT AUTHORITY\SYSTEM Exception information: <span style='color: blue; font-weight: bold'>Exception type: FacebookException Exception message: OAuthException : Error validating verification code.</span> at Facebook_Graph_Toolkit.Helpers.WebResponseHelper.GetWebResponseObject(String url) at Facebook_Graph_Toolkit.Helpers.WebResponseHelper.GetWebResponse(String url) at Facebook_Graph_Toolkit.SocialPage.OnLoad(EventArgs e) at System.Web.UI.Control.LoadRecursive() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) Request information: Request URL: http://test.com/test.aspx?myValue=0&code=...[생략]... Request path: /Default.aspx User host address: 192.168.50.2 User: Is authenticated: False Authentication Type: Thread account name: NT AUTHORITY\SYSTEM Thread information: Thread ID: 25 Thread account name: NT AUTHORITY\SYSTEM Is impersonating: False Stack trace: at Facebook_Graph_Toolkit.Helpers.WebResponseHelper.GetWebResponseObject(String url) at Facebook_Graph_Toolkit.Helpers.WebResponseHelper.GetWebResponse(String url) at Facebook_Graph_Toolkit.SocialPage.OnLoad(EventArgs e) at System.Web.UI.Control.LoadRecursive() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) </pre> <br /> 문제의 원인을 파악하기 위해서는 SocialPage.RedirectToFacebookAuthorization 메서드 내부를 들여다 보아야 합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > protected void RedirectToFacebookAuthorization() { this.FacebookAppConfigManager.Initialize(); string url = string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope={2}", this.FacebookAppConfigManager.FacebookAppID, base.Request.Url.AbsoluteUri, this.ExtendedPermissions); base.Response.Redirect(url, true); } </pre> <br /> 보시면, redirect_uri에 "base.Request.Url.AbsoluteUri" 값을 사용하는데, 결국 "<a target='tab' href='http://test.com/test.aspx?myValue=0'>http://test.com/test.aspx?myValue=0</a>" 값이 들어가는 것을 볼 수 있는데요. "Facebook Graph Toolkit"을 사용하지 않고 직접 페이스북에 쿼리 문자열을 포함한 체로 방문을 해봐도 오류가 발생합니다. (쿼리 문자열 부분을 제외하면 로그인이 성공합니다.) 비록, 페이스북 자체에서 쿼리 문자열을 받아들이는 것에 오류가 있다는 것이지만 사용자 웹 사이트에서는 redirect_uri 값으로 넘어가는 URL에 쿼리 문자열이 들어가지 않도록 주의를 해줘야 합니다.<br /> <br /> 만약, 부득이하게 쿼리 문자열이 포함되어 있는 웹 페이지에서 로그인 시도가 발생한다면? 어쩔 수 없습니다. "Facebook Graph Toolkit"의 소스 코드를 변경해 주는 것이 좋습니다. (소스 코드는 "<a target='tab' href='http://fgt.codeplex.com/'>http://fgt.codeplex.com/</a>" 내에서 다운로드 할 수 있습니다.)<br /> <br /> 가능한 변경을 최소화하기 위해, 제 경우에는 "this.FacebookAppConfigManager.Initialize();"의 Initialize 메서드를 internal에서 public으로 바꿔주고 다시 소스 코드를 빌드했습니다. 그런 다음, 직접 SocialPage를 상속받은 웹 페이지에서 "RedirectToFacebookAuthorization" 역할을 하는 별도의 메서드를 다음과 같이 구현해 주었습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > public void RedirectToFacebook() { <span style='color: blue; font-weight: bold'>string thisUrl = Request.Url.GetLeftPart(UriPartial.Path);</span> this.FacebookAppConfigManager.Initialize(); string url = string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope={2}", this.FacebookAppConfigManager.FacebookAppID, <span style='color: blue; font-weight: bold'>thisUrl</span>, this.ExtendedPermissions); base.Response.Redirect(url, true); } </pre> </p><br /> <br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1477
(왼쪽의 숫자를 입력해야 합니다.)