原文链接：Authorising user with Facebook JS SKD (client-side)
第一次使用JavaScript脚本实现facebook登陆不是很难，下面我们手把手示范一下：
完成你的一个页面游戏
首先你要做的事情是把你的游戏发布到一个URL地址。并确保游戏可以通过互联网访问。
准备本地环境
使用XAMPP或WAMP搭建本地服务器，并测试你的新URL是否可用。
注意：思考你的URL地址远期定位。如果你的游戏URL为这样的www.yourgame.com ，你或许想同时搭建一个local.yourgame.com作为开发调试环境， 然后，当游戏发布上线后，再通过facebook 应用配置修改新的在线URL地址。我想说的是，这么做没什么不好，只是有点乱：尤其是你频繁的修改、升级、上线。另外一种办法是在facebook里面等级2个URL，一个是开发调试URL部署环境，令一个是上线部署URL环境。 我们下面说，先用本地调试环境测试通过再考虑上线的。
Facebook登陆测试
首先在你游戏的服务器下面创建一个fb-skd-test.html 文件，并粘贴下面代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!---- FB CODE ---->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : false // don't parse XFBML
})
//Get the current login status.
FB.getLoginStatus(function(loginStatusResponse) {
if(loginStatusResponse.authResponse) {
// code (1) if already logged in
} else {
FB.login(function(loginResponse) {
if(loginResponse.authRespsonse) {
// code (2) if logged in ok
}
});
}
});
};
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<!---- FB CODE END. ---->
</body>
</html>
替换“YOUR_APP_ID”为你登记的，可通过你的facebook应用程序配置页面查找。你也可以通过Facebook JavaScript SDK 官方参考页面 获得更详细信息。 这个时候运行，浏览器可能会弹出登陆facebook页面，先点击取消按钮，我们稍后再细说。
用户触发的弹出窗口
在我经验中，当你运行FaceBook代码加载Unity3D游戏，弹出窗口实际上在背景模式下运行，即用户看不到它。当然，这个和浏览器设置有关，很多浏览器阻止了自动弹出页面故而导致这个功能失效。这个当然问题很大，尤其是当玩家想登陆游戏系统开始玩，但是却无法登陆。浏览器这么做无可厚非，但是你应该瞄准你的目标，即你要通过社交范畴，故不用太多关心这个。因为用户通过facebook登陆的一个很重要目的是分享游戏的快感、炫耀游戏的得分情况的，故不得不通过facebook登陆。 如果弹出登陆页面被阻止了，那么这些都做不了。我们先假设用户能够弹出并能登陆。
修改head标签，通过CDN加载JQuery代码，再添加一些样式，代码如下。
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style type="text/css"> .hidden { display: none; } </style> </head>
在body结束标签前，创建一个按钮并添加一个div容器-用于显示一些提示用户的信息。
<input type="button" id="fb-login" class="hidden" value="Log in with Facebook"/> <div id="fb-user-info" class="hidden">You are logged in as: <span></span></div>
添加一些JS函数，并修改FB.getLoginStatus() call. 替换FB.getLoginStatus() 为如下代码
//Get the current login status.
FB.getLoginStatus(function(loginStatusResponse) {
if(loginStatusResponse.authResponse) {
toggleLoginButton(false);
toggleInfoContainer(true);
getUserInfo();
} else {
toggleLoginButton(true);
toggleInfoContainer(false);
$('#fb-login').click(function() {
FB.login(function(loginResponse) {
location.reload(); // reload page when done
});
});
}
});
function toggleLoginButton(visible) {
visible = (visible==true);
$('#fb-login').toggleClass('hidden', !visible);
}
function toggleInfoContainer(visible) {
visible = (visible==true);
$('#fb-user-info').toggleClass('hidden', !visible);
}
// access graph to get user info
function getUserInfo()
{
FB.api('/me', function(meResponse)
{
$('#fb-user-info span').text(meResponse.first_name);
});
}
这时，我们可以测试页面了。如果用户第一次访问页面，则会出现“Log in with Facebook”按钮。如果用户已经登陆成功，则显示用户名。点击“log in”按钮，这时弹出窗体，用户可以选择确认、却笑，页面重新加载，会再次检测用户状态。
不弹出窗体验证用户权限
或许有用户对弹出窗体非常反感，下面我们可以试试不弹出的方式。
FB.login(function(loginResponse) {
location.reload(); // reload page when done
});
替换为：
window.location = encodeURI("https://www.facebook.com/dialog/oauth?"
+ "client_id=YOUR_APP_ID"
+ "&redirect_uri=" + encodeURI(location.href)
+ "&response_type=token");
注意，体会你的“YOUR_APP_ID”，测试。（首先在facebook开发者应用程序中心确认APP_ID可用）。
下一章预告：
我们的目标是通过faceBook打通用户之间墙壁，下一章详细介绍如何把facebook API整合到unity3D游戏中去。
![client-side-diagram [译] Unity3D游戏和facebook绑定（6 通过facebook登录到你的Unity3D游戏系统） client side diagram](http://blog.i-evaluation.com/wp-content/uploads/2013/03/client-side-diagram.png "client-side-diagram client-side-diagram")
![native-diagram [译] Unity3D游戏和facebook绑定（6 通过facebook登录到你的Unity3D游戏系统） native diagram](http://blog.i-evaluation.com/wp-content/uploads/2013/03/native-diagram.png "native-diagram native-diagram")
![server-side-diagram [译] Unity3D游戏和facebook绑定（6 通过facebook登录到你的Unity3D游戏系统） server side diagram](http://blog.i-evaluation.com/wp-content/uploads/2013/03/server-side-diagram.png "server-side-diagram server-side-diagram")