Untitled Document

How to get Grails and Facebook Connect Working

Posted on Mon April 13 2009

By: mikesta

This tutorial was created by Christoper of http://www.haikujitsu.com

If you haven't already done so, run

grails install-plugin facebook-connect at the root of your app.

Open conf/FacebookConnectConfig.groovy and add your keys.

After reading through the Grails' facebook-connect plugin page http://www.grails.org/Facebook+Connect+Plugin, I tried using the plugin but ran into a few minor issues I had to figure out. This post hopes to give you some template code to use in order to get you past those problems.

* how to grab the logged in user's JSON data to store display names, etc.
* how to make the facebook javascript behave, refresh the page properly after login and logout
* how to make an isLoggedOut/isLoggedIn tag for conditional rendering

First - calling the facebook connect api...




import com.google.code.facebookapi.ProfileField
import grails.converters.*
class FbApiService {

boolean transactional = true

def facebookConnectService

/**
Returns the user's facebook id
**/
String getCurrentUser(request) {
def currentUser = ""
if(facebookConnectService.isLoggedIn(request)) {
currentUser = facebookConnectService.getFacebookClient().users_getLoggedInUser()
}
return currentUser
}

/**
Returns the user's display name
**/
String getUserName(request, userId) {
def userName = ""
def fields
java.lang.Iterable<java.lang.Long> userIds = new ArrayList<java.lang.Long>()
userIds.add(Long.parseLong(userId))

Set<ProfileField> c = new HashSet<ProfileField>()
c.add(ProfileField.NAME)

if(facebookConnectService.isLoggedIn(request)) {
def myresults = facebookConnectService.getFacebookClient().users_getInfo(userIds, c)
userName = myresults.getJSONObject(0).getString("name")
}
return userName
}
}


Just inject that service in a controller and you're good to go.

Second - a simple tag lib for isLoggedIn, isLoggedOut:



class FacebookUserTagLib {
def facebookConnectService
static namespace = 'gfb'

def isLoggedIn = { attrs, body ->
if(facebookConnectService.isLoggedIn(request)) {
out << body()
}
}
def isLoggedOut = { attrs, body ->
if(!facebookConnectService.isLoggedIn(request)) {
out << body()
}
}
}


Use the tag lib like so:


<gfb:isLoggedIn>
<g:render template="/pageContent/userLoggedIn"/>
</gfb:isLoggedIn>
<gfb:isLoggedOut>
<g:render template="/pageContent/userLoggedOut"/>
</gfb:isLoggedOut>
<br/>
<g:facebookConnectJavascript base="http://www.haikujitsu.com"/>


Third - while the login button provided by the fbml tags is neat, I found it much easier to control the browser (refreshing the page didn't work correctly - the button would change but the user info would show until I refreshed the entire page manually...) by using the following syntax for when the user is logged in/logged out. Here are the templates references above:

/pageContent/_userLoggedIn.gsp:


Logged in as <br/>
<fb:name uid="loggedinuser" useyou="false"></fb:name>
<br/>
<fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="true" size="square"></fb:profile-pic><br/>
<a href="#" onclick="FB.Connect.logout(function() { window.location='/postList'; }); return false;" >
Logout of This Site and Facebook
</a>


/pageContent/_userLoggedOut.gsp:


<a href="#" onclick="FB.Connect.requireSession(function() { window.location='/postList'; }); return false" >
<img border="noborder" id="fb_login_image" src="http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_medium_long.gif" alt="Connect"/>
</a>


Enjoy!

Log in to add comments Untitled Document There are 0 comments for this tutorial.