HTML and CSS Reference
In-Depth Information
Figure 20-3:
Blob Clicker login screen.
Facebook calls a method called
fbAsyncInit
when it has finished loading and initializing its JavaScript.
This means that after you're inside of
fbAsyncInit
, you know that the Facebook SDK is available to use. To
get the SDK set up, first you need to call
FB.init
with the App ID you created, which is passed automatically
using the ejs tag
<%= app.id %>
. Then
FB.init
also needs to be passed the URL of a special
chan-
nel.html
file. This is complicated by the fact that this needs to be an absolute URL, which is generated using
the
host
header.
Next, the application subscribes to the
auth.login
event on the Facebook SDK. This event is triggered
when the user logs in or is logged in. To pass the signed-request to the server, the code uses a form with a hidden
field that it POSTs to. The server picks up the parameter
signed_request
and performs the necessary logic
to log the user in.
The
FB.init
method also accepts a
cookie
option, which sets a session cookie with the signed request.
This cookie would automatically pass the signed request data to the server. Unfortunately, the
faceplate
middleware parses this signed request on each HTTP request, which results in a separate server-side HTTP re-
quest to the Facebook API that slows down your game. By setting the signed request only on login, the game
can be much snappier.
Next, the code that Facebook provides to load the Facebook JavaScript SDK asynchronously is included.
Finally, a Facebook login button is added onto the page by including a
<div>
tag with the correct class:
