페이스북 로그인 구현 과정 소개

사이트 별로 관리되는 계정 정보는 효율이 많이 떨어진다. 다수의 사람들이 사용하고 있는 SNS 계정을 통해서 맴버를 관리 한다면, 사용자 입장에서는 간편 가입이 가능하고, 사이트 입장에서는 정보 네트워크를 확대할  수 있는 이점이 있다.

대표적인 SNS인 페이스북 로그인 구현 과정을 소개한다.

개발 페이지에서 My APP 생성하기

URL : https://developers.facebook.com/apps/

Site URL에 로그인을 구현하는 페이지 주소를 입력한다. 응답 값을 받아야하니 정확하게 입력 한다.

예제 스크립트 조금 수정 하기

가이드 URL : https://developers.facebook.com/docs/facebook-login/web

작성하는 시점에서 최신 버전인 Facebook API v2.4 기준으로 예제 코드를 수정한다.
A. fields 변수를 통해 호출할 때, 응답 받을 값의 필드를 명시한다.
    /me?fields=id,name,email .... // 콤마(,)로 필드 구분
B. 결과 수신이 잘 되었는지 확인하기 위해, 응답 값의 키(Key)를 나열하는 코드를 추가한다.
   Object.keys(response).join('<br/> * ')

필자가 수정한 코드는 다음과 같다.
URL : https://bitbucket.org/snippets/juhoon26/r984L

브라우저를 통해서 로그인 절차 소개하기

로그인 버튼을 누르면, 개인정보 제공에 동의를 구한다. 기본적으로 제공되는 정보와, 예제 스크립트에서 scope을 통해서 지정된 정보 요청에 동의를 구하는 과정이다.

동의를 하면 다음과 같이 개인정보를 넘겨 준다.

넘겨 받은 정보를 통해서 가입 폼을 만들거나, 로그인 처리가 가능하다.