한 페이지 안에 페이스북 계정으로 로그인해서 정보 가져오기
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>
- 실행 결과
버튼은 임의로 넣음 - 페북 로그인 계정 연동 버튼임
생년월일은 월/일/년도로 뿌려짐
참고 사이트
2. How to get birthday via Facebook API? - 생년월일 정보 가져오기
3. did not get public profile information and email by Facebook java script sdk [duplicate] - 프로필 정보 가져오기
4. Facebook API – Login with the JavaScript SDK - 강추!!
5. How to change facebook login button with my custom image - 커스텀 버튼
6. [자바스크립트] 페이스북 SDK/API 연동하기(SNS 로그인 등)
9. 위키백과 - OAuth
'실무 > 프로그래밍 | DB' 카테고리의 다른 글
| [DB] 토드 - TNS 설정 (0) | 2017.06.08 |
|---|---|
| SNS 가입 연동 가이드 - 네이버 (0) | 2016.12.20 |