혀니의 기술과 삶 ::

OAuth 2.0 소개

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

다음의 웹 페이지를 번역한 것 입니다.

http://hueniverse.com/2010/05/introducing-oauth-2-0/

번역 내용 중 오역이 있을 수 있습니다.

2주전 IETF OAuth 워킹 그룹은 OAuth 2.0 프로토콜의 첫번째 draft를 배포하였습니다. OAuth는 비밀번호의 공유 없이 그들의 웹 리소스에 사용자가 써드 파티 접근 허가를 가능하게 해주는 하나의 보안 프로토콜 입니다. OAuth 1.0은 2007년 12월에 배포되었고, 웹 기반 접근 대안으로써 빠르게 산업 표준화 되어갔습니다. 마이너 교정은 (OAuth 1.0 리비전 A) 보안 문제를 픽스하여 2008년 6월에 배포 되었하였습니다. 2010년 4월에 OAuth는 RFC 5849로서 배포 되었습니다.

OAuth 2.0은 완벽한 새로운 프로토콜이고, 이전 버전과 하위 호환되지 않지만 전체적인 아키텍처와 이전 버전에서 확립된 접근법을 그대로 간직하고 있으며 여전히 많은 적용 요소들을 유지하고 있습니다.

"많은 럭셔리 자동차는 주차키를 가지고 있습니다. 이것은 하나의 특별한 키로 주차만을 위해 제공됩니다. 이 특별한 키는 여러분이 가지고 있는 일반적인 키와 같지 않은데 짧은 거리에 대한 운전만 허용하고 전화나 트렁크에 대한 접근은 허락하지 않습니다. 주차키로 이러한 제한을 하는 것은 매우 영리한 아이디어 입니다. 여러분이 그 외에 다른 잠겨있지 않은 것들을 사용할 때 하나의 특별한 키가 자동차에 대한 제한된 접근을 제공할 것입니다.

웹이 성장함에 따라 더 많은 사이트가 분산 서비스와 클라우딩 컴퓨팅에 의존합니다.: 여러분의 플리커 사진을 인화하는 포토랩, 친구를 찾기 위해 구글 주소록을 사용하는 소셜 네트워크나 다중 서비스로 API를 활용하는 써드 파티 응용 프로그램들이 그것 입니다.

문제는 사용자 이름과 비밀번호를 묻기 위해선 다른 사이트에서 사용자 데이터에 접근하기 위한 응용 프로그램이 고려되어야 한다는 것 입니다. 그리고 이 응용 프로그램을 통해 내가 아닌 다른 누군가에게 사용자 암호가 노출될 수 있다는 겁니다. - 종종 온라인 뱅킹이나 다른 사이트에서 사용되는 비밀번호와 같은 것들 - 이것은 그들이 원하는 대로 제한 없이 접근할 수 있는 방법을 제공합니다. 그들은 사용자를 잠그거나 비밀번호를 변경하는 어떤 행위든 할 수 있습니다.

OAuth는 나의 비밀번호 공유 없이 그들이 가진 리소스에 접근하여 이용이 가능하도록 하는 써드 파티 접근 허가에 대한 사용자를 위한 메서드를 제공합니다.

예를 들어서 하나의 웹 사용자는(리소스 오너) 프린팅 서비스에 그녀의 사용자 이름과 비밀번호 없이 포토 공유 서비스(서버)에 저장된 그녀의 개인적 사진에 접근하여 프린팅 서비스(클라이언트)를 허가할 수 있습니다. 대신에 그녀는 위임-특별 증명을 발행하는 것으로 사진 공유 서비스에 직접적으로 인증하게 됩니다."

새로운 draft는 야후, 페이스북, 세일즈포스, 마이크로소프트, 트위터, Deutsche Telekom, Intuit, 모질라와 구글을 포함하는 넓은 범위의 회사들이 참가함으로써 프로토콜에 대한 목표와 요구들에 대한 오랜 기간의 요구를 표현하였습니다. OAuth는 개방형 기술로 급속하게 채택되었으며 2.0도 예외는 아닙니다. 페이스북과 트위터는 첫 초안이 공식적으로 배포되기 전에 이미 지원을 발표하였습니다.

왜 새로운 버전인가?

OAuth 1.0은 플리커 API나 구글 AuthSub와 같은 대부분 기존의 독점적인 프로토콜을 기반이었습니다. 그 결과 실제적인 구현 경험을 기반으로 최고의 솔루션을 표현하게 되었습니다. 프로토콜로서 사용된 3년 이상의 경험을 토대로 커뮤니티는 OAuth 1.0이 어디서 제한되고 혼동되는지 충분히 배웠고, 3가지 주요 영역 내에서 프로토콜을 개선하는 것에 대해 배웠습니다.

인증 및 서명

OAuth 1.0 구현 시도에 대한 대부분의 실패는 암호화 요구사항이 복잡하기 때문입니다. 실제로 원래 사양은 도움이 되지 않았습니다. 심지어 새롭게 출간된 RFC 5849로써 OAuth는 여전히 클라이언트 쪽에서 사용이 쉽지 않았습니다. 단순한 암호 사용을 위해 편리하고 쉬운 제공을 하지 못한 건 OAuth의 심각한 실수 였습니다.

