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.

Europäische Union: Investitionen in unsere Zukunft - Europäischer Fonds für regionale Entwicklung EFRE.NRW 2014-2020: Invesitionen in Wachstum und Beschäftigung

Comments / Questions

  1. Maxi Wu says:

    just started to try SpringSocial a few days ago. Their documents does not match their sample project. And there is so much stuff unrelated to the simplest basic thing which is really needed to connect with facebook.
    I really like your post which remove unnecessary bits. thank you

  2. Beppe Serra says:

    Hello, here are the few problems I had and managed to fix.
    1) “checkout part-00” is actually “git checkout part-00”
    2) “git checkout part-00” fails with “error: pathspec ‘part-00’ did not match any file(s) known to git.” “git tag” shows that the only available tag is “part-01”, so I proceeded with that one.
    3) in the mvn … run command, change:
    -Dfacebook.app.id= and
    -Dfacebook.app.secret=
    to:
    -Dfacebook.client.id= and
    -Dfacebook.client.secret=
    to match the application.properties file contents.

    Cheers,

    – Beppe –

    1. Kai Moritz says:

      Hi Beppe,

      thanks a lot for your comment.

      I added the missing git.

      The issues you noted in 2 and 3, arise from the fact, that I am messing around with the history of the repository a bit.

      I decided, that it is more important, that each commit contains exactly the changes of the next step and that there are no obfuscating commits that only contain small bug-fixes of earlier commits.

      This way, one can read the diffs and clearly see, what was changed and why.

      On the downside, nasty things may happen, if somebody checks out the project, while I am in the middle of some cleaning up.

      If you clone a fresh copy now, everything should work as expected and as described in the blog-article.

Leave a Reply

Your email address will not be published. Required fields are marked *