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
20-3 to a file in that directory called login.ejs .
Listing 20-3: The login.ejs view file
<!DOCTYPE html>
<title>Login to Blob Clicker</title>
<script src="//"></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' />
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
appId : '<%= %>',
channelUrl : '//<%= req.headers['host'] %>/channel.html',
status : true,
xfbml : true
FB.Event.subscribe('auth.login', function(response) {
Search WWH ::

Custom Search