예를 들어 개발자는 그들의 사용자 이름과 비밀번호를 사용하여 트위터 스크립트를 재빠르게 작성할 수 있습니다. 이들 개발자들은 cURL 스크립트의 단일 라인으로 검색, 인스톨, 그리고 설정 라이브러리를 이용할 수 있습니다.

사용자 환경과 대체 토큰 발행 옵션

OAuth는 2개의 주요 부분을 포함합니다.: 접속 허가를 위해 사용자에게 토큰 취득을 요구하고 보호된 리소스에 접근하기 위해 토큰을 사용합니다. 액세스 토큰을 얻기 위한 방법들을 흐름이라고 부릅니다. OAuth 1.0은 3개의 흐름으로 시작됩니다.: 웹 기반 응용 프로그램, 데스크 탑 클라이언트, 모바일과 제한된 디바이스 그러나 사양이 진화하여 3가지 흐름은 모든 3가지 클라이언트 유형을 제공하는 하나로 통합 되었습니다. 실제로 이러한 흐름은 웹 기반 응용 프로그램에서는 잘 작동하지만 그 외에는 열악한 경험을 제공합니다.

특히 트위터와 같은 더 많은 사이트들이 OAuth를 사용하기 시작 했습니다. 개발자들은 OAuth가 제공하는 제한된 흐름과 고급스럽지 못한 경험을 바탕으로 만들어지게면서 실현 되었습니다.

반면에 페이스북 커넥트는 웹 응용 프로그램, 모바일 기기, 그리고 게임기에 적합한 풍부한 집합을 제공합니다.

실적 규모

거대한 업체들이 OAuth를 사용하기 시작했을 때 커뮤니티들은 OAuth가 잘 확장되지 않는다는 것을 깨달았습니다. 그것은 여러 단계에 걸쳐 상태 관리가 필요하다는 것과 미사용시 폐기하는 것 보다 임시 자격 증명을 발급하는 것 그리고 일반적으로 덜 안전하고 더 어려운 관리가 필요한 오래 지속되는 자격 증명 발급이 필요했습니다.(그리고 데이터 센터와 동기화 되는 것)

추가적으로 OAuth 1.0은 보호된 자원 종점의 유효성 검사를 위해 클라이언트 자격 증명에 접근해야 합니다.

거대한 공급자의 일반적인 아키텍처는 중앙 서버가 자격 증명을 발급하고 분산 서버는 API 호출을 위해 사용됩니다.

OAuth 1.0은 자격증명시 클라이언트 자격증명과 토큰 자격증명 양쪽 모두를 사용하여 분리를 어렵게 합니다.

무엇이 새로워 졌을까?

OAuth2.0에서 새롭게 이용할 수 있는 것들의 세부 집합은 다음과 같다.
6개의 새로운 흐름

사용자-에이전트-흐름: 사용자 내부에서 실행되는 클라이언트(일반적으로 웹 브라우저)

웹-서버-흐름: HTTP요청을 이용해 웹서버를 응용 프로그램을 호출하는 클라이언트. 이것은 OAuth 1.0에서 제공되는 간단한 버전이다.

디바이스 흐름: 제한된 디바이스 상에서 클라이언트가 실행하기에 적당. 그러나 최종 사용자는 또 다른 컴퓨터나 디바이스 상에서 하나의 브라우저에 접근하기 위해 별도로 가져야 한다.

사용자 이름과 비밀번호 흐름: 사용자가 클라이언트 자격 증명 처리를 위해 신뢰하는 케이스에서 사용된다. 그러나 사용자의 이름과 비밀번호를 저장하는 것을 클라이언트는 여전히 원하지 않는다.

클라이언트 자격증명 흐름: 클라이언트는 액세스 토큰을 얻기 위해 자격 증명을 사용한다. 이 흐름은 2-다리 시나리오로 잘 알려진 것을 지원합니다.

주장 흐름: 클라이언트에 액세스 토큰에 대한 교환을 위해 인증 서버에 SAML(보안주장표현언어)의 주장과 같은 주장을 선물한다.

네이티브 응용 프로그램 지원(데스크탑이나 모바일 디바이스에서 실행되는 응용 프로그램)은 위의 흐름을 사용하여 구현할 수 있습니다.

무기명 토큰

OAuth 2.0은 기존의 쿠키 기반 인증 지원을 위해 암호화를 옵션을 제공한다.
HMAC와 토큰 시크릿을 사용하여 서명된 요청을 보내는 대신에 토큰 그 자신은 HTTP를 통해 시크릿을 보낸다. 이것은 요청이나 서명에 대한 표준화 없이 cURL이나 간단한 스크립트 도구를 이용한 API 호출을 허가합니다.

간소한 서명

서명 지원은 특별한 파싱, 인코딩, 파라미터 정렬 등을 제거해 간소화 시켰습니다. 이것은 또한 2가지가 아닌 한가지 시크릿을 사용합니다.

수명이 긴 허가와 함께 수명이 짧은 토큰

오래 지속되는 토큰 문제 대신에 서버는 짧은 수명을 가지는 액세스 토큰과 긴 수명을 가지는 새로고침 토큰이 문제가 될수 있다. 이것은 사용자를 다시 포함할 필요 없이 새로운 액세스 토큰을 취득하기 위해 클라이언트를 허가한다. 그러나 액세스 토큰이 제한되어 있다. 이것의 특징은 야후의 BBAuth 프로토콜과 OAuth 1.0 세션 확장에 채용되어져 있다.

