성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
[정성태] 만드실 수 있습니다. 단지, Unity 엔진 내의 스크립트와 W...
글쓰기
제목
이름
암호
전자우편
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'>Facebook OAuth 처리 시 상태 정보 전달 방법과 "유효한 OAuth 리디렉션 URI" 설정 규칙</h1> <p> 페이스북 로그인을 위한 OAuth 요청 시 대개 다음과 같은 형식의 URL을 보냅니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> https://www.facebook.com/v2.8/dialog/oauth/?client_id={...client_id...}&<span style='color: blue; font-weight: bold'>redirect_uri={...redirect_url...}</span>&response_type=code </div><br /> <br /> 매개변수 중에 "redirect_uri" 관련해서 예전에 한 번 설명한 적이 있는데,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 페이스북 HTTPS 인증을 localhost에서 테스트하는 방법 ; <a target='tab' href='https://www.sysnet.pe.kr/2/0/11855'>https://www.sysnet.pe.kr/2/0/11855</a> </pre> <br /> 위의 글에서도 언급했지만 (이제는 강제 적용된) "리디렉션 URI에 Strict 모드 사용"과 겹치면 "redirect_uri"로 가능한 값은 "유효한 OAuth 리디렉션 URI"에 등록한 것으로 제한됩니다. 여기서 문제는, 웹 페이지에서 현재 상태를 유지하고 싶을 때입니다. 가령 여러분들이 다음과 같은 페이지를 방문한다고 가정해 보겠습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > https://yoursite.com/product/view/5100 </pre> <br /> 그럼 페이스북 인증을 위해 해당 URL의 도메인 명을 등록할 것이고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 유효한 OAuth 리디렉션 URI https://yoursite.com/ </pre> <br /> 이렇게 페이스북 로그인 처리가 되면, 사용자는 이전에 보고 있던 페이지가 아닌 "/" 루트 페이지로 원치 않은 이동을 하게 됩니다. 만약, 현재 페이지를 유지하기 위해 redirect_uri을 다음과 같이 제공하면,<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> https://www.facebook.com/v2.8/dialog/oauth/?client_id={...client_id...}&<span style='color: blue; font-weight: bold'>redirect_uri=https://yoursite.com/product/view/5100</span>&response_type=code </div><br /> <br /> 이것은 "유효한 OAuth 리디렉션 URI"에 등록한 "<a target='tab' href='https://yoursite.com/'>https://yoursite.com/</a>"과 일치하지 않기 때문에 로그인에 실패하면서 다음과 같은 메시지를 사용자 웹 브라우저에서 보게 되고,<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> URL blocked: This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.<br /> <br /> 차단된 URL: 리디렉션 URI가 앱의 클라이언트 OAuth 설정의 화이트리스트에 없으므로 리디렉션하지 못했습니다. 클라이언트 및 웹 OAuth 로그인이 설정되었는지 확인하고 모든 앱 도메인을 유효한 OAuth 리디렉션 URI로 추가하세요.<br /> </div><br /> <br /> 위의 메시지 상자와 함께 제공되는 "확인" 버튼을 누르면 메시지만 바뀌며 이후 계속 반복됩니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.<br /> <br /> URL을 읽어들일 수 없음: 앱 도메인에 포함되어 있지 않은 URL입니다. 이 URL을 읽어들이려면 앱 설정에서 앱 도메인 필드에 앱의 모든 도메인과 서브 도메인을 추가하세요.<br /> </div><br /> <br /> 물론, 이 문제를 해결하기 위해 해당 URL을 추가 등록해도 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 유효한 OAuth 리디렉션 URI https://yoursite.com/ https://yoursite.com/product/view/5100 </pre> <br /> 하지만 가능한 설정이 무수히 많은 상황에서 저런 URL을 모두 등록하는 것은 현실적으로 불가능하다고 봐야 됩니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 그럼, 이 문제를 어떻게 해결할 수 있을까요? 바로 이럴 때, "state" 매개변수를 사용할 수 있습니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> https://www.facebook.com/v2.8/dialog/oauth/?client_id={...client_id...}&redirect_uri={...redirect_url...}&response_type=code&<span style='color: blue; font-weight: bold'>state={...state...}</span> </div><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;' > 로그인 보안 - State 매개변수 ; <a target='tab' href='https://developers.facebook.com/docs/facebook-login/security/#stateparam'>https://developers.facebook.com/docs/facebook-login/security/#stateparam</a> </pre> <br /> 이에 대해 다음과 같이 설명하고 있습니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> 웹사이트에 Facebook 로그인 대화 상자를 사용하는 경우 state 매개변수는 사이트 간 요청 위조 공격으로부터 앱을 보호하는 고유 문자열입니다.<br /> </div><br /> <br /> 왠지 state 매개변수는 CSRF를 위한 목적으로만 사용해야 할 것 같은데, 사실 이 값은 oauth 절차에서 사용자 사이트와 facebook 간에 그대로 보존되는 특징이 있기 때문에 상태 정보를 유지하는 방법으로 사용할 수 있습니다. 실제로 이에 대해서는 위의 문서에서 "Strict 모드 활성화"를 다루며 다음과 같이 설명하고 있습니다.<br /> <br /> <ul> <li><span style='color: blue; font-weight: bold'>앱에서 다이내믹 리디렉션 URI를 사용하는 경우 state 매개변수를 사용</span>하여 다이내믹 정보를 제한된 수의 리디렉션 URI에 전달합니다. 그런 다음 각 제한된 리디렉션 URI를 유효한 OAuth 리디렉션 URI 리스트에 추가합니다.</li> <li><span style='color: blue; font-weight: bold'>앱에서 제한된 수의 리디렉션 URI를 사용</span>하는 경우 각 리디렉션 URI를 유효한 OAuth 리디렉션 URI 리스트에 추가합니다.</li> </ul> <br /> 따라서, "<a target='tab' href='https://yoursite.com/product/view/5100'>https://yoursite.com/product/view/5100</a>"과 같은 URL의 경우에는 개발자가 "state" 구성을 (임의 재량으로) 다음과 같은 구성으로 바꿔,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > category=product,mode=view,id=5100 </pre> <br /> 이렇게 OAuth 요청을 하면 됩니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> https://www.facebook.com/v2.8/dialog/oauth/?client_id={...client_id...}&<span style='color: blue; font-weight: bold'>redirect_uri=https://yoursite.com</span>&response_type=code&<span style='color: blue; font-weight: bold'>state=category=product,mode=view,id=5100</span> </div><br /> <br /> 그럼, facebook은 로그인 처리 후 redirection을 다음과 같은 형식의 URL로 구성해 전달해 주므로,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > https://yoursite.com?code=...<span style='color: blue; font-weight: bold'>&state=category=product,mode=view,id=5100</span> </pre> <br /> 개발자는 "state" 매개변수를 읽어 사용자가 방문하고 있었던 "<a target='tab' href='https://yoursite.com/product/view/5100'>https://yoursite.com/product/view/5100</a>" URL로 조합해 다시 redirection을 해주면 됩니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> "유효한 OAuth 리디렉션 URI"에는 매개변수를 포함한 URL도 등록할 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 유효한 OAuth 리디렉션 URI https://yoursite.com https://yoursite.com<span style='color: blue; font-weight: bold'>/?category=product</span> </pre> <br /> 당연히, OAuth 요청의 redirect_uri도 정확히 위의 URL과 일치해야만 합니다.<br /> <br /> <div style='BACKGROUND-COLOR: #ccffcc; padding: 10px 10px 5px 10px; MARGIN: 0px 10px 10px 10px; FONT-FAMILY: Malgun Gothic, Consolas, Verdana; COLOR: #005555'> https://www.facebook.com/v2.8/dialog/oauth/?client_id={...client_id...}&<span style='color: blue; font-weight: bold'>redirect_uri=https://yoursite.com/?category=product</span>&response_type=code </div><br /> <br /> 주의할 점은, Facebook의 OAuth가 처리해 주는 매개변수는 오직 1개만 가능하다는 점입니다. 이 때문에 "유효한 OAuth 리디렉션 URI"에 2개의 매개변수를 등록해도,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 유효한 OAuth 리디렉션 URI https://yoursite.com https://yoursite.com<span style='color: blue; font-weight: bold'>/?category=product&mode=view</span> </pre> <br /> Facebook은 "<a target='tab' href='https://yoursite.com/?category=product'>https://yoursite.com/?category=product</a>" 이것까지만 인식하게 되고, 로그인 처리 후 redirection도 mode=view 매개변수가 제거된 체로 넘어오게 됩니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 사실 처음에 저는 이 문제를 "URI 리디렉션 유효성 검사기(Redirect URI Validator)"의 등록으로,<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='facebook_state_queryparam_1.png' src='/SysWebRes/bbs/facebook_state_queryparam_1.png' /><br /> <br /> 가능할 거라 봤습니다. 즉, 페이스북은 아마도 저 callback URL을 우리가 전달한 redirect_uri 값과 함께 호출해 줄 것이고 따라서 적절한 값을 반환하는 페이지를 제공한다면 되지 않을까?...라고 생각했는데 아쉽게도 저 Validator를 구현하는 어떤 코드도 찾지 못했습니다. (사실, 어떤 용도인지 저는 아직도 잘 모르겠습니다. 혹시 아시는 분은 덧글 부탁드립니다. ^^)<br /> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1004
(왼쪽의 숫자를 입력해야 합니다.)