Cómo usar claves API

Las interfaces de programación de aplicación (API) del lado del servidor permiten a los desarrolladores acceder a los datos disponibles de empresas y organizaciones de terceros. Para usar estos datos, los desarrolladores pueden crear aplicaciones que hagan solicitudes a URL o endpoints proporcionados por esas organizaciones de terceros y, a su vez, los endpoints responden con los datos solicitados.

Algunas interfaces de programación de aplicación (API) permiten a los desarrolladores solicitar datos sin credenciales; otras requieren una clave API para evitar que los usuarios hagan demasiadas solicitudes, lo que potencialmente interrumpe la capacidad de funcionamiento de un sitio web.

Con el tiempo, aprenderá a crear estas solicitudes en el back-end de su aplicación para evitar exponer su clave a otros usuarios. Pero para los fines de esta guía, usted incluirá una clave API en una URL que utilizará en su código JavaScript en el front-end.

Nota Hay varias maneras de hacer solicitudes de interfaz de programación de aplicación (API). Esta guía muestra solo un enfoque, mediante la interfaz de programación de aplicación (API) de OpenWeather para la demostración.

Solicitar una clave API

Antes de comenzar a trabajar con la interfaz de programación de aplicación (API) de OpenWeather, deberá solicitar una clave API. Para hacerlo, visite la página de inscripción de OpenWeather y cree una cuenta.

Después de crear su cuenta, si se le redirige a una página con varios encabezados secundarios, como New Products (Productos nuevos), Services (Servicios) y API Keys (Claves API), haga clic en API Keys (Claves API).

Si no se le redirige a esa página, haga clic en su nombre de usuario en la esquina superior derecha de la ventana para mostrar un menú desplegable. En este menú, seleccione My API Keys (Mis claves API).

Recibirá un mensaje que le indicará que puede generar tantas claves API como sea necesario para su suscripción. Sin embargo, en este caso, solo necesitará generar una clave.

En Create Key (Crear clave), asigne a su clave API un nombre que sea único para su proyecto y luego haga clic en el botón Generate (Generar). Esto lo llevará a una página que enumera las claves creadas. Deben parecer una cadena aleatoria de 32 caracteres. Copie la nueva clave que creó y guárdela en el archivo JavaScript donde realizará llamadas de interfaz de programación de aplicación (API).

Crear una variable para almacenar la clave API

Ahora que creó una clave API, querrá almacenarla en una variable para que pueda reutilizarla en su código sin tener que escribirla repetidamente.

La variable se asemejará al siguiente fragmento de código:

const APIKey = "12341234123412341234123412341234";

Tenga en cuenta que el nombre de la variable es APIKey. Puede nombrar su variable de forma similar. Debe ser significativa y clara para que otro desarrollador pueda comprender su propósito.

Nota: La cadena del código anterior no es una clave API real, sino un ejemplo de una cadena de 32 caracteres. Los caracteres de su clave API serán aleatorios y no se repetirán.

Crear variables para la llamada de interfaz de programación de aplicación (API)

Según la llamada de interfaz de programación de aplicación (API) que realice, es posible que desee incluir diferentes parámetros de consulta. Esto a menudo requerirá que su aplicación acepte la entrada de usuario, por lo que querrá crear variables que puedan contener esta entrada después de que el usuario la presente.

En este ejemplo, crearemos una llamada de interfaz de programación de aplicación (API) utilizando la parte de datos meteorológicos actuales de la API de OpenWeather y buscaremos por nombre de ciudad. De acuerdo con la documentación de OpenWeather sobre la llamada de datos meteorológicos actuales para una ubicación, puede realizar una llamada de interfaz de programación de aplicación (API) con solo el nombre de la ciudad o con una combinación del nombre de la ciudad, el código de estado y el código de país.

Nota: La búsqueda por códigos de estado solo está disponible para ubicaciones en los Estados Unidos.

Para este ejemplo, recopilaremos la entrada de usuario solo para el nombre de la ciudad y la guardaremos en una variable, como se muestra en el siguiente código:

let city;

Deseará permitir que su aplicación acepte la entrada de usuario y la almacene en la variable que creó. También es probable que deba especificar variables de estado y país en su llamada de interfaz de programación de aplicación (API), ya que varios países o estados podrían tener ciudades con el mismo nombre. Para efecto de esta guía, puede usar la variable de ciudad que acaba de crear.

Crear una URL de consulta para realizar la llamada de interfaz de programación de aplicación (API)

Ahora que creó variables para almacenar su clave API y la entrada de usuario para la ciudad, puede crear una URL de consulta que utilizará para realizar la llamada de interfaz de programación de aplicación (API).

