Integraciones, Programación, Tutoriales

Video: Aprende a Crear tu Primera Aplicación de Twitter

Compartir Artículo en Redes Sociales

Introducción:

Hola, soy Carlos Baeza, y en esta oportunidad, revisaremos de principio a fin cómo crear tu primera aplicación de Twitter.

Este tutorial es el primero de una serie que llevaré a cabo, los que tendrán como objetivo final el realizar un login o inicio de sesión social de Twitter, con la aplicación que crearemos a continuación.

Objetivos:

A continuación, repasaremos brevemente los objetivos de este video.

Exploraremos la página de Twitter Developers en la que crearemos la aplicación, la que posteriormente utilizaremos para llevar a cabo el login social e interactuar con su Api.

Durante este proceso de creación, aprenderemos sobre los permisos de acceso que deben ser asignados en la aplicación, para realizar el proceso de inicio de sesión posterior.

En base a estos permisos serán creados los Tokens de acceso correspondientes.

Comprenderemos de que manera interactúa la url de respuesta, o callback url, dentro del flujo de validación de login, además, cómo debemos capturar y manejar los resultados de la respuesta de esta petición al interior de nuestra aplicación.

Por último, descubriremos como configurar la aplicación para poder interactuar con ella desde nuestro entorno de desarrollo local, para que, de esta forma, podamos llevar a cabo todas nuestras pruebas sin la necesidad de un servidor web o dominio calificado.

Contenido:

Comencemos, lo primero será crear y configurar nuestra aplicación de Twitter, para llevar a cabo esto, debemos dirigirnos a la página oficial de Twitter Developers.

Para acceder a ella, solamente ingresen a la url señalada en el video, también la pueden obtener desde el home oficial de Twitter, o haciendo una búsqueda en Google por los términos Twitter Developer, muy probablemente será el primer resultado que aparezca en la lista.

Una vez aquí, nos dirigimos al formulario de inicio de sesión, haciendo clic sobre el botón ubicado en la parte superior del sitio.

Es necesario que iniciemos sesión en Twitter para tener acceso a las aplicaciones, ingresamos nuestro usuario y contraseña como de costumbre y continuamos.

Cabe mencionar que, en el caso de no tener una cuenta habilitada como desarrollador, se deberán ejecutar pasos adicionales que no cubriremos en este video. Aunque este proceso de solicitud es rápido y en línea, para que no se desanimen.

Una vez hayamos iniciado sesión, nos dirigiremos a la página de aplicaciones, la cuál se despliega desde el menú superior. Aquí se listarán todas las aplicaciones que tengamos creadas para que podamos revisarlas.

Para crear una nueva aplicación, debemos hacer clic sobre el botón crear app que se encuentra en la parte superior del sitio.

Comenzamos completando datos básicos como el nombre que recibirá y su descripción, es muy importante que este último sea un texto auto descriptivo y cumpla a cabalidad con el objetivo para el cuál se creó la aplicación.

El campo de website url (o url del sitio), hace referencia a la página de inicio, por así decirlo, a la cuál apuntará y responderá la aplicación en sus peticiones cuando interactuemos con su api.

La explicación que nos entrega Twitter es que, este campo, se utilizará para mostrar la fuente de los tweets que enviaremos a través de la aplicación (al interactuar con su api), es decir, si ponemos como url carlosbaeza.cl, los tweets enviados quedarán marcados con esta url como la fuente desde la cuál fueron generados (las personas o usuarios verán esta información).

Además, esta url se mostrará también a estas personas o usuarios al momento de realizar el inicio de sesión social con Twitter, en la pantalla de autorización de la aplicación, cuando deban ingresar usuario y contraseña, se verá en la parte superior del formulario junto con el nombre de la aplicación, el sitio web al que pertenece, en este caso, carlosbaeza.cl

Otras apis, como la de Facebook, son un poco mas restrictivas en este aspecto, ya que, no utilizan este parámetro meramente como algo estético o informativo (como lo hace Twitter), sino que, también lo utilizan como medio de validación para las peticiones, restringiendo consultas a la aplicación desde cualquier otro dominio que no sea el que especificamos en este campo.

En resumen, este campo en particular no tiene mayor incidencia en un ambiente de desarrollo, así que podemos utilizar cualquier url que funcione como FQDN (fully qualify domain name), o dominio calificado, puesto que, escribir localhost o la ip no funcionará, este campo debe ser un dominio real y público desde internet.

