페이스북 개발자 문서의 Websites > Authentication 부분을 번역한 글입니다.
발 번역이라 혹 원문보다 어려울 수 있습니다. 가급적 원문 참고를 권해 드립니다.
Facebook은 각자의 로그인 시스템으로써 Facebook을 이용하여 간단하고도 향상된 사용자 등록(registration)과 sign-in하는 것을 지원합니다. 사용자는 더 이상 각각의 사이트에서 기존처럼 사용자 등록 Form을 입력하거나 각각의 사용자명과 암호를 기억할 필요가 없습니다. 사용자가 페이스북에 들어와있는 동안 각각의 사이트에서도 자동으로 들어와있는 것으로 인식될 것입니다. 로그인을 위해 Facebook을 사용하는 것은 사용자들이브라우저에서 각 사이트에 들어온 순간부터 social을 만들거나 개인화된 경험을 위해 필요로 하는 모든 정보들이 함께 제공될 것입니다.
Facebook 플랫폼은 인증과 허가에 대해 OAuth2.0을 사용합니다. 제작하고자 하는 사이트가 직접 OAuth2.0을 사용하여 로그인하는 것을 추가하려고 할 때 오픈 소스 JavaScript SDK는 로그인을 위해 Facebook을 사용하는 것중에 가장 간단한 방법입니다.
JavaScript SDK는 제작하고자 하는 사이트를 등록할 때 Facebook에서 제공되는 App ID를 필수 요소로합니다. 이 App Id는 사용자와 당신의 사이트 사이에서 적절한 수준의 보안을 유지하고 있음을 확인하는 고유한 구별자입니다. 다음의 예제는 발급받은 AppId를 통해 JavaScript SDK를 로딩하는 방법을 보여줍니다. (JavaScript SDK 로딩은 아래의 예의 경우 정적으로 로딩되는 예를 보여주고 있으며 비동기식으로 로딩할 수 있습니다. 이 부분에 대해서는 JavaScript SDK에 대한 Facebook 문서를 참고해 주시기 바랍니다. 링크 : http://developers.facebook.com/docs/reference/javascript/)
- <html>
- <head>
- <title>My Facebook Login Page</title>
- </head>
- <body>
- <div id="fb-root"></div>
- <script src="http://connect.facebook.net/en_US/all.js"></script>
- <script>
- FB.init({
- appId:'Facebook으로부터 발급받은 App Id',
- cookie:true,
- status:true,
- xfbml:true
- });
- </script>
- </body>
- </html>
제작하고자 하는 Web Page에 포함된 발급받은 App Id를 통해 JavaScript SDK가 로드되면 간단하게 Login Buuton을 Web Page에 아래 예와 같이<fb:login-button>이라는 XFBML 엘리먼트를 사용하여 추가할 수 있습니다.
- <html>
- <head>
- <title>My Facebook Login Page</title>
- </head>
- <body>
- <div id="fb-root"></div>
- <script src="http://connect.facebook.net/en_US/all.js"></script>
- <script>
- FB.init({
- appId:'Facebook으로부터 발급받은 App Id',
- cookie:true,
- status:true,
- xfbml:true
- });
- </script>
- <fb:login-button>Login with Facebook</fb:login-button>
- </body>
- </html>
이 예제를 웹 브라우저에서 열어보면 JavaScript SDK가 Login Button을 Web Page에 생성하고 있습니다.
사용자가 이를 통해 사이트에 들어오려고 할 때 다음의 세가지 상황의 발생합니다.
- 첫번째, Facebook은 사용자 인증(user authentication)을 필요로 합니다.
이는 해당 사용자가 접속하려는 사용자인지를 확인하는 과정입니다. - 두번째, Facebook은 사용하려는 웹 사이트에 대한 인증(service authentication)을 필요로 합니다.
이는 접속하려는 사용자가 그들의 정보를 다른 곳이 접속하고자 하는 사이트에 전송함을 확인하는 과정입니다. - 마지막으로 사용자는 접속하려는 사이트가 사용자 자신의 정보 접근에 대해 인증하는 것을 반드시 명확히해야 합니다(service authorization).
이는 사용자가 접속하려는 사이트가 명확히 어떤 정보에 접근하는 지 확인하는 과정입니다.
이 과정은 복잡해 보입니다만 다행스럽게도 fb:login-button을 사용하고 모든 사용자가 이를 클릭하는 것만으로도 필요로 하는 것을 해결합니다. 사용자가 이를 실행할 때 JavaScript SDK는 제작한 사이트로부터 들어온 요청을 통해 사용자가 Facebook에 로그인 하는 것임을 명확히 합니다. Facebook은 사용자들에게 접근하려는 사이트와 사이트가 요청하는 사용자 정보를 탐고 있는 authorization dialog를 통해 이를 표헌합니다. 기본으로 보이는 dialog는 다음과 같습니다. (이 예제의 경우 이미 facebook에 로그인 되어 있으면 제대로 작동하지 않습니다. 이는 현재 로그인 되어 있기때문에 Facebook이 더 이상 로그인 요청을 받지 않기 때문입니다. 또한 해당 사이트 즉 웹 애플리케이션 또한 앱에서 제거되어 있어야 합니다. 기본정보는 언제든 제공되는 것이기 때문에 예제가 잘 안 될 수 있습니다.)
바로 위의 화면에서 사용자가 허용(영어의 경우 Allow)를 클릭하면 사용자가 접속하려는 사이트가 요청하는 정보를 넘겨 주겠다는 의미이고 허가 안함(영어의 경우 Don't Allow)를 클릭하면 Dialog 창은 닫히고 어떤 정보도 넘어가지 않습니다. 기본값으로는 사용자의 이름, 프로필 사진, Facebook에서 전체 공개로 설정이 되어 있는 데이터가 전달됩니다. (자세한 것은 Graph Object 를 참고해 주세요)
사용자 e-mail 등과 같이 보다 많은 사용자 정보에 접근하는 것을 필요로 할때 해당 정보에 맞는 permission 을 요청하여야 합니다. 이는 아래 예제와 같이 fb:login-button 의 속성으로 perms를 통해 요청할 수 있습니다.
- <html>
- <head>
- <title>My Facebook Login Page</title>
- </head>
- <body>
- <div id="fb-root"></div>
- <script src="http://connect.facebook.net/en_US/all.js"></script>
- <script>
- FB.init({
- appId:'Facebook으로부터 발급받은 App Id',
- cookie:true,
- status:true,
- xfbml:true
- });
- </script>
- <fb:login-button perms="email,user_checkins">
- Login with Facebook
- </fb:login-button>
- </body>
- </html>
이 페이지에서사용자가 로그인 버튼을 클릭하면 아래에 보이는 것과 같이 dialog가 구성됨을 확인 할 수 있습니다. 위의 예제와 다르게 두 개의 새로운 섹션이 추가됨을 확인 할 수 있습니다.(이렇다 하더라도 위의 기본 정보 또한 제공됩니다.)
요청을 위한 permission들의 전체 리스트는 permissions reference를 참고해 주시기 바랍니다.
'오픈소스 > 소셜 로그인' 카테고리의 다른 글
| [php] 네이버 로그인 api 누군가 만들어 놓으신거 (0) | 2015.04.07 |
|---|---|
| 소셜 로그인, 그리고 복습 (0) | 2015.04.07 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!