[자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp

실제 구현 예

페이스북 로그인 API (OAuth 2.0)

 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 페이스북 로그인을 구현해 보겠습니다.

 

 

페이스북 로그인  API 사용을 위한 애플리케이션 설정

 우선

developers.facebook.com/?locale=ko_KR

해당 페이스북 디벨로퍼 사이트를 접속 후 회원가입, 로그인을 하고 "우측 상단의 내 앱" - 앱 만들기 - 연결된 환경 구축을 클릭, 정보 입력 후 앱 만들기를 완료합니다.

 

페이스북 로그인의 설정을 누른 후, 웹을 클릭, 사이트 url을 적습니다. (아래 순서대로)

해당 화면이 보이지 않으면 우측 메뉴의  설정 - 기본 설정 - 맨 하단에 URL을 통해 입력하셔도 됩니다.

 

코드 - javascript & jsp

활성화가 되었기때문에 이제 앱 ID를 사용하실 수 있습니다.

 

앱 ID는 메인화면이나 설정 - 기본 설정에서 복사가 가능합니다.

 

단순하게 해당 코드를 사용하고자 하는 html페이지나 jsp페이지에 붙여놓습니다. 

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v10.0&appId=1588150011384568" nonce="SiOBIhLG"></script>

 

*주의 : 해당소스 중간의 appID= 본인의 앱 아이디를 입력하셔야 합니다.

 

<자바스크립트 코드>

<ul>
 <li onclick="fnFbCustomLogin();">
  <a href="javascript:void(0)">
   <span>Login with Facebook</span>
  </a>
 </li>
</ul>

<script>

//기존 로그인 상태를 가져오기 위해 Facebook에 대한 호출
function statusChangeCallback(res){
	statusChangeCallback(response);
}

function fnFbCustomLogin(){
	FB.login(function(response) {
		if (response.status === 'connected') {
			FB.api('/me', 'get', {fields: 'name,email'}, function(r) {
				console.log(r);
			})
		} else if (response.status === 'not_authorized') {
			// 사람은 Facebook에 로그인했지만 앱에는 로그인하지 않았습니다.
			alert('앱에 로그인해야 이용가능한 기능입니다.');
		} else {
			// 그 사람은 Facebook에 로그인하지 않았으므로이 앱에 로그인했는지 여부는 확실하지 않습니다.
			alert('페이스북에 로그인해야 이용가능한 기능입니다.');
		}
	}, {scope: 'public_profile,email'});
}

window.fbAsyncInit = function() {
	FB.init({
		appId      : '1588150011384568', // 내 앱 ID를 입력한다.
		cookie     : true,
		xfbml      : true,
		version    : 'v10.0'
	});
	FB.AppEvents.logPageView();   
};
</script>

<!--반드시 중간에 본인의 앱아이디를 입력하셔야 합니다.-->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v10.0&appId=1588150011384568" nonce="SiOBIhLG"></script>

 

이 정도 예제만 잘 가공해서 사용하신다면 훌륭한 페이스북 로그인을 만드실 수 있으실 겁니다.

 

*참고사항

페이스북 api는 개발 중인 상태에서는 등록한 개발자(테스터)만 로그인이 가능하도록 되어있습니다. 등록하지 않은 사람들도 가입하기 위해서는 라이브 모드로 변경해야 합니다. 

 

개인정보처리 방침 URL과 데이터 삭제 정보를 제공하면 쉽게 라이브 모드로 변경이 가능합니다. 다만 "localhost, http"에서는 라이브 모드로 전환하더라도 가입이 되지 않습니다. 페이스북은 보안 강화 정책에 따라 반드시 https(인증서)가 동반되어야 되기 때문입니다.  이점 참고 부탁드립니다.

 

 

궁금한 점이나 어려운 점, 잘못된 점은 댓글로 말씀해주시면 감사하겠습니다!

 

 

구글 로그인 구현 방법

tyrannocoding.tistory.com/51

[자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp

카카오 로그인 구현 방법

tyrannocoding.tistory.com/49

[자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp

 

네이버 로그인 구현 방법

https://tyrannocoding.tistory.com/60

[자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