Spring Facebook API

Seguimos estudiando el módulo Spring Social esta vez le toca el turno a la API de Facebook, usaremos el módulo spring-social-facebook para integrar una aplicación web desarrollada con Spring Boot con los servicios de esta red social, para nuestra demostración consultaremos el perfil de usuario y las publicaciones del mismo, al igual que el tutorial anterior referente a Twitter también es necesario registrar un App de Facebook.

Lo primero es registrar la aplicación, para esto nos dirigimos a la dirección: https://developers.facebook.com/

Debes hacer clic en el botón que se encuentra en la parte superior derecha, puede ser Empezar o Crear Aplicación, dependiendo de si es la primero vez que creas una aplicación puede aparecer uno u otro, también es posible de que se muestre otro botón si ya tiene una aplicación creada, en el cuadro que se muestra deberás indicar el nombre de la aplicación y una dirección de correo electrónico.

Una vez rellenes los datos requeridos presiona el botón Crear identificador de la aplicación, en la pestaña panel de la siguiente página podrás ver la información requerida para conectarnos desde Spring Boot, anota el identificador de la aplicación y la clave secreta de la misma.

Para configurar debemos agregar la plataforma que define el tipo de aplicación que deseamos crear, presiona el botón ubicado en la parte inferior que dice Agregar plataforma, antes debes cambiar a la pestaña Configuración, al presionar debe aparecer la siguiente ventana:

Aquí vamos a seleccionar Sitio web, pues será una aplicación web la que utilice el servicio de la API de Facebook, lo siguiente que debes establece es la URL desde la que nos conectaremos al servicio, por ahora nuestro servidor local, de este modo:

Con esto tenemos nuestra App Facebook lista y configurada.

Integrar Facebook a Spring Boot

Ahora vamos al código, lo primero es agregar las dependencias necesarias, utilizaremos la versión 3.0.0.M3 de spring-social-facebook ya que la versión 2.x no es completamente compatible con la nueva API de Facebook, debes tener presente que al momento de escribir este tutorial la versión final de esta librería aun no ha sido liberada:

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.6.RELEASE</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.social</groupId>
        <artifactId>spring-social-facebook</artifactId>
        <version>3.0.0.M3</version>
    </dependency>

    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-crypto</artifactId>
    </dependency>
</dependencies>

Lo siguiente que debemos hacer es editar el archivo src/main/resources/application.properties, aquí agregamos la clave secreta y el ID de la aplicación obtenidos previamente.

spring.social.facebook.appId=120696445248610
spring.social.facebook.appSecret=45dsaddadhjaewjhdsada57a9

Ahora nuestro controlador, este es el encargado de verificar la conexión y obtener los datos que serán enviados a la vista, usaremos Thymeleaf para generar las vistas.

@Controller
public class HelloController {

    private final Facebook facebook;
    private final ConnectionRepository connectionRepository;

    @Autowired
    public HelloController(Facebook facebook, ConnectionRepository connectionRepository) {
        this.facebook = facebook;
        this.connectionRepository = connectionRepository;
    }

    @RequestMapping("/")
    public String facebook(Model model) {
        
        if (connectionRepository.findPrimaryConnection(Facebook.class) == null) {
            return "redirect:/connect/facebook";
        }

        model.addAttribute("perfil", facebook.userOperations().getUserProfile());
        model.addAttribute("feed", facebook.feedOperations().getFeed());

        return "hello";
    }

}

Primero chequeamos que web este conectada a la cuenta de Facebook correspondiente, si nos es así redirigimos a la URL para hacerlo, esto lo realizamos del siguiente modo:

if (connectionRepository.findPrimaryConnection(Facebook.class) == null) {
       return "redirect:/connect/facebook";
}

El siguiente paso es obtener la información que deseamos visualizar en nuestra web, primero el perfil de usuario y luego las publicaciones del mismo, guardamos los datos en los atributos del modelo para pasarlos a la vista.

model.addAttribute("perfil", facebook.userOperations().getUserProfile());
model.addAttribute("feed", facebook.feedOperations().getFeed());

La vista esta definida por el archivo /templates/hello.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Spring Social Facebook</title>
    </head>
    <body>

        <h3>Hola, <span th:text="${perfil.name}">usuario</span> !</h3>

        <h4>Estas son tus publicaciones:</h4>

        <div th:each="post:${feed}" class="feed-container">
            <b th:text="${post.from.name}">autor</b> publicó:
            <p th:text="${post.message}">mensaje</p>
            <img th:if="${post.picture}" th:src="${post.picture}"/>
        </div>

    </body>
</html>

De momento solo mostramos el nombre de usuario a través del atributo perfil.

<h3>Hola, <span th:text="${perfil.name}">usuario</span> !</h3>

Luego iteramos sobre el atributo feed para obtener todas las publicaciones, mostramos para cada una el autor, el mensaje o texto publicado y la imagen de la publicación.

<div th:each="post:${feed}" class="feed-container">
    <b th:text="${post.from.name}">autor</b> publicó:
    <p th:text="${post.message}">mensaje</p>
    <img th:if="${post.picture}" th:src="${post.picture}"/>
</div>

Si ejecutamos nuestra aplicación y le damos autorización a la App veremos algo parecido a esto:

Antes de terminar debes saber que Spring Boot configura controladores para las siguientes páginas, primero:  templates/connect/facebookConnect invocado cuando aún no tienes una conexión con la cuenta de Facebook esta página contiene un botón que envía a la URL que conecta la App y templates/connect/facebookConnected es invocado después de realizar el proceso antes mencionado, esta página solo contiene un enlace a la URL principal de nuestra web.

Descargar demo: spring-facebook.zip