Introducción a Spring Social

Por
Juan Alonso Ramos
-
1
7916

Introducción a Spring Social

0. Índice de contenidos.


1. Introducción.

Spring Social es un proyecto de Spring con un montón de utilidades para facilitar la integración de nuestras aplicaciones con las principales redes sociales como Twitter, Facebook, LinkedIn, Flickr, Instagram, Google+, etc.

A través de las utilidades de Spring Social podemos realizar de forma mucho más sencilla la autenticación oAuth con la cuenta que tenga un usuario en cada una de las redes sociales y también atacar a cada API REST de forma transparente a través de los ‘bindings’ de Spring Social.

En este tutorial vamos a crear una pequeña aplicación web con Spring MVC donde nos integraremos con el API de Twitter a través de Spring Social.

Si quieres descargar el código fuente del tutorial pincha aquí.

2. Entorno.

El tutorial se ha realizado con el siguiente entorno:

  • MacBook Pro 15′ (2.4 GHz Intel Core i5, 8GB DDR3 SDRAM).
  • Oracle Java SDK 1.7.0_60
  • spring-boot 1.1.10.RELEASE
  • spring-social-twitter 1.1.0.RELEASE

3. Configuración del proyecto

La configuración es muy sencilla gracias a Spring Boot que nos facilita la tarea de añadir las dependencias Maven de nuestro proyecto.

El pom.xml del proyecto queda de la siguiente manera:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.autentia.tutoriales</groupId>
	<artifactId>spring-social</artifactId>
	<version>0.0.1-SNAPSHOT</version>

	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.1.10.RELEASE</version>
    </parent>
    
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

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

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

4. Autenticación oAuth con Twitter.

Para poder usar el API de Twitter debemos antes registrar nuestra aplicación en https://apps.twitter.com/

Con nuestra cuenta de Twitter damos de alta la aplicación:

Una vez dada de alta la aplicación se generan un app key y un app secret que usaremos en la aplicación para autenticarnos como veremos a continuación.

En la aplicación web, en el directorio src/main/resources creamos un fichero application.properties donde añadimos las claves que nos han asignado. 

spring.social.twitter.appId=[api key]
spring.social.twitter.appSecret=[api secret]

La forma de conectar nuestra aplicación con Twitter a través de Spring Social es muy sencilla. Bastará seguir la convención y con un par de pasos lo tendremos todo listo. Lo primero será crear el fichero src/main/resources/templates/connect/twitterConnect.html con el siguiente contenido:

<html>
	<head>
		<title>Spring Social Twitter</title>
		<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"></link>
	</head>
	<body>
		<h3>Conectar a Twitter</h3>

		<div class="panel panel-default">
		    <div class="panel-body">
		    	<form action="/connect/twitter" method="POST">
					<p>Bienvenido a mi aplicación cliente de Twitter. Antes de empezar debes autenticarte con tu cuenta de Twitter.</p>
					<p>			
						<button type="submit">
							<img src="/wp-content/uploads/tutorial-data/https://g.twimg.com/dev/sites/default/files/images_documentation/sign-in-with-twitter-gray.png" alt="Autenticar Twitter"></img>
						</button>
					</p>			
				</form>
		    </div>
		</div>
	</body>
</html>

Se encargará de llamar al recurso /connect/twitter implementado en la clase de Spring ConnectController que enlaza con el mecanismo de autenticación oAuth de Twitter

5. Recuperar los tweets.

Una vez autenticado el usuario, Twitter nos redirije de nuevo a nuestra aplicación. Es ahora que ya tenemos el ticket de oAuth cuando podemos llamar al API. Por ejemplo vamos a sacar el timeline del usuario, los últimos tweets y los tweets marcados como favoritos. Creamos el controlador TwitterController que se encargará de hacer las llamadas y añadirlas al modelo para pintarlas en la página. 

@Controller
@RequestMapping("/")
public class TwitterController {

	private final ConnectionRepository connectionRepository;
	private final Twitter twitter;

	@Inject
	public TwitterController(Twitter twitter, ConnectionRepository connectionRepository) {
		this.twitter = twitter;
		this.connectionRepository = connectionRepository;
	}

