페이스북

웹페이지 페이스북 앱 만들기X로그인테스트

p-a-r-k 2016. 5. 25. 15:30
반응형

현재버전 : 2.6

웹페이지 페이스북 api 연동

https://developers.facebook.com/docs/



1. 새앱추가



2. skip 후 앱만들기



3. 보안확인잼 ㅋ



설정 > 플랫폼추가 > 웹사이트

* 빠른시작하면 소스긁어올수있음 ㅋ




HTML CODE

로그인사용자 : 없음.
mobile="true"<% End If %>>

SCRIPT

//init
	window.fbAsyncInit = function() {
	 FB.init({
		appId      : '생성된 앱 id',
		xfbml      : true,
		version    : 'v2.6'
	 });
  };

	//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.net/en_US/sdk.js";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	//로그인체크
	function checkLoginState() {
		FB.getLoginStatus(function(statres) {
			if (statres.status === 'connected') {
				testAPI();
			} else {
				fnFbLogin();
			}
		});
	}

	//정보get
	function testAPI() {
		console.log('Welcome!  Fetching your information.... ');
		FB.api('/me?fields=id,name,picture', function(response) {
			$("#status").html(response.name+"("+response.id+")");
			$("#picture").html("");
			//FB.api('/me/feed', 'post', {message: 'Hello, world!'});
		});
	}

	function fnShare(){
		FB.getLoginStatus(function(statres) {
			if (statres.status === 'connected') {
				FB.ui(
				 {
				  method: 'share',
				  href: 'http://19park.tistory.com/'
				}, function(response){
					if (response && !response.error_message) {
						alert("공유완료.");
					}else{
						alert("공유실패");
					}
				});
			} else {
				fnFbLogin();
			}
		});
	}

	function fnFbLogin(){
		FB.login(function(response){
		  if (response.status === 'connected') {
			 testAPI();
		  } else if (response.status === 'not_authorized') {
			 alert("권한을 허용해주세요ㅋ");
		  } else {

		  }
		}, {scope: 'public_profile,email'});
	}

로그인체크 후 아이디,이름,사진을 가져오는 소스ㅋ


반응형