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