HTML and CSS Reference
In-Depth Information
to the
/game
page. If not it renders the
login.ejs
page, which shows the login button to allow players to
log in.
login_page
is bound to both GET and POST methods. The GET method is used by default when you hit
the page, but the POST method is used to send the data about the user back to the server. In canvas applications,
Facebook connects directly to the canvas URL of the application with the signed request if the user is already
logged in.
The
authenticated
method is a meta-method that takes in a method and wraps it in a check to see if the
user is logged in. If not, the user is redirected back to the home page to log in.
Finally, the
/game
path, which uses the
authenticated
method, displays a message to the users with
their name. It's just a stub to verify that authentication works correctly and is filled out with the game logic in
the section “Finishing Blob Clicker.”
Adding the Login View
The basic Facebook integration is almost done; all that's still needed is to add the
login.ejs
view file and a
special file called
channel.html
, which helps Facebook deal with cross-domain issues in Internet Explorer.
Create a new directory inside of your
blob_clicker
directory called
views
, and add the code in
Listing
Listing 20-3:
The login.ejs view file
<!DOCTYPE html>
<html>
<head>
<title>Login to Blob Clicker</title>
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<meta name="viewport" content="width=device-width,
↵
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link href='/style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<%= app.id %>',
channelUrl : '//<%= req.headers['host'] %>/channel.html',
status : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
$("#login").hide();
$("#signed_request").val(response.authResponse.signedRequest);
$("#signed_form").submit();
});
