JavaScript를 이용한 페이스북 로그인

작성자는 생활코딩 강의를 들으며 공부하였습니다!

개요

이 글에서는 서버쪽 기술에 의존하지 않고 웹브라우저의 자바스크립트만을 이용하여 페이스북에 로그인하는 것을 배울 것입니다.
access token이라는 정보를 이용하면 이들 서비스를 마치 나의 서비스인 것처럼 사용자의 데이터에 대해서 API를 이용해서 제어할 수도 있습니다 이런 기술을 Federated Identity라고 합니다.
우리는 Facebook JavaScript SDK를 이용하여 공부할 것입니다.
OAuth라는 표준화된 인증방법을 이용하지만 Facebook JavaScript SDK을 이용하면 이런 복잡성을 몰라도 됩니다.

우리의 서비스를 앱으로써 등록하기 위해 아래 주소로 접속합니다.

https://developers.facebook.com/

로그인을 한 후 my apps라고 되어있는 탭을 클릭한 후 나의 앱을 등록하는 버튼을 클릭합니다.
원하는 이름을 입력하고 앱 생성 버튼을 클릭합니다.
잠시 기다리면 화면이 바뀝니다.
우리의 관심사인 Facebook Login을 선택한 후 web 방식으로 구현하기 위해 사이트 주소를 적습니다.(Ajax 게시글 참고)
APP ID 뒤에 적혀있는 수들은 우리의 ID입니다.

구현 계획

developers.facebook.com의 Docs 탭 선택 후 Business Tools의 Facebook Login을 클릭합니다.
플랫폼을 선택하는 화면에서 Websites or mobile websites를 선택하면 아래와 같은 화면이 나올 것입니다.

-목차-

1. SDK
2. SDK init(client id)
3. Login
4. Logout
5. isLogined
6. API 호출법

가장 밑에를 보면 이런 페이지가 나올 것입니다.

이 코드들을 복사해서 사용합니다.

다음은 페이스북의 SDK 파일을 페이스북 서버로부터 다운로드 받아서 우리의 웹페이지로 가져오는 코드입니다.

다음 우리는 이 SDK를 설정을 해야합니다.

(복사 붙여넣기 하기!)

그 중에서 window.fbAsyncInit이라는 것은 페이스북이 우리한테 초기화가 끝난 다음에 걔는 꼭 함수로 만들어 주세요 라고 부탁한 것입니다!

클라이언트 ID를 복사한 후 fbAsyncInit함수 안에 붙여넣기 해줍니다.
버전 확인 후 버전을 붙여넣기 합니다