[译] Unity3D游戏和facebook绑定(6.1 通过facebook客户端的SDK-JS脚本进行用户认证)

原文链接: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游戏中去。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!