규칙의 분리

OAuth 2.0은 사용자 승인 획득에 대한 인증서버와 API 호출을 처리하는 리소스 서버에서의 토큰 문제를 분리합니다.

그것은 언제 오나요?

OAuth 2.0은 IETF OAuth 워킹 그룹이 개발한게 현재 입니다. 마지막 드래프트는 안정을 추구하지만 많은 특징들이 추가되거나 제거 되었습니다. 부분 지원은 페이스북이나 트위터로에서 이미 사용할 수 있습니다. 마지막 명세는 올해 말까지 예상됩니다.

요약

IETF OAuth 워킹 그룹이 OAuth 2.0 프로토콜의 첫번째 드래프트를 배포(2010.3)
비밀번호 공유 없이 써드 파티 사이트의 접근을 허가하여 나의 보안된 리소스를 제공 가능하게 하는 프로토콜
OAuth 1.0a는 마이너 버전으로 2008.06월에 배포됨
OAuth는 RFC 5849로 2010년 4월에 배포됨
새로운 드래프트는 야후, 페이스북, 세일즈포스, 마이크로소프트, 트위터, Deutsche Telekom, Intuit, 모질라와 구글 등이 참여
OAuth는 개방형 기술
OAuth 2.0은 3가지 주요 영역(사용자, 소비자, 서비스 제공자)에서 프로토콜을 개선함
OAuth는 2개의 주요 요소(토큰 취득, 인증)와 3개의 흐름(웹 기반 응용 프로그램, 데스크탑 클라이언트, 모바일과 제한된 디바이스)를 가짐
OAuth 2.0에서 새로워진 6개의 흐름(사용자-에이전트, 디바이스, 웹-서버, 사용자 이름과 비밀번호, 클라이언트 자격 증명, 주장)

'Social' 카테고리의 다른 글

OAuth 2.0 소개 (0)	2012/05/14
4.[Facebook] Facebook for Websites(3) (0)	2012/04/26
3.[Facebook] Facebook for Websites(2) (0)	2012/04/25
2.[Facebook] Facebook for Websites(1) (0)	2012/04/13
1.[Facebook] Getting Started (0)	2012/04/08

Posted by -세티-

TAG OAuth 2.0

Trackback 0 Comment 0

TRACKBACK http://www.setisigns.net/trackback/429

댓글을 달아 주세요

4.[Facebook] Facebook for Websites(3)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

개인화

여러분의 웹 사이트를 가장 쉽게 개인화하는 방법은 바로 소셜 플러그인(Social Plugins, https://developers.facebook.com/docs/plugins/)을 사용하는 것입니다. 여러분의 사이트에 로그인 이외에도 추가적인 기능을 가지기 위해 그리고 여러분의 사용자에게 보다 깊은 개인화 경험을 제공하기 위해 그래프 API(Graph API, https://developers.facebook.com/docs/reference/api/)를 이용해 접근할 수 있습니다. 그래프 API를 이용하면 여러분은 사용자의 프로필에 접근할 수 있고, 페이스북의 담벼락이나 뉴스피드에 글을 배포할 수 있으며 친구들의 리스트를 가져올 수도 있습니다. 자바스크립트 SDK(https://developers.facebook.com/docs/reference/javascript/)는 그래프 API에 접근하는 직접적인 방법을 제공합니다.

FB.api(https://developers.facebook.com/docs/reference/javascript/FB.api/): 이 함수는 하나의 타겟 함수 인데 인수로 문자열을 취하고 호출이 완료되면 콜백 함수를 호출합니다. 다음의 코드 데모는 여러분의 웹 페이지에 그래프 API를 이용하여 사용자의 이름과 사진을 보여주기 위해 어떻게 FB.api()를 사용하는지 보여 줍니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });

          FB.api('/me', function(user) {
            if (user) {
              var image = document.getElementById('image');
              image.src = 'https://graph.facebook.com/' + user.id + '/picture';
              var name = document.getElementById('name');
              name.innerHTML = user.name
            }
          });
        };

        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>

      <div align="center">
        <img id="image"/>
        <div id="name"></div>
      </div>
    </body>
</html>

자바스크립트 SDK로 여러분의 사이트를 개인화 하는 또 다른 방법은 FB.ui 함수를 사용하는 것입니다. 이 함수는 여러분의 사이트 문맥내에서 페이스북의 플랫폼 다이얼로그(Platform Dialogs, https://developers.facebook.com/docs/reference/dialogs/)를 호출합니다. 여러분이 새로운 친구를 초대하거나 요청을 허락하거나 사용자의 피드에 포스트 하기 위한 기능으로 사용됩니다. 다음의 데모는 여러분의 사이트에서 피드 다이얼로그(feed dialog)를 어떻게 사용하는지를 보여줍니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });

          FB.ui({ method: 'feed',
              message: 'Facebook for Websites is super-cool'});
        };

        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>

    </body>
</html>

여러분의 브라우저에서 이 코드가 삽입된 페이지가 로드되면 자바스크립트 SDK는 사용자가 자신의 피드를 게시하는데 사용될 아래의 대화 상자를 표현하게 됩니다. 여러분은 사용자가 수정이나 게시하기 전에 무시할 수 있도록 대화 상자에 기본값으로 숫자를 설정할 수 있습니다.

자바스크립트 SDK를 이용하여 어떤 것들이 가능하고 불가능한지 알아내는 최고의 방법은 페이스북이 제공하는 자바스크립트 콘솔(https://developers.facebook.com/tools/console/)을 이용하는 것입니다. 이 도구는 여러분의 사이트에서 무엇인가를 변경하기 전에 필요한 예제를 직접 넣어 콘솔 내에서 실행해는데 사용합니다.

자바스크립트 SDK는 클라이언트 쪽 코드로서 그래프 API와 플랫폼 다이얼로그에 접근할 수 있게 해주지만 우리가 가지는 몇 가지 흥미로운 통합 중 일부는 여러분의 웹 서버에서 실행되는 서버쪽 코드를 사용해서 그래프 API에 접근해야 합니다.

자바스크립트 SDK는 사용자의 기록에 대한 자세한 것을 저장할 수 있고 그것은 PHP SDK에 의해 접근되어질 수 있습니다. 이것은 별도의 작업 없이 페이스북 플랫폼에 대한 서버쪽 호출을 만들수 있습니다. 다음의 PHP 예제는 개인화를 위해 로그인을 위한 자바스크립트 SDK와 PHP SDK를 어떻게사용하는지를 보여줍니다.

<?php

define('YOUR_APP_ID', 'YOUR APP ID');

//uses the PHP SDK. Download from https://github.com/facebook/php-sdk
require 'facebook.php';

$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => 'YOUR APP SECRET',
));