El siguiente punto es muy importante, y, si no lo marcamos, no podremos utilizar la característica de inicio de sesión con Twitter, así que es fundamental no olvidarnos de seleccionarlo.

Básicamente lo que le decimos a la aplicación es que habilite su funcionalidad para hacer el inicio de sesión social, que revisaremos en los próximos videos.

Lo que viene a continuación es el campo de url de respuesta o callback url, en este punto nos detendremos un poco más e intentaré explicar tanto la lógica como el funcionamiento, además de cómo interactúa dentro de nuestro flujo de validación de login social, que cubriremos en los próximos videos.

Como referencia, la mayoría de los servicios o apis que consumamos, que requieran de alguna interacción por parte del usuario con el cliente, o de alguna validación adicional que saquen al usuario (por así decirlo), de nuestra plataforma, necesitarán una url de respuesta a la cuál puedan redirigirlo una vez se terminen los pasos requeridos por el cliente dentro de su plataforma.

Es decir, para este caso puntual, cuando el usuario haga clic sobre el enlace de inicio de sesión con Twitter, este lo redireccionará a su página oficial en la que tendrá que ingresar sus credenciales de acceso, dentro del ambiente del cliente, el cuál, una vez haya validado de manera satisfactoria (o no), sus credenciales, enviará al usuario de vuelta a nuestro sistema siguiendo la url de respuesta que configuramos en este punto, además de toda la información del usuario contenida en la respuesta, la que posteriormente debemos rescatar y formatear, para usarla como estimemos conveniente.

En los ejercicios de los próximos videos aprenderemos como hacer este proceso completo de principio a fin, así que no se preocupen si estos conceptos parecen un poco extraños en este momento, más adelante se aclararán con ejemplos prácticos, ahora es importante que conozcan la lógica y teoría de este elemento, que les servirá como conocimiento general para otras integraciones.

Hay otra función o rol que cumple este campo, y este es, además de saber a dónde debe redireccionar al usuario una vez hecho el login, el de validar la propiedad o pertenencia de nuestra página (por así decirlo).

Que quiero decir con esto, si intentamos acceder o rescatar la respuesta desde otra url que no sea esta, no podremos hacerlo por un asunto de permisos, ya que, solo podremos interactuar con la api y el inicio de sesión desde la url de respuesta que definamos en este campo, respetando tanto dominio como la ruta que le entreguemos como parámetro.

Hasta aquí la explicación del por qué y para qué de este campo, ahora aprenderemos a configurarlo para poder interactuar con él desde un entorno de desarrollo local, de moto tal que, no necesitemos de un servidor web o tener nuestro proyecto publicado en internet para poder trabajar en él.

Por regla Twitter no permite que utilicemos como website url un link de tipo localhost o una ip de servidor, así que como vimos, debemos utilizar un dominio calificado que se encuentre disponible y de acceso público a internet, para configurar este campo.

Por suerte, la url de respuesta funciona de forma diferente y sí la podemos configurar con una url local de desarrollo, o una ip pública en su defecto (recordemos que Twitter debe ser capaz de interactuar con ella, por esta razón debe ser pública).

En nuestro caso, y para efectos del ejercicio, configuraré la url de respuesta utilizando la ip local por defecto de nuestra máquina, esta debiese ser 127.0.0.1 y es lo mismo que escribir localhost, hace referencia a este mismo ambiente local, la salvedad es que Tiwtter no soporta el parámetro localhost como campo, por esta razón usamos la ip.

En el caso de presentar problemas con esta ip (a nivel local de nuestro entorno de desarrollo), podemos revisar el archivo hosts de configuración de nuestro sistema, con el objetivo de garantizar que este parámetro esté bien declarado, ya que, algunas veces se encuentra comentado.

Además, podemos revisar la información y configuración de red de nuestro equipo, con la finalidad de garantizar y validar que el sistema cumpla y haya asimilado por así decirlo, o incorporado los cambios hechos en el paso anterior, al configurar el archivo hosts.

Recuerden que, cada vez que modifiquen el archivo hosts, deben reiniciar para que los cambios se reflejen de manera correcta y consistente en el sistema, previniendo ambigüedades y mal funcionamiento.

El último paso para crear nuestra primera aplicación, será el de especificar cuál es el motivo o el por qué queremos crear esta aplicación, es muy importante que sean descriptivos y detallen de manera correcta su funcionamiento, sobre todo si su cuenta de desarrollador es nueva o tienen pocas aplicaciones, ya que, podrían eventualmente no autorizárselas.