Es posible que notara que la interfaz de programación de aplicación (API) de OpenWeather proporciona varias URL, cada una de las cuales se puede utilizar para obtener información diferente. Para este ejemplo, utilizará la URL asociada con los datos meteorológicos actuales. Para usar otros puntos de datos de la interfaz de programación de aplicación (API), deberá usar la URL que figura en esa sección de la documentación.

La documentación de datos meteorológicos actuales de OpenWeather proporciona un ejemplo de cómo realizar una llamada de interfaz de programación de aplicación (API) con solo el nombre de la ciudad, como se muestra en el siguiente código:

api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

¡Esto es exactamente lo que buscamos! Ya creamos variables para la clave API y la ciudad, por lo que solo necesitamos reemplazar los marcadores de posición relevantes en la URL con esas variables.

Pero primero, consulte la sección Parameters (Parámetros) de la documentación, que encontrará después de la sección API Call (Llamada de interfaz de programación de aplicación). Los parámetros son los parámetros de búsqueda variables que puede agregar a una llamada de interfaz de programación de aplicación (API) para especificar los datos que desea solicitar.

Esta sección enumera una serie de parámetros, pero solo se requieren los siguientes dos:

• q: el parámetro de consulta, donde agregaremos la variable de ciudad.

• appid: el identificador o la clave de la aplicación, donde agregaremos la variable de clave API.

Nota: Para los efectos de esta guía, nos centraremos en estos dos parámetros requeridos. No dude en buscar más información sobre los parámetros opcionales.

¡Genial! Ahora que sabemos cómo funciona la URL de consulta de OpenWeather, construyamos una con las variables que creamos anteriormente. Utilizaremos la concatenación en cadena para crear una nueva variable llamada queryURL, que almacenará la URL de datos meteorológicos actuales de OpenWeather y las variables necesarias, como se muestra en el siguiente código:

const queryURL = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKey}`;

Veamos más de cerca las diferentes partes de esta variable que acabamos de crear:

• http://api.openweathermap.org/data/2.5/weather es la URL base para llamar a la interfaz de programación de aplicación (API) de los datos meteorológicos actuales.

• El signo de interrogación (?) marca el límite entre la URL base de la llamada de interfaz de programación de aplicación (API) y los términos de consulta de la llamada de interfaz de programación de aplicación (API).

• Como mencionamos anteriormente, q= es el parámetro de consulta, donde podemos agregar cualquier entrada de usuario para especificar los datos que queremos solicitar en la llamada de interfaz de programación de aplicación (API). El valor asignado a este parámetro se denomina cadena de consulta.

• Después del parámetro de consulta, concatenamos la entrada de usuario, que se almacena en la variable city. Esta es la cadena de consulta asignada al parámetro de consulta.

• El carácter et (&) indica que agregamos otro parámetro después del parámetro de consulta.

• A continuación, concatenamos el otro parámetro requerido (appid=) donde agregaremos la clave API específica a la aplicación.

• Finalmente, concatenamos la variable APIKey que contiene la clave que obtuvimos al comienzo de esta guía.

Ahora que creó una variable que alberga la URL de su consulta, puede implementarla en una llamada de interfaz de programación de aplicación (API) usando la API Fetch.

Realizar la llamada de interfaz de programación de aplicación (API) con Fetch

La interfaz de programación de aplicación (API) Fetch es una Web API integrada en el navegador que le permite realizar llamadas de interfaz de programación de aplicación (API) del lado del servidor sin tener que usar AJAX e instalar una library voluminosa como jQuery.

Ahora que creó su URL de consulta, solo necesita llamar a la interfaz de programación de aplicación (API) Fetch para pasar la URL de consulta como un parámetro, como se muestra en el siguiente ejemplo:

fetch(queryURL)

Recuerde que la URL de consulta no funcionará automáticamente como está escrita. Deberá ajustar su aplicación para aceptar la entrada de usuario, para almacenar en la variable city que creó.

Utilice los datos de respuesta en su sitio web

¿Qué sigue? Una vez que la aplicación funcione, podemos usar los datos de respuesta que devuelve la consulta en la aplicación. No abordaremos eso ahora, pero funcionaría de la misma manera que una interfaz de programación de aplicación (API) que no requiere una clave API.

Recuerde que también puede realizar llamadas de interfaz de programación de aplicación (API) de otras maneras. A medida que obtenga más información, descubrirá mejores formas de proteger sus claves API y realizar llamadas de interfaz de programación de aplicación (API) en el back-end. Pero por ahora tiene una guía fácil para ayudarle a comenzar.

This page was updated 6 months ago
© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.

Category: apis

Tagged under: apis, guide,