$userId = $facebook->getUser();

?>

<html>
<body>
    <?php if ($userId) {
      $userInfo = $facebook->api('/' + $userId); ?>
      Welcome <?= $userInfo['name'] ?>
    <?php } else { ?>
    <div id="fb-root"></div>
    <fb:login-button></fb:login-button>
    <?php } ?>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '<?= YOUR_APP_ID ?>',
          status     : true,
          cookie     : true,
          xfbml      : true,
          oauth      : true,
        });

        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
      };

      (function(d){
         var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         d.getElementsByTagName('head')[0].appendChild(js);
       }(document));
    </script>
</body>
</html>

자바스크립트 SDK와 PHP SDK를 함께 사용하는 것은 서버쪽 코드로 사용자 자격 증명과 정보에 어떻게 접근하는 가에 대한 몇 가지 방법 중 하나입니다. 페이스북의 인증 가이드(https://developers.facebook.com/docs/authentication/)는 클라이언트 쪽 코드 사용없이 어떻게 그래프 API에 접근하여 자격 증명과 허가를 받아오는지 보여줍니다.

'Social' 카테고리의 다른 글

OAuth 2.0 소개 (0)	2012/05/14
4.[Facebook] Facebook for Websites(3) (0)	2012/04/26
3.[Facebook] Facebook for Websites(2) (0)	2012/04/25
2.[Facebook] Facebook for Websites(1) (0)	2012/04/13
1.[Facebook] Getting Started (0)	2012/04/08

Posted by -세티-

TAG Graph API, personalization, Platform Dialogs, Social Plugins, 개인화, 자바스크립트 콘솔

Trackback 0 Comment 0

TRACKBACK http://www.setisigns.net/trackback/428

댓글을 달아 주세요

3.[Facebook] Facebook for Websites(2)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

인증

페이스북은 여러분의 웹 사이트에 인증 수단으로 사용자 등록과 서명을 제공합니다. 사용자가 여러분의 웹 사이트를 이용할 때 또 다른 아이디나 패스워드를 이용해 다시 등록폼을 채워야할 필요가 없습니다. 그리고 사용자가 이미 여러분의 웹 사이트에 로그인을 한적이 있다면 그 이후 여러분의 웹 사이트를 이용할 때 자동으로 서명이 이뤄지게 됩니다. 여러분의 웹 사이트가 페이스북의 로그인 제공자를 사용하게 되면 소셜과 개인화된 경험을 생성하여 제공할 수 있게 됩니다.

페이스북 플랫폼은 인증과 권한 부여를 위해 OAuth2.0(http://oauth.net/2/)을 사용합니다. 여러분이 OAuth2.0을 이용하여 사이트에 직접 로그인을 추가할수도 있겠지만 페이스북이 제공하는 오픈소스 자바스크립트 SDK를 이용해 로그인 하는 것이 가장 간단한 방법입니다.

자바스크립트 SDK를 사용하려면 여러분의 웹 사이트에 페이스북 앱ID(App ID)를 등록해야 합니다. 앱ID는 여러분의 웹 사이트와 사용자 사이에 높은 보안 수준을 가지는 유니크한 식별자 입니다. 이러한 인증 방법을 사용하기 위해서는 여러분의 앱이 도메인으로 설정되어져야만 합니다. 앱에 대한 설정은 앱 설정 페이지(https://developers.facebook.com/apps)를 통해 변경할 수 있습니다. 우선은 여러분이 가지고 있는 앱ID를 이용하여 어떻게 자바스크립트 SDK를 로드하는지 보겠습니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
    </body>
</html>

여러분의 웹 페이지에서 자바스크립트 SDK가 로드되면서 여러분의 앱ID를 이용해 초기화를 진행합니다.

만약 페이스북이 제공하는 로그인 플러그인을 사용하고 싶다면 <div class="fb-login-button"> 이라는 테그를 사용하여 간단하게 제공할 수 있습니다. 아래는 이것을 사용하는 것에 대한 예제 입니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
      <div class="fb-login-button">Login with Facebook</div>
    </body>
</html>

브라우저를 이용해 사용자가 페이지를 로드하게 되면 자바스크립트 SDK는 여러분의 페이지에 아래의 그림과 같은 로그인 버튼을 표현하게 됩니다.

사용자가 여러분의 웹 사이트에서 로그인을 하기 위해 다음의 3가지를 필요로 하게 됩니다.

첫째로, 페이스북은 사용자 인증(authenticate)을 필요로 합니다.

둘째로, 페이스북은 여러분의 웹 사이트에 대한 인증(authenticate)이 필요 합니다. 이것이 의미하는 바는 사용자가 자신의 정보를 다른 곳이 아닌 여러분의 웹 사이트에 제공하는 것을 보장한다는 의미가 됩니다.

마지막으로 사용자는 그들의 정보에 접근하기 위해 여러분의 웹 사이트에 명시적으로 권한 부여를 해야만 합니다. 이것은 사용자로 하여금 어떤 데이터를 여러분의 사이트에 제공하는지를 보장해야 하기 때문입니다.

이런 절차들이 일견 복잡해 보이겠지만 사용자는 단지 로그인 버튼을 클릭함으로써 모든 것을 해결하게 됩니다.

그리고 여러분의 웹 사이트에서 요청이 오게되면 페이스북은 이것들을 안전하게 처리하게 됩니다.

페이스북은 사용자 브라우저에 인증 다이얼로그(authorization dialog)를 표현하게 되고, 여러분의 웹 사이트에 사용자 정보를 제공하게 됩니다.

만일 사용자가 인증 다이얼로그의 Allow를 클릭하게 되면 페이스북은 정보를 요청한 웹 사이트에 접근을 허락하게 됩니다. 그러나 사용자가 Don't Allow를 클릭하게 되면 웹 사이트에 정보를 제공하지 않고 또한 인증 다이얼로그를 닫을 것 입니다. 기본적으로 Allow를 클릭하게 되면 페이스북은 사용자의 이름과 사진 그리고 페이스북에서 사용자가 공유하는 다른 데이터에 대한 접근을 허락하게 됩니다.(보다 자세히 알고 싶다면 사용자 그래프 객체를 보세요, https://developers.facebook.com/docs/reference/api/user/)

만약 여러분의 웹 사이트가 사용자 이메일 주소를 포함한 더 많은 정보를 제공받길 원한다면 이를 위한 퍼미션(permissions)을 제공하고 사용자에게 허락을 받아야 합니다. 이 퍼미션을 사용하기 위해선 로그인 버튼에 scope라는 애트리뷰트를 추가해야 합니다.

아래의 코드는 scope 애트리뷰트가 포함된 로그인 버튼에 대한 예제 입니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
      <div class="fb-login-button" scope="email,user_checkins">
        Login with Facebook
      </div>
    </body>
</html>

scope를 설정하게 되면 사용자가 로그인 할 때 인증 다이얼로그에 아래의 그림에 나오는 것 처럼 이메일과 사용자 체크인을 요청한다는 내용을 보여주게 됩니다.

페이스북이 제공하는 퍼미션 레퍼런스(https://developers.facebook.com/docs/authentication/permissions/) 의 모든 리스트에 대해 이용이 가능합니다. 지금까지의 퍼미션은 여러분의 웹 사이트와 페이스북 사이의 퍼미션에 해당하는 내용이었습니다.

이와 반대로 여러분의 웹 사이트와 사용자 사이에도 퍼미션이 필요할 것입니다. 퍼미션의 단계가 많아지게 되면 아무래도 사용자는 불편을 겪게 될 것이고 이로 인해 이용자가 줄어들 게 될지도 모릅니다. 그래서 페이스북이 여러분의 사이트에 요청하고 싶은 것은 여러분은 단지 요청을 하기만 하면 된다는 것입니다. 이러한 요청을 위해 등록 플러그인(Registration Plugin, https://developers.facebook.com/docs/plugins/registration/)을 사용하면 됩니다. 등록 플러그인은 2가지 중요한 특징을 제공합니다. 이 등록 플러그인은 페이스북에 계정이 없는 사용자와 사용자 정보를 추가 요청하기를 원할 때 사용됩니다. 등록 플러그인은 로그인 플러그인과 마찬가지로 매우 간단하게 사용할 수 있습니다. 여러분의 웹 사이트에 단지 <div class="fb-registration"> 엘리먼트를 추가하기만 하면 됩니다.

<html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
      <div
        class="fb-registration"
        data-fields="[{'name':'name'}, {'name':'email'},
          {'name':'favorite_car','description':'What is your favorite car?',
            'type':'text'}]"
        data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION"
      </div>
    </body>
</html>

위의 코드를 여러분의 웹 사이트에 추가하게 되면 브라우저는 아래의 이미지와 같은 폼을 그리게 됩니다.

만약 사용자가 페이스북에 로그인 되어 있지 않다면 위와 같은 이미지를 보게 됩니다. 여기서 주의할 점은 입력폼이 자유 입력폼이 아니라는 것입니다. 이것은 페이스북에 로그인 하기 위한 하나의 링크 개념으로 이해를 하시면 되는 것입니다.

이와 반대로 사용자가 페이스북에 로그인이 되어 있거나 페이스북의 등록폼을 이용하여 다시 뭔가를 등록하기를 원할 때 아래와 같은 이미지의 등록폼을 보여주게 됩니다. 주의 깊게 봐야 할 부분은 입력폼이 페이스북의 정보로 채워져 있다는 것입니다.

만약 수정해야 할 정보가 있다면 사용자는 정보를 수정한 후 등록 버튼을 누르기만 하면 됩니다. 그리고 등록폼에 사용자 정의 필드를 생성하여 제공할 수 있는데 위의 그림에 있는 "What is your favorite car?" 라는 필드가 있습니다. 이곳에 표현되는 정보는 페이스북이 제공하지 않는 사용자 정의 입력란 입니다. 사용자 정의 필드를 생성하는 부분은 위의 코드에서 favorite_car라는 커스텀 필드를 참고하시면 됩니다. 사용자는 모든 정보를 입력하고 등록 버튼을 누르게 됩니다. 그 이후 아래의 대화상자로 표시되는 인증 및 권한 부여 프로세스를 시작하게 됩니다.

인증과 허가가 모두 완벽하게 이뤄졌다면 등록 프로세스가 완료될 때 위의 코드에 있는 "data-redirect-uri" 애트리뷰트에 설정된 주소로 사이트를 이동시키게 됩니다.

로그인 버튼과 등록 플러그인을 이용해서 페이스북의 5억명 유저가 여러분의 웹 사이트를 쉽게 방문할 수 있게 할수 있습니다.

만일 여러분이 페이스북 로그인을 추가하는 것에 대해 더 많은 정보를 얻고 싶다면 로그인 버튼(https://developers.facebook.com/docs/reference/plugins/login/), 등록 플러그인(https://developers.facebook.com/docs/plugins/registration/) 그리고 자바스크립트 SDK(https://developers.facebook.com/docs/reference/javascript/) 문서를 읽기를 권합니다.

'Social' 카테고리의 다른 글

OAuth 2.0 소개 (0)	2012/05/14
4.[Facebook] Facebook for Websites(3) (0)	2012/04/26
3.[Facebook] Facebook for Websites(2) (0)	2012/04/25
2.[Facebook] Facebook for Websites(1) (0)	2012/04/13
1.[Facebook] Getting Started (0)	2012/04/08

Posted by -세티-

TAG authenticate, fb-login-button, fb-registration, OAuth 2.0, permissions, scope, 인증, 페이스북, 페이스북 인증

Trackback 0 Comment 0

TRACKBACK http://www.setisigns.net/trackback/427

댓글을 달아 주세요

2.[Facebook] Facebook for Websites(1)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Getting Started > Facebook for Websites

웹 사이트를 위한 페이스북(Facebook for Websites)

페이스북 플랫폼은 여러분의 웹 사이트를 보다 더 소셜하게 제작할 수 있도록 도움을 줍니다. 여러분은 단 한줄의 HTML과 사용자 참여를 권유하기 위한 좋아요 버튼(Like Button)과 같은 소셜 플러그인을 사용할 수 있습니다. 페이스북의 로그인 버튼(Login Button)과 등록 플러그인(Registration Plugin)은 여러분 자신에 대한 사용자 등록과 서명하는 것을 간단하게 하거나 불필요한 것을 제거해 줍니다. 마지막으로 그래프 API(Graph API)는 사용자가 신뢰성 있는 깊은 개인화 경험을 생성하기 위해 허용하는 것으로 정해진 사용자의 모든 소셜 그래프에 여러분이 접근할 수 있게 해줍니다.

이 가이드는 이러한 특징들의 영향을 이용해 하나의 웹 앱을 생성하는 것을 기본으로 여러분에게 다가가려고 한다. 이 가이드의 예제는 기본적으로 클라이언트-쪽 코드인 HTML/ 자바스크립트와 서버-사이드 프로그래밍인 PHP를 사용합니다.

이 문서 에서 다루는 내용은 아래와 같습니다.

- 소셜 플러그인

- 인증

- 개인화

- 분석

소셜 플러그인

소셜 플러그인은 페이스북 플랫폼을 시작하기 위한 가장 쉬운 길 입니다. 플러그인은 HTML 라인으로 여러분의 웹 사이트 안에 통합될 수 있으며 소셜 특징들을 끼워 넣을 수 있습니다. 그것들은 페이스북에 호스트 되기 때문에 그 플러그인은 페이스북으로 로그인한 현재의 모든 사용자들에게 개인화 되어 집니다.

한번의 클릭으로 여러분의 페이지를 친구들에게 공유하기 위해 제공되는 가장 중요한 소셜 플러그인은 좋아요 버튼(Like Button) 입니다. 여러분은 iframe tag로 어느 페이지에서든 좋아요 버튼(Like Button)을 추가할 수 있습니다.

<html>
    <head>
      <title>My Great Web page</title>
    </head>
    <body>
       <iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>
    </body>
</html>

누가 페이지를 좋아하는지 사용자의 친구들 프로필 사진과 이름을 넣기 위한 옵션을 포함하는 좋아요 버튼(Like Button)을 위한 몇 가지 옵션이 있습니다. 여기에 페이스북 개발자 사이트에 대한 좋아요 버튼(Like Button)이 있습니다.

여러분의 사이트에서 더 많은 경험을 권유하기 위해 다른 사용자와의 인터렉션 결과를 보여줄 수 있는데 그러기 위해선 다른 소셜 플러그인을 사용할 수 있습니다. 활동 피드 플러그인(Activity Feed Plugin)을 사용하여 여러분의 웹 사이트에서 사용자의 최근 좋아요와 코멘트를 보여줄 수 있습니다. 여러분의 사이트 전체에서 사용자들이 좋아요와 코멘트한 것들을 개인화된 페이지에서 보여주기 위해 추천 플러그인(Recommendation Plugin)을 사용할 수 있습니다. 여기에 페이스북 개발자 사이트에 대한 활동과 추천 플러그인(Activity and Recommendation Plugin)이 있습니다.

대부분의 소셜 플러그인은 여러분의 웹 사이트내에 플러그인을 위한 iframe tag를 간단하게 포함함으로써 통합될 수 있습니다. XFBML(eXtended Facebook Markup Language)이 사용이 요구되는 코멘트(Comments)와 라이브 스트림(Live Stream) 같은 몇몇 소셜 플러그인도 있습니다. XFBML은 소셜 플러그인을 보여주기 위해 여러분의 웹 페이지에 포함될 수 있는 XML의 집합 입니다. 여러분의 웹 페이지가 읽혀질 때 어떤 XFBML 엘리먼트는 자바스크립트 SDK에 의해 문서 내에서 처리될 것이고 적합한 결과가 여러분의 페이지에 렌더링 될 것입니다.

페이스북은 모든 소셜 플러그인을 위한 XFBML 엘리먼트를 제공합니다. 예를 들어서 좋아요 버튼(Like Button)은 XFBML과 동등한 것을 사용해 여러분의 페이지 상에 위치 시킬 수 있습니다.

<html>
    <head>
      <title>My Great Web page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script>
      <div class="fb-like"></div>
    </body>

</html>

플러그인의 iframe 버전들은 페이스북을 플랫폼을 이해하는데 최소한의 요구이며 가장 폭넓게 사용되고 있습니다. XFBML 버전은 일반적으로 코드를 기반으로 더 많은 것을 제어하길 원하는 개발자들에 의해 사용될 수 있습니다. [시작하기]를 통해 플러그인을 선택하는 것은 결코 간단하지 않기 때문에 소셜 플러그인 페이지로 부터 플러그인을 선택하고 제공된 설정기를 이용합니다. 아래의 설정기는 여러분의 웹 사이트에 추가하는데 필요한 모든 코드를 추가해 주고 여러분의 플러그인을 설정하는데 도움을 줍니다.

'Social' 카테고리의 다른 글

OAuth 2.0 소개 (0)	2012/05/14
4.[Facebook] Facebook for Websites(3) (0)	2012/04/26
3.[Facebook] Facebook for Websites(2) (0)	2012/04/25
2.[Facebook] Facebook for Websites(1) (0)	2012/04/13
1.[Facebook] Getting Started (0)	2012/04/08

Posted by -세티-

TAG facebook, Like Button, Social Plugin, XFBML

Trackback 0 Comment 0

TRACKBACK http://www.setisigns.net/trackback/426

댓글을 달아 주세요

1.[Facebook] Getting Started

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

시작하기

웹사이트(WebSites)

- 여러분의 웹 사이트에서 페이스북을 사용하기 위해 좋아요 버튼과 같은 소셜 플러그인을 사용하여 소셜 경험을 제공하고 로그인 버튼과 등록 플러그인을 사용하여 여러분의 등록과 사인인을 간편하게 해주는 개인화된 요소들을 쉽게 생성하게 해줍니다.

모바일 앱스(Mobile Apps)

- 페이스북 플랫폼으로 iOS, 안드로이드, 모바일 앱스 소셜을 만들수 있습니다. 사용자의 소셜 그래프에 접근하기 위한 싱글 사인 온과 하나의 개인화된 경험을 사용할 수 있스빈다.

페이스북 앱(Apps on Facebook)

- 페이스북에 앱을 구축하는 것은 우리의 핵심 사용자 경험에 깊게 통합될 수 있는 기회를 줍니다. 여러분의 유저들을 위한 이상적인 소셜 공간 생성을 위해 Requests와 Bookmarks와 같은 페이스북의 네이티브 기능을 사용할 수 있습니다.

핵심 개념(Core Concepts)

소셜 디자인(Social Design)

- 소셜 디자인 가이드 라인은 여러분이 거대한 소셜 경험을 구축할 때 페이스북 플랫폼을 어떻게 사용해야 하는지 그리고 어떻게 생성해야 하는지에 대한 가이드를 제공합니다.

소셜 플러그인(Social Plugins)

- 소셜 플러그인은 여러분의 사이트에 사인과 같은 뷰어의 도움없이 단지 HTML 라인만으로 여러분의 사용자에게 소셜 경험을 제공해 줍니다.

오픈 그래프 프로토콜(Open Graph protocol)

- 오픈 그래프 프로토콜은 소셜 그래프로 여러분의 페이지를 통합하는 것을 가능하게 해줍니다. 프로필 링크와 스트림 업데이트를 포함하는 다른 그래프 객체의 기능을 페이지에 얻을 수 있습니다.

소셜 채널(Social Channels)

- 페이스북 플랫폼은 여러분의 앱, 사이트 또는 콘텐트의 성장을 돕기 위해 뉴스 피드와 요청(Requessts)와 같은 소셜 채널로 통합할 수 있습니다.

인증(Authentication)

- 페이스북 인증은 웹 전체와 모바일 그리고 데스크 탑 앱에 강력한 싱글-사인 온을 제공하고 페이스북 사용자를 대신해 그래프 API와 함께 상호작용 하는 것을 가능하게 해줍니다.

고급 주제(Advanced Topics)

다이얼로그(Dialogs)

- 다이얼로그는 사용자에게 다이얼로그를 보여주기 위해 인터페이스까지 고려한 간단한 샘플을 제공합니다.

FQL

- 페이스북 쿼리 언어(Facebook Query Language, or FQL)는 그래프 API에 의해 노출된 데이터를 쿼리하기 위한 인터페이스로 SQL 스타일로 사용하는 것을 가능하게 해줍니다.

국제화 API(Internationalization API)

- 우리의 커뮤니티 번역 프레임워크를 사용하는 이점은 여러분의 응용프로그램(Apps)이나 웹 사이트 번역을 위해 70여개가 넘는 언어를 이용하는 것을 페이스북이 돕는다는데 있습니다.

크래딧(Credits)

- 페이스북 크래딧은 페이스북 전체의 응용 프로그램과 게임 내에서 전자적이고 가상의 상품을 위한 안전하고 쉽고 빠르게 이용 가능한 하나의 지불 시스템 입니다.

광고 API(Ads API)

- 페이스북 광고 API는 페이스북 내 여러분 자신의 광고를 페이스북 광고 관리자 도구를 사용하지 않고 프로그래밍 방식으로 관리하고 생성할 수 있게 해줍니다.

채팅 API(Chat API)

- 여러분의 웹 기반, 데스크탑, 또는 모바일 인스턴스 메시징 제품에 페이스북 채팅을 통합할 수 있습니다. 여러분의 인스턴스 메시징 클라이언트는 Jabber/XMPP 서비스를 이용하여 페이스북에 연결될 수 있습니다.

레거시 API(Legacy APIs)

- REST API, FBML, 그리고 오래된 자바스크립트 API에 대해 우리는 점차 사용도를 낮춰가고 있습니다. 그렇기 때문에 그래프 API, 자바스크립트 SDK 그리고 소셜 플러그인을 대신 사용해 주세요.

SDK과 도구 (SDK & Tools)

자바스크립트 SDK(Javascript SDK)

- 자바스크립트 SDK는 그래프 API의 특징과 자바스크립트를 통한 다이얼로그에 접근하는 것을 가능하게 해줍니다. 그것은 인증 과 소셜 플러그인을 렌더링하는 풍부한 클라이언트-사이드 기능을 제공합니다.

IOS SDK

- iOS SDK는 아이폰, 아이패드 그리고 아이팟 터치 앱을 위한 페이스북 플랫폼 지원을 제공합니다. 여러분은 싱글-사인-온, 그래프 API 호출 그리고 플랫폼에 다이얼로그를 보여주기 위해 이것을 이용할 수 있습니다.

Android SDK

- 안드로이드 SDK는 안드로이드 앱을 위해 페이스북 플랫폼 지원을 제공합니다. 여러분은 싱글-사인-온, 그래프 API 호출 그리고 플랫폼에 다이얼로그를 보여주기 위해 이것을 이용할 수 있습니다.

PHP SDK

- 이 SDK는 여러분의 PHP 기반 웹 앱을 위해 페이스북 플랫폼 지원을 제공합니다. 이 라이브러리는 여러분의 웹 사이트에 페이스북 로그인과 그래프 API 지원을 추가할 수 있습니다.

도구들(Tools)

- 개발자 앱, 인사이트 대쉬보드, 그래프 API 탐색기, 자바스크립트 테스트 콘솔, 테스트 사용자, URL Linter는 여러분의 개발, 테스트, 그리고 앱을 모니터하는 것을 돕기 위해 우리는 다양한 도구들 중 일부를 제공합니다.

[참고]

1. https://developers.facebook.com/docs/

'Social' 카테고리의 다른 글

OAuth 2.0 소개 (0)	2012/05/14
4.[Facebook] Facebook for Websites(3) (0)	2012/04/26
3.[Facebook] Facebook for Websites(2) (0)	2012/04/25
2.[Facebook] Facebook for Websites(1) (0)	2012/04/13
1.[Facebook] Getting Started (0)	2012/04/08

Posted by -세티-

Trackback 0 Comment 0

혀니의 기술과 삶

OAuth 2.0 소개

'Social' 카테고리의 다른 글

TRACKBACK http://www.setisigns.net/trackback/429

댓글을 달아 주세요

4.[Facebook] Facebook for Websites(3)

'Social' 카테고리의 다른 글

TRACKBACK http://www.setisigns.net/trackback/428

댓글을 달아 주세요

3.[Facebook] Facebook for Websites(2)

'Social' 카테고리의 다른 글

TRACKBACK http://www.setisigns.net/trackback/427

댓글을 달아 주세요

2.[Facebook] Facebook for Websites(1)

'Social' 카테고리의 다른 글

TRACKBACK http://www.setisigns.net/trackback/426

댓글을 달아 주세요

1.[Facebook] Getting Started

'Social' 카테고리의 다른 글

TRACKBACK http://www.setisigns.net/trackback/425

댓글을 달아 주세요

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크