[SNS] 페이스북 로그인 계정 연동

2016. 12. 20. 20:21

한 페이지 안에 페이스북 계정으로 로그인해서 정보 가져오기

Line19 : 페북에서 제공하는 버튼이 아닌 내가 원하는 이미지를 버튼으로 만들기 (custom button)

Line21 ~ Line27 : 계정연동 성공시 정보 뿌려주기

- 소스

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

<!-- <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button> -->

<!-- <div id="response">
</div> -->
<button type="button" class="button facebook" id="loginBtn">페이스북 계정</button>

			<div id="access_token"></div>
			<div id="user_id"></div>
			<div id="name"></div>
			<div id="email"></div>
			<div id="gender"></div>
			<div id="birthday"></div>
			<div id="id"></div>
<script>
function getUserData() {
	/* FB.api('/me', function(response) {
		document.getElementById('response').innerHTML = 'Hello ' + response.name;
		console.log(response);
	}); */
	FB.api('/me', {fields: 'name,email,gender,birthday'}, function(response) {
	    console.log(JSON.stringify(response));
	    $("#name").text("이름 : "+response.name);
        $("#email").text("이메일 : "+response.email);
        $("#gender").text("성별 : "+response.gender);
        $("#birthday").text("생년월일 : "+response.birthday);
        $("#id").text("아이디 : "+response.id);
	});
}
 
window.fbAsyncInit = function() {
	//SDK loaded, initialize it
	FB.init({
		appId      : '나의 app id',
		cookie     : true,  // enable cookies to allow the server to access 
		        // the session
		xfbml      : true,  // parse social plugins on this page
		version    : 'v2.8' // use graph api version 2.8
	});
 
	//check user session and refresh it
	FB.getLoginStatus(function(response) {
		if (response.status === 'connected') {
			//user is authorized
			//document.getElementById('loginBtn').style.display = 'none';
			getUserData();
		} else {
			//user is not authorized
		}
	});
};
 
//load the JavaScript SDK
(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.com/ko_KR/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 
//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {
	//do the login
	FB.login(function(response) {
		if (response.authResponse) {
			access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID
            console.log('access_token = '+access_token);
            console.log('user_id = '+user_id);
            $("#access_token").text("접근 토큰 : "+access_token);
            $("#user_id").text("FB UID : "+user_id);
			//user just authorized your app
			//document.getElementById('loginBtn').style.display = 'none';
			getUserData();
		}
	}, {scope: 'email,public_profile,user_birthday', 
		return_scopes: true});
}, false);
</script>

</body>
</html>

- 실행 결과