초간단 웹 <> 페이스북 로그인 연동하기
페이스북 로그인 API로 연동하기
1. 페이스북 개발자센터 사이트에서 로그인 후 [시작하기] 버튼을 누른다.
https://developers.facebook.com/
2. 앱아이디를 등록한다. (돈들거나 그런것 아님 공짜)
3. 제품선택 > Facebook 로그인 [설정]을 누른다. 옆에 문서읽기는 메뉴얼이다.
4. 어떤 서비스에 적용할 것인지 선택 한다. (웹)
5. 로그인 연동을 적용 하려는 URL를 입력 후 [Save] 버튼을 누른 뒤 [계속] 버튼을 누른다.
6. api 적용 코드들의 예제와 설명이 나온다. 어떻게 사용하는지 읽어보고 다음 누른다.
7. 다음 누르고 스크롤을 밑으로 내리면 '전체 코드 예시' 가 있는데
그냥 그대로 긁어서 스크립트안에 appId : '{your-app-id}', 이 부분만 나의 appId로 변경하면 된다.
근데 예시코드 그대로 긁어서 쓰면 뭔가 어설프다.
로그인만 되고 로그아웃도 없다.
나는 로그아웃 펑션까지 추가해서 이름,이메일을 출력해보겠다.
아래는 내가 적용한 코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script src="/js/lib/jquery-1.9.1.min.js"></script>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
alert("로그인 되었습니다.")
$('#status').after('<button id="logout">로그아웃</button>');
testAPI();
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '321744354607389',
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
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me',{fields:'email,name'}, function(response) {
console.log('Successful Name: ' + response.name);
console.log('Successful Email: ' + response.email);
//javascript형식 문자열 추가하기
document.getElementById('status').innerHTML =
'페이스북 로그인되었습니다. ' + response.name + '님!';
//jQuery형 문자열 추가하기
$('#userInfo').html("이름 : "+response.name+" 메일 :"+response.email);
});
}
$(document).on("click","#logout",function(){
FB.logout(function(response) {
// Person is now logged out
alert("로그아웃 되었습니다.");
location.reload();
});
});
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
<div id="status"></div>
<div id="userInfo"></div>
</body>
</html>
|
cs |
-14번라인 로그인 성공하면 로그아웃 버튼을 div에 추가하였다
-53번라인 { fields : 'email,name' }을 추가하였다.
원래 성공 response을 콘솔에 출력하면 객체에 id,name 있지만,
email만 추가하면 id,email만 나오기 때문에 name까지 추가한 것이다.
그 외에도 생일,성별 기타 api문서에서 제공하는 정보를 추가 하면 된다.
-68번라인 페이스북 로그아웃 코드를 추가하였다.
출력화면
