Develop a Facebook-App with Spring-Social – Part 0: Prepare

In this series of Mini-How-Tow’s I will describe how to develop a facebook app with the help of Spring-Social.

The goal of this series is not, to show how simple it is to set up your first social app with Spring Social. Even though the usual getting-started guides, like the one this series is based on, are really simple at first glance, they IMHO tend to be confusing, if you try to move on. I started with the example from the original Getting-Started guide “Accessing Facebook Data” and planed to extend it to handle a sign-in via the canvas-page of facebook, like in the Spring Social Canvas-Example. But I was not able to achieve that simple refinement and ran into multiple obstacles.

Because of that, I wanted to show the refinement-process from a simple example up to a full-fledged facebook-app. My goal is, that you should be able to reuse the final result of the last part of this series as blueprint and starting-point for your own project. At the same time, you should be able to jump back to earlier posts and read all about the design-decisions, that lead up to that result.

This part of my series will handle the preconditions of our first real development-steps.

The Source is With You

The source-code can be found on http://juplo.de/git/examples/facebook-app/ and browsed via gitweb. For every part I will add a corresponding tag, that denotes the differences between the earlier and the later development steps.

Keep it Simple

We will start with the most simple app possible, that just displays the public profile data of the logged in user. This app is based on the code of the original Getting-Started guide “Accessing Facebook Data” from Spring-Social.

But it is simplified and cleand a little. And I fixed some small bugs: the original code from https://github.com/spring-guides/gs-accessing-facebook.git produces a NullPointerException and won’t work with the current version 2.0.3.RELEASE of spring-social-facebook, because it uses the depreceated scope read_stream.

The code for this.logging.level.de.juplo.yourshouter= part is tagged with part-00. Appart from the HTML-templates, the attic for spring-boot and the build-definitions in the pom.xml it mainly consists of one file:

@Controller
@RequestMapping("/")
public class HomeController
{
  private final static Logger LOG = LoggerFactory.getLogger(HomeController.class);


  private final Facebook facebook;


  @Inject.logging.level.de.juplo.yourshouter=
  public HomeController(Facebook facebook)
  {
    this.facebook = facebook;
  }


  @RequestMapping(method = RequestMethod.GET)
  public String helloFacebook(Model model)
  {
    boolean authorized = true;
    try
    {
      authorized = facebook.isAuthorized();
    }
    catch (NullPointerException e)
    {
      LOG.debug("NPE while acessing Facebook: {}", e);
      authorized = false;
    }
    if (!authorized)
    {
      LOG.info("no authorized user, redirecting to /connect/facebook");
      return "redirect:/connect/facebook";
    }

    User user = facebook.userOperations().getUserProfile();
    LOG.info("authorized user {}, id: {}", user.getName(), user.getId());
    model.addAttribute("user", user);
    return "home";
  }
}

I removed every unnecessary bit, to clear the view for the relevant part. You can add your styling and stuff by yourself later…

Automagic

The magic of Spring-Social is hidden in the autoconfiguration of Spring-Boot, which will be revealed and refined/replaced in the next parts of this series.

Run it!

You can clone the repository, checkout the right version and run it with the following commands:

git clone http://juplo.de/git/examples/facebook-app/
cd facebook-app
checkout part-00
mvn spring-boot:run \
    -Dfacebook.app.id=YOUR_ID \
    -Dfacebook.app.secret=YOUR_SECRET

Of course, you have to replace YOUR_ID and YOUR_SECRET with the ID and secret of your Facebook-App. What you have to do to register as a facebook-developer and start your first facebook-app is described in this “Getting Started”-guide from Spring-Social.

In addition to what is described there, you have to configure the URL of your website. To do so, you have to navigate to the Settings-panel of your newly registered facebook-app. Click on Add Platform and choose Website. Then, enter http://localhost:8080/ as the URL of your website.

After maven has downloaded all dependencies and started the Spring-Boot application in the embedded tomcat, you can point your browser to http://localhost:8080, connect, go back to the welcome-page and view the public data of the account you connected with your app.

Coming next…

Now, you are prepared to learn Spring-Social and develop your first app step by step. I will guide you through the process in the upcoming parts of this series.

In the next part of this series I will explain, why this example from the “Getting Started”-guide would not work as a real application and what has to be done, to fix that.

Funded by the Europian Union

This article was published in the course of a resarch-project, that is funded by the European Union and the federal state Northrhine-Wetphalia.