FB API登入

2017-10-31 置頂文章

3015
0
FB

FB API登入程式：

第一步：匯入 javascript 並做初始化設定。

注意，台灣語系使用zh_TW

<script src='https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.10'></script>

fb_appid：是在FB開發者頁面，fb官網給的應用程式編號。
version：版本號一樣依據FB開發者頁面會看到，像我的版本號是從v2.08升級到v2.10，只不過一般情況下不用調整。

FB.init({
	appId : ｛fb_appid｝,
	cookie : true, // enable cookies to allow the server to access
	xfbml : true,
	version : 'v2.10'
});

第二步：呼叫 FB Login AP

<!--點擊FB 登入圖片，呼叫callFB函式。-->
<img id='img_fb' width='20px' height='20px' title='FB' onclick='callFB()'>

fields：id、name、gender、email 是FB開發者申請時，就預設可以取得的欄位，如果需要更多用戶資訊，需額外向FB說明用途，申請等待通過。
FBlogin：自定義函式，從FB取得欄位資訊到配合後端介面登入。

function callFB(){
	//FB.login會彈出登入視窗
	FB.login(function(response){
		if (response.status === 'connected') {
			FB.api('/me','GET',{
				"fields" : "id,name,gender,email"
			},function(response){
				//FB登入視窗點擊登入後，會將資訊回傳到此處。
				FBlogin(response.email,response.name,response.gender);
			});
		}
	},{
		scope : 'public_profile,email'
	});
}

第三步：將從FB取得欄位回傳至後端

自定義函式，透過jquery呼叫後端登入程式。

var FBlogin = function(email,name,gender){
	var _data = {
		'email' : email,
		'name' : name,
		'gender' :gender
	};
			
	jQuery.ajax({
		type : 'POST',
		url : '/funwin/user/FBlogin',//登入網址
		data : _data,
		dataType : 'json',
		success : function(data){
			//登入成功，刷新頁面
			location.reload();
		},
		error : function(XMLHttpRequest,error,errorThrown){
			//登入失敗
		}
	});
}

fb開發者頁面說明：

1.申請應用程式：