-
초간단 웹 <> 페이스북 로그인 연동하기APi 2017. 12. 16. 21:02반응형
페이스북 로그인 API로 연동하기
1. 페이스북 개발자센터 사이트에서 로그인 후 [시작하기] 버튼을 누른다.
https://developers.facebook.com/
2. 앱아이디를 등록한다. (돈들거나 그런것 아님 공짜)
3. 제품선택 > Facebook 로그인 [설정]을 누른다. 옆에 문서읽기는 메뉴얼이다.
4. 어떤 서비스에 적용할 것인지 선택 한다. (웹)
5. 로그인 연동을 적용 하려는 URL를 입력 후 [Save] 버튼을 누른 뒤 [계속] 버튼을 누른다.
6. api 적용 코드들의 예제와 설명이 나온다. 어떻게 사용하는지 읽어보고 다음 누른다.
7. 다음 누르고 스크롤을 밑으로 내리면 '전체 코드 예시' 가 있는데
그냥 그대로 긁어서 스크립트안에 appId : '{your-app-id}', 이 부분만 나의 appId로 변경하면 된다.
근데 예시코드 그대로 긁어서 쓰면 뭔가 어설프다.
로그인만 되고 로그아웃도 없다.
나는 로그아웃 펑션까지 추가해서 이름,이메일을 출력해보겠다.
아래는 내가 적용한 코드이다.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<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 sessionxfbml : true, // parse social plugins on this pageversion : '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 outalert("로그아웃 되었습니다.");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번라인 페이스북 로그아웃 코드를 추가하였다.
출력화면
반응형'APi' 카테고리의 다른 글
자바로 엘라스틱서치(Elasticsearch) 데이터 보내기 (단건,다건) Java to ELk (0) 2024.01.14 스웨거(Swagger) 3.0 오류 Failed to start bean 'documentationPluginsBootstrapper'; nested exception is java.lang.NullPointerException" (0) 2023.08.18 자바(java) 구글 메일전송(SMTP) 사용하기 (0) 2017.10.06 [javascript] 유튜브(youtube) api사용하여 플레이리스트 뿌리기 (0) 2017.10.06