Una vez hecho esto, presionamos sobre el botón crear, nos mostrará las políticas de uso además de los términos y condiciones que debemos aceptar. Luego finalizamos la creación haciendo clic sobre el botón crear nuevamente.

Cabe mencionar que, se abordaron solo los campos clave para llevar a cabo la creación de nuestra primera aplicación, obviando los que no sean de vital importancia para hacer menos difícil y extenso el ejercicio. En el caso de presentar dudas o inquietudes con algo que no se haya abordado, siéntanse libres de dejar sus comentarios en la plataforma que más les acomode, por favor.

Felicidades!, ya tienes tu primera aplicación de Twitter creada (espero), y como prueba de lo mismo podemos revisar y validar los detalles de esta en la página a la cuál somos redireccionados una vez hayamos concluido el proceso de creación. Esta página o sección se denomina detalle de la aplicación, y se puede acceder a ella navegando por las pestañas superiores que se pueden apreciar.

Aquí aparecerá la mayoría de la información de configuración de la aplicación, como su url, su url de respuesta, icono, descripción, entre otros.

Desde esta misma página (detalle de la aplicación), y, mediante la utilización de las pestañas superiores del menú, podemos configurar y acceder al área o sección de tokens y llaves de acceso de la aplicación, los que posteriormente estaremos utilizando para conectarnos e interactuar con la api de Twitter.

Al tratarse de una aplicación nueva, solamente está creada la llave y secreto de la misma aplicación como tal, es decir, lo mínimo para conectarnos con la api y obtener información, pero, sin la capacidad de interactuar aún con usuarios, puesto que, no hemos definido ni determinado un nivel o capa de permisos para este comportamiento.

En la parte inferior se encuentran los tokens de acceso de la aplicación, los cuales se generan a partir de los permisos que declaremos, y son utilizados para definir el nivel de acceso que tendrá el usuario o cliente que se conecte e interactúe con la api. Cómo la aplicación es nueva y no hemos definido permisos aún, estos campos aparecen vacíos, pero no se preocupen, los crearemos más adelante.

Cabe destacar que, estos permisos si están presentes al momento de crear la aplicación, sólo que al tratarse de una aplicación nueva, no han sido configurados aún, ya que Twitter no asume que utilizaremos esa misma capa de permisos, y por esta razón no genera los tokens de forma automática, sino mas bien, espera a que nosotros definamos este aspecto con anterioridad, para que luego seamos nosotros quienes generemos de forma manual estas llaves.

La tercera y última pestaña o sección del menú, es la referente a los permisos de los cuales hemos estado hablando, al hacer clic, se desplegará la información actual con el nivel de permisos que tiene asignada nuestra aplicación, en este caso, Twitter por defecto asocia el permiso de lectura y escritura lo que es suficiente para llevar a cabo el ejercicio de inicio de sesión, así que no debemos modificarlos en esta oportunidad, presionamos cancelar y volvemos a la pantalla anterior de tokens.

De vuelta aquí, crearemos de forma manual los tokens de acceso presionando sobre el botón crear, ubicado en la parte inferior de la página, lo que generará de forma automática los tokens de acceso necesarios para llevar a cabo el inicio de sesión social que cubriremos en los siguientes videos.

Estos tokens que acabamos de crear, también se componen de la llave de la aplicación y su respectivo secreto, lo que debemos tener en cuenta en el caso de necesitar volver a generar los tokens de acceso, ya sea por un cambio en su nivel de permisos o algún otro aspecto de su configuración.

Siempre debe ser consistente la llave y secreto de la aplicación que utilicemos para conectarnos a la api de manera programática, es decir, por código, como también la que utilizamos para generar los tokens de acceso, ya que, en algunos casos, se cambiar la llave y secreto de la aplicación por unos nuevos, sin embargo se sigue utilizando el mismo token de acceso generado con la llave y secreto antiguos, provocando inconsistencias y errores de funcionamiento y ejecución.


Compartir Artículo en Redes Sociales
Tagged , , , , , , , , , , , , , , ,
Carlos Baeza Negroni

Sobre Carlos Baeza

Profesional del área informática, desarrollador de software, gestor de proyectos, deuda técnica, innovación y transformación digital.

Déjame tus comentarios