	@RequestMapping(method = RequestMethod.GET)
	public String getTimeline(Model model) {
		if (!isTwitterLogged()) {
			return "redirect:/connect/twitter";
		}

		retrieveTweets(model);

		return "home";
	}

	@RequestMapping(method = RequestMethod.POST)
	public String createTweet(Model model, @RequestBody String text) {
		twitter.timelineOperations().updateStatus(text);
		
		retrieveTweets(model);
		
		return "home";
	}
	
	private void retrieveTweets(Model model) {
		model.addAttribute("twitterProfile", twitter.userOperations().getUserProfile().getName());
		model.addAttribute("timeline", twitter.timelineOperations().getHomeTimeline());
		model.addAttribute("myTweets", twitter.timelineOperations().getUserTimeline());
		model.addAttribute("favorites", twitter.timelineOperations().getFavorites());
	}
	
	private boolean isTwitterLogged() {
		return connectionRepository.findPrimaryConnection(Twitter.class) != null;
	}
}

A través de la clase org.springframework.social.twitter.api.Twitter podemos realizar las operaciones contra el API y recuperar y enviar los tweets.

Para pintarlo creamos la página home.html que hará las llamadas al API rest y pintará el resultado.

<!DOCTYPE html>
<html>
<head>
	<title>Spring Social Twitter</title>
	<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"></link>
	<script src="/wp-content/uploads/tutorial-data///code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="/wp-content/uploads/tutorial-data///code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
	<h3>
		Twitter de <span th:text="${twitterProfile}"></span>
	</h3>

	<div id="tabs">
		<ul class="nav nav-tabs">
			<li><a href="#timeline">Timeline</a></li>
			<li><a href="#myTweets">Mis tweets</a></li>
			<li><a href="#favorites">Favoritos</a></li>
			<li><a href="#addTweet">Añadir tweet</a></li>
		</ul>
	
		<div id="timeline" class="tab-pane">
			<h4>Timeline</h4>
			<table class="table table-bordered">
				<tr th:each="tweet:${timeline}">
					<td><img th:src="/wp-content/uploads/tutorial-data/${tweet.profileImageUrl}"></img></td>
					<td th:text="${tweet.text}"></td>
					<td th:text="${tweet.createdAt}"></td>
				</tr>
			</table>
		</div>
		
		<div id="myTweets" class="tab-pane">
			<h4>Mis últimos tweets</h4>
			<table class="table table-bordered">
				<tr th:each="myTweet:${myTweets}">
					<td th:text="${myTweet.text}"></td>
					<td th:text="${myTweet.createdAt}"></td>
				</tr>
			</table>
		</div>
		
		<div id="favorites" class="tab-pane">
			<h4>Mis favoritos</h4>
			<table class="table table-bordered">
				<tr th:each="favorite:${favorites}">
					<td><img th:src="/wp-content/uploads/tutorial-data/${favorite.profileImageUrl}"></img></td>
					<td th:text="${favorite.text}"></td>
					<td th:text="${favorite.createdAt}"></td>
				</tr>
			</table>
		</div>
		
		<div id="addTweet" class="tab-pane">
			<h4>Añadir tweet</h4>
			<form method="post" action="/">
				Twittear: <input type="text" name="text" />  <input type="submit" value="Enviar" />
			</form>	
		</div>
	</div>
<script>
	$("#tabs").tabs();
</script>
</body>
</html>

6. Conclusiones.

Una vez más debemos agradecer a la gente de Spring Framework los proyectos que ponen a disposición de todo el mundo ya que nos facilitan la vida a los desarrolladores haciéndonos más fácil la integración de las aplicaciones.

Si quieres descargar el código fuente del tutorial pincha aquí

Espero que te haya sido de ayuda.

Un saludo.

Juan

1 COMENTARIO

  1. empiezo a ver tu blog, parece bueno pero noto que no esta la forma de ejecutar el proyecto, yo no conozco spring boot y desconozco que hacer para probar tu ejemplo

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad