Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Creación de una aplicación OAuth para Twitter

by
Read Time:38 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

OAuth puede ser un concepto complicado a meter en la cabeza al principio, pero con la API de Twitter que requiere ahora su uso, es algo que debes entender antes de crear una aplicación de Twitter. Este tutorial te presentará OAuth y te guiará a través del proceso de creación de una aplicación básica.


Introducción

En este tutorial, vamos a crear una aplicación sencilla que permite a los usuarios aplicar diferentes efectos a su avatar de Twitter. Para trabajar con la API de Twitter, debemos usar OAuth para autorizar a nuestra aplicación a realizar solicitudes en nombre del usuario.

Nuestro flujo de aplicaciones será algo como lo siguiente:

  1. Se le solicita al usuario que se conecte con Twitter.
  2. Al usuario se le presenta una lista de avatares de vista previa a partir de la cual hacer una selección.
  3. Tras la selección, al usuario se le presenta una pantalla de confirmación que muestra el avatar original y el nuevo para que los comparare. También se le ofrece la opción de enviar un tweet.
  4. Después de que el usuario lo confirme, la aplicación crea y carga el avatar modificado en Twitter y se muestra una página de éxito.

Configuración

Para empezar, debemos configurar nuestro directorio de origen. Necesitamos un directorio lib para nuestros archivos de biblioteca PHP (clase), un directorio tmp para mantener archivos temporales (este debe poder ser escrito por el servidor), un directorio css para nuestra hoja de estilos y un directorio img para cualquier imagen.

Este es el aspecto que debería tener el árbol de directorios:

  • tutorial
    • css
    • img
    • lib
    • tmp (grabable)

Registra tu solicitud

Para usar OAuth, necesitarás lo que se denomina clave y secreto de consumidor para identificar tu aplicación. Para obtenerlos, debes registrar una aplicación en Twitter siguiendo estos pasos.

Dirígete a la página de registro, inicia sesión si es necesario. Serás recibido por el formulario que se muestra a continuación:

Rellena el formulario con los detalles correspondientes a tu aplicación. En nuestro caso, el tipo de aplicación es Browser y necesitamos establecer una dirección URL de devolución de llamada predeterminada. Esta URL puede ser cualquier cosa siempre y cuando sea un formato válido. Vamos a reemplazar la devolución de llamada dentro de nuestro código, por lo que no es fundamental que sea una dirección URL real. El tipo de Acceso Predeterminado debe ser Read & Write (Lectura y escritura) para mayor comodidad.

Una vez que te hayas registrado y aceptado los términos, se te presentará información sobre tu nueva solicitud. Los detalles importantes que necesitamos son la Clave del consumidor y el Secreto del consumidor, que deberían tener un aspecto similar al siguiente:


Descarga la Biblioteca tmhOAuth

Vamos a hacer uso de una biblioteca para manejar todos los detalles necesarios para hacer solicitudes OAuth. En este tutorial, usaremos la biblioteca tmhOAuth de @themattharris, que admite la carga de archivos.

  1. Descarga tmhOAuth desde GitHub
  2. Extrae tmhOAuth.php en el directorio lib que creamos anteriormente

Autenticación

La autenticación con OAuth es básicamente un proceso de tres pasos. Para obtener una explicación más detallada, consulta esta página sobre autenticación en Twitter, pero aquí tienes un resumen:

  1. La aplicación obtiene un token de solicitud: el primer paso es que nuestra aplicación se identifique en Twitter (mediante su clave de consumidor) y obtenga un token de solicitud. Tendremos que guardar este token de solicitud para más adelante.
  2. El usuario autoriza la aplicación en Twitter: El usuario ahora necesita ser enviado a Twitter para conceder a nuestra aplicación acceso a su cuenta. Después de eso, el usuario es redirigido a la dirección URL de devolución de llamada especificada por la aplicación.
  3. Token de solicitud de intercambios para el token de acceso: ahora que nuestra aplicación ha sido aprobada, puede intercambiar el token de solicitud desde el paso 1 por un token de acceso. Una vez que tengamos el token de acceso, nuestra aplicación es libre de interactuar con la API de Twitter en nombre del usuario.

Así que vamos a empezar con un poco de código. Nos encargaremos de todas las tareas de autenticación en una clase llamada TwitterApp. Comienza con el siguiente código en un nuevo archivo llamado lib/TwitterApp.php:

Aquí hemos creado tres propiedades y un constructor simple. La propiedad $tmhOAuth será un objeto tmhOAuth, que se usará en toda la clase. La propiedad $userdata contendrá un objeto que contiene información sobre el usuario, como su nombre de usuario y su estado de Twitter. La propiedad $state realiza un seguimiento del estado actual de autenticación.

El constructor simplemente acepta un objeto tmhOAuth y lo asigna a la propiedad $tmhOAuth.


Paso 1: Obtener un token de solicitud

Este es el método para obtener un token de solicitud:

Para entender la primera parte, necesitas conocer el método tmhOAuth::request(). Este método nos permite realizar una solicitud HTTP habilitada para OAuth y tiene el siguiente uso:

tmhOAuth::request($method, $url[, $params[, $useauth[, $multipart]]])

  • string $method - El método de solicitud que se va a usar (GET, POST, etc.)
  • string $url - La dirección URL para acceder
  • array $params (opcional) - Matriz asociativa de parámetros a incluir en la solicitud
  • bool $useauth (opcional, predeterminado true) - ¿es necesaria la autenticación?
  • bool $multipart (opcional, predeterminado false) - Se establece en true para las cargas de archivos

Para el parámetro $url, utilizamos el método tmhOAuth::url() para crear una URL basada en el método API al que llamamos:

tmhOAuth::url($request[, $format])

  • string $request - El método api (sin extensión)
  • string $format (opcional, predeterminado ' json") - El formato de respuesta deseado (JSON, XML, etc.)

Ahora que ya estás familiarizado con esos métodos, debemos realizar una solicitud POST al método de API oauth/request_token. Esto devolverá los datos de OAuth en un formato especial, por lo que necesitamos establecer el formato en blanco cuando usemos el método tmhOAuth::url(). También necesitamos pasar una variable llamada oauth_callback, que es donde el usuario volverá después de autorizar en Twitter. Usaremos el método tmhOAuth::p hp_self() para hacer referencia a la página actual. Aquí está ese código otra vez:

Una vez que realizamos la solicitud, la respuesta se almacena como una matriz en la propiedad tmhOAuth::response, con los siguientes datos clave:

  • code - El código de respuesta HTTP
  • response - Los datos reales devueltos
  • headers - Las cabeceras de respuesta

Por lo tanto, la siguiente parte de nuestro código comprueba el código de respuesta (200 significa éxito) y, a continuación, coloca el oauth_token y oauth_token_secret que recibimos en variables de sesión, ya que las necesitaremos más adelante. Estos se extraen de los datos de respuesta utilizando el método tmhOAuth::extract_params(), que devuelve una matriz de datos contenida en la respuesta. También establecemos una variable de sesión authstate para indicar que estamos en la siguiente etapa de autenticación. Aquí está el código:

Una vez hecho esto, ahora debemos redirigir al usuario a la URL oauth/authorize, incluyendo el oauth_token en un parámetro GET. Aquí está ese código otra vez:


Paso 2: Obtener un token de acceso

Este es el método para intercambiar nuestro token de solicitud por un token de acceso:

Lo primero que hacemos es establecer el user_token y user_secret en la matriz tmhOAuth::config en el token de solicitud que obtuvimos anteriormente.

La siguiente parte es donde realizamos una solicitud POST a oauth/access_token. Pasamos el oauth_verifier que recibimos en una variable GET como parámetro en esta solicitud.

Twitter responderá con un token de acceso y un secreto, que tendremos que guardar para cualquier solicitud futura. Por lo tanto, el siguiente fragmento de código los toma y los guarda cada uno en una cookie y, a continuación, establece el estado en 2.

La redirección al final está ahí para borrar los parámetros de URL dejados por Twitter, y permite que las cookies surtan efecto.


Paso 3: Verificar el token de acceso

Una vez obtenido nuestro token de acceso, debemos comprobarlo para asegurarnos de que es válido. Aquí está el método para hacerlo:

Este código ya debería resultarte bastante familiar. Todo lo que hacemos aquí es establecer el user_token y el user_secret y hacer una solicitud GET a 1 /account/verify_credentials. Si Twitter responde con un código 200, el token de acceso es válido.

Otro detalle a tener en cuenta es que aquí es donde rellenamos la propiedad $userdata con los datos devueltos por esta solicitud de Twitter. Los datos están en formato JSON, por lo que usamos json_decode() para convertirlos en un objeto PHP. Aquí está esa línea otra vez:


Paso 4: Atar todo junto

Con nuestros componentes OAuth en su sitio, es el momento de unirlo todo. Necesitamos un método de orientación pública para permitir que nuestro código de cliente inicie el proceso de autenticación, y aquí está:

La mayor parte del método auth() debería ser autoexplicativo. Según el estado, ejecuta el método adecuado para esa etapa de autenticación. Si el estado es 1, debe existir una variable GET oauth_verifier, por lo que el método también lo comprueba.

Ahora deberíamos crear un método público para averiguar si estamos autenticados. Este método isAuthed() devuelve true si el estado es 2:

También podemos usar un método para eliminar la autenticación del usuario. Este método endSession() establece el estado en 0 y elimina las cookies que contienen el token de acceso:


Inicialización

Ahora necesitamos añadir algunas cosas a nuestro método __construct() para averiguar en qué estado de autenticación se encuentra la aplicación tras la inicialización. Además, dado que nuestro código utiliza variables de sesión, debemos asegurarnos de que la sesión se inicia con este código:

La siguiente parte es donde determinamos el estado. El estado comienza en 0; si hay cookies que contienen un token de acceso, se supone que el estado es 2; en caso contrario, el estado se establece en la variable de sesión authstate si existe. Aquí está el código:

Si el estado es 1, eso significa que estamos en el proceso de autenticación. Así que podemos seguir adelante y continuar el proceso en este punto:

Si el estado es 2, debemos verificar el token de acceso. Si se produce un error en la autenticación, este código borra las cookies y restablece el estado:

Aquí está el nuevo constructor con esos cambios realizados:


Envío de un Tweet

Ahora que todo el código de autorización está completo, podemos agregar algunas funciones comunes a nuestra clase. Aquí hay un método para enviar un tweet a través de la API de Twitter:

El método sendTweet() acepta una cadena, la limita a 140 caracteres y, a continuación, la envía en una solicitud POST a 1/statuses/update. Este patrón ya debería ser bastante familiar.


La clase completa de TwitterApp


Nuestra aplicación

Ahora que tenemos una clase que controla todas las tareas de OAuth, ahora podemos ampliarla con funcionalidad específica para nuestra aplicación. Esto incluye la capacidad de obtener, alterar y establecer el avatar del usuario.

Vamos a extender la clase TwitterApp con una clase TwitterAvatars. Comienza con el siguiente código en un nuevo archivo llamado lib/TwitterAvatars.php:

Como puedes ver, la clase extendida incluye una propiedad $path para apuntar a donde irán los archivos de imagen temporales, una propiedad $filters que contiene una matriz de filtros de imagen y un constructor extendido con un parámetro para establecer la ruta de acceso. Como estamos reemplazando el constructor original, tenemos que llamar explícitamente al constructor del elemento primario con parent::__construct().

Ahora podemos empezar a añadir nuestros métodos.


Descargar

Obviamente, necesitaremos la capacidad de descargar imágenes para manipularlas. Aquí hay un método genérico download() que acepta una URL y devuelve los datos en esa ubicación. El método realiza una solicitud cURL básica.


Búsqueda de URLs

Ahora que podemos descargar archivos, necesitamos encontrar la ubicación de los archivos que necesitamos. Hay dos imágenes diferentes que nos interesan, la miniatura de tamaño estándar y la imagen original de tamaño completo. Por lo tanto, crearemos un método para obtener cada una de las URL.

Para obtener la miniatura de tamaño estándar, llamaremos al método de API users/profile_image/:screen_name que responde con una redirección 302 a la imagen de avatar del usuario especificado. Esto significa que la dirección URL se encuentra en la cabecera Location. Aquí está ese método:

Ten en cuenta que estamos realizando una solicitud GET con tmhOAuth, pasando los parámetros screen_name y size, a continuación, devolviendo el contenido de la cabecera Location.

No hay ningún método de API para obtener la imagen de tamaño completo, por lo que para nuestro siguiente método vamos a hacer un poco de trampa y editaremos la URL. Los datos de usuario contienen un campo profile_image_url que apunta a algo como avatar_normal.jpg, y la imagen original se puede encontrar en avatar.jpg sin el sufijo. Por lo tanto, este método obtiene la dirección URL, quita el sufijo de tamaño y devuelve la dirección URL modificada:


Lectura de imágenes

Ahora que podemos localizar y descargar imágenes, necesitamos una forma de leerlas. Usaremos la biblioteca GD para manipularlas, por lo que este método convertirá los datos de imagen sin procesar en un recurso de imagen GD.

Para describir lo que está sucediendo arriba:

  1. Los datos de imagen se convierten en un recurso GD mediante la función imagecreatefromstring().
  2. Las dimensiones de la imagen se graban utilizando imagesx() e imagesy().
  3. Se crea una nueva imagen de color verdadero en blanco con las mismas dimensiones utilizando imagecreatetruecolor().
  4. La imagen original se copia en la nueva imagen utilizando la función imagecopy(). Esto da como resultado una versión en color real de la imagen original independientemente del modo de color original.
  5. El recurso de imagen original se destruye mediante imagedestroy() y se devuelve el identificador de la nueva imagen.

Guardar imágenes

Ahora que podemos descargar imágenes y crear un recurso GD, necesitamos un método para guardarlas en el sistema de archivos. Este es el método que guarda la imagen proporcionada como un archivo PNG con el nombre especificado utilizando imagepng():


Generar las vistas previas

Ahora que tenemos todas las piezas que alimentan nuestra aplicación, podemos empezar a juntarlas. En nuestro flujo de aplicaciones, le daremos al usuario una selección de vistas previas entre las que elegir. Aquí está el método para generar estas vistas previas:

Lo primero que hacemos es comprobar que el usuario está autenticado y, a continuación, agarrar el nombre de usuario para usarlo más adelante en los nombres de archivo.

Luego descargamos la imagen del usuario usando los métodos getImageURL() y download() que hemos creado. Estos datos se utilizarán repetidamente para cada vista previa, por lo que los guardamos en la variable $data.

A continuación, guardamos una copia sin modificar con el sufijo _orig. Esto lo usaremos más adelante para la comparación visual.

La última parte del método es donde recorremos los filtros de imagen enumerados en la propiedad $filters, generando una imagen para cada filtro. En cada iteración, estamos creando una imagen y aplicando la función imagefilter(), que acepta una de las constantes que hemos enumerado en la matriz $filters. Luego, para cada imagen que guardamos, añadimos su ruta de acceso a una matriz asociativa (usando el nombre del filtro como la clave) que este método devuelve al final.

La siguiente parte de nuestro flujo de aplicaciones pide al usuario que confirme su elección, por lo que necesitamos una manera de encontrar una vista previa específica. Aquí está el método simple para obtener la ruta a una imagen basada en la opción pasada como parámetro, por defecto a la imagen original:


Cambiar el avatar

La etapa final de nuestro flujo de aplicaciones es realmente cambiar el avatar del usuario. Primero necesitamos un método para obtener la imagen de tamaño completo y aplicar un filtro específico a ella. Aquí está:

Eso debería ser fácil de seguir ya que es muy similar al método generatePreviews(). Acepta un parámetro para especificar un filtro de imagen y comprueba que existe. A continuación, descarga la imagen original y le aplica el filtro, pasando de nuevo la ruta de acceso a la imagen generada como valor devuelto.

Ahora necesitamos el método que realmente envía la imagen generada a Twitter, actualizando el avatar del usuario. Este método llama al método processImage() para crear la imagen y la carga en Twitter a través del método API 1/account/update_profile_image:

La parte complicada aquí es la solicitud POST tmhOAuth real, que es una solicitud multiparte que contiene los datos de imagen sin procesar. Para ello, debemos establecer el último parámetro del método tmhOAuth::request() en true, y pasar la variable de image en un formato especial:

@[path_to_image];type=[mime_type];filename=[file_name]

Por ejemplo, si queremos cargar tmp/username_grayscale_full.png, el valor sería @tmp/username_grayscale_full.png;type-image/png;filename-username_grayscale_full.png.

Aquí está esa parte del código de nuevo:


Hacer limpieza

Un efecto secundario de toda esta manipulación de archivos es una gran cantidad de archivos temporales que se quedan atrás. Aquí tienes un método para limpiar el directorio temporal:

Esto simplemente recorre los archivos PNG, eliminando los que tengan una antiguedad mayor de 12 horas. También comprueba cuánto tiempo ha pasado desde que lo comprobamos usando la marca de tiempo en un archivo .last_check, lo que nos permite limitar la comprobación a una por hora. De esta manera podemos llamar a este método en cada solicitud sin desperdiciar recursos.

Nota: Estamos haciendo uso de la función glob() en PHP, que es una manera fácil de obtener una matriz de archivos que coincidan con un patrón.


La clase completa de TwitterAvatars


El front end

Tenemos todos los componentes de la aplicación juntos, así que ahora todo lo que necesitamos es la interfaz de usuario. Todo el código aquí irá al archivo index.php en el directorio raíz. Comenzaremos incluyendo las bibliotecas y estableciendo la configuración:

Nota: Asegúrate de reemplazar el CONSUMER_KEY y CONSUMER_SECRET por el tuyo propio.

Vamos a colocar nuestro código en un bloque try-catch para que podamos manejar correctamente cualquier error, asignando su mensaje a una variable $error.

Dentro del bloque try podemos comenzar a escribir nuestro código, comenzando inicializando un objeto TwitterAvatars llamado $ta con un objeto tmhOAuth configurado:

En este momento podemos borrar cualquier archivo temporal antiguo:

A continuación comprobamos si el usuario está autenticado o, en su defecto, si el usuario ha solicitado la autenticación, en cuyo caso iniciamos el proceso llamando al método auth():

Si el usuario está autenticado, necesitamos comprobar si ha seleccionado una opción, de lo contrario generaremos vistas previas:

Si se ha seleccionado una opción, necesitamos obtener las rutas a las imágenes antiguas y nuevas para su visualización:

Por último, comprobamos si el usuario ha confirmado su elección y aplicamos el cambio. También enviamos un tweet si se solicita y establecemos una variable $success en true:

Esto es lo que tenemos hasta ahora:


El HTML

Después del código PHP vamos a generar el HTML apropiado, comenzando con esta plantilla, que establece el título y el encabezado principal:

Aquí es donde mostramos un formulario con entradas de imagen para cada vista previa:

Aquí está la página de éxito:

Aquí está la página de confirmación, donde mostramos la comparación y ofrecemos la oportunidad de cancelar:

Ten en cuenta que el formulario de confirmación incluye el filtro seleccionado en un campo oculto.

Si tiene lugar un error, mostramos esto:

La pantalla predeterminada es el botón "Conectarse a Twitter" como entrada de imagen (descargar una de las imágenes desde la parte inferior de esta página al directorio img):

Aquí está la sección HTML completa:


El CSS

Aquí tenemos un CSS básico para hacer que la interfaz se vea agradable, guardado en css/style.css:


Resultados

Aquí hay un video que detalla cómo debería verse nuestra aplicación completa:


Conclusión

Si has seguido este tutorial hasta el final, deberías tener una muy buena comprensión de OAuth y lo que se necesita para crear una sencilla aplicación web de Twitter. Usar la API de Twitter es fácil una vez que entiendes los conceptos básicos, especialmente si usas una biblioteca como tmhOAuth para manejar los detalles menores.

El ejemplo simple que creamos en este tutorial se puede modificar o ampliar fácilmente para hacer cualquier cosa. Así que si tienes una gran idea para una nueva y refrescante aplicación de Twitter, no dudes en utilizar esto como base.

Gracias por leer. Si tienes alguna pregunta o comentario sobre este tutorial, ¡por favor publícalo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.