Aquí un poco de la clase sobre la AP Key 💚
.
Conceptos fundamentales
¿Qué es una API REST?
Flujo de comunicación entre usuarios, frontend y backend
Primeros pasos con fetch
Consume tu primera API REST
Endpoints y query parameters
¿Qué son los HTTP Status Codes?
¿Qué es una API KEY?
Proyecto
Maquetación del proyecto
¿Qué son los Métodos HTTP?
GET: leyendo michis favoritos
POST: guardando michis favoritos
Consultas a la API para escribir HTML dinámico
DELETE: borrando michis favoritos
Headers en peticiones HTTP
¿Qué son los Headers HTTP?
Header de autorización
Header de Content-Type
FormData: publicando imágenes de michis
Bonus
Axios: librerías de JavaScript para consumir APIs
CORS, caché, redirect y tu propio clon de fetch
GraphQL, Web Sockets y Web 3.0: el mundo más allá de REST
Próximos pasos
Toma el Curso Práctico de Consumo de API REST con JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 27
Preguntas 6
Aquí un poco de la clase sobre la AP Key 💚
.
Juan a mejorado mucho dando clases, se nota que ha madurado, este curso de API’s me esta gustando mucho y la forma en la que el explica es bastante clara por no decir excelente!
Autenticación
Autorización
Son una, no la única, de las formas en que el backend puede identificar quien está haciendo cada solicitud.
Debemos entender dos conceptos importantes, la Autenticación y la Autorización.
Consiste en identificar quien es cada quien. No sabe que permisos tiene fulano, No sabe que puede o no hacer fulano, Solamente sabe que él es fulano, que ella es pamela o que esa es una persona sin identificar.
Es la que nos dice que permisos tiene cada quien, es decir, si fulano quiere ir a la nevera para comerse un pastel, es la que dice, espérate fulano, tienes permisos para abrir la nevera?, a listo ábrela, tienes permisos de comerte el pastel?, a bueno comételo.
Y además por poner un ejemplo más real, si fulano trata de ver las fotos privadas de pamela, la autorización va a decir, ok quien eres?, la autenticación ya te dijo que eras fulano, a listo perfecto, autenticación me pasas un token, listo ya sé que tu eres fulano, y luego empieza a revisar los permisos, como no los tiene se lo va a prohibir,
Obviamente estos trabajan en conjunto para prohibir o permitir a toda la información que tenemos en nuestra aplicación, y ahí es donde entran las API KEYs.
Estas API Keys son una de las formas en que el backend puede indentificar quien es cada quien.
El backend necesita saber quien esta haciendo cada solicitud, para proteger la información privada de las personas, pero también en muchos casos, para limitar la cantidad o las solicitudes que le hacemos a la aplicación.
Para que nosotros podamos enviarle esta API KEY en cada solicitud que hagamos al backend podemos utilizar varias formas:
?apy_key=ABC123
X-API-Key: ABC123
En este caso estamos haciendo una Application-based authentication
es decir estamos autenticando nuestra aplicación, estamos autenticando a nuestro frontend para que pueda hacer solicitudes al backend, pero hay aplicaciones donde no solamente necesitamos una Application-based authentication, también hay apps que necesitamos usar esta con una User-based authentication
.
Estas clases estan geniales!! Que gran trabajo esta haciendo Juan! Estas clases así me recargan de buena energía! Aprendo mucho y me motiva a seguir explorando más sobre el tema!
Este curso se ha puesto muy bueno, ojalá siga así hasta el final.
es como la API de Marvel, te da una llave publica y una privada
y con esas dos tenemos que crear un hash y concaternala a la url para tener autorización
const API_KEY = 'xxxxxx-yyyyyyyy-zzzzzzzzz';
const URL = [
'https://api.thecatapi.com/v1/images/search',
'?limit=5',
'&order=Asc',
`&api_key=${API_KEY}`,
].join('');
Ahora me está quedando muchísimo más claro cómo consumir APIs por medio de Javascript. Siento que todo está muy sencillo y Juan David lo explica con mucha claridad. Muy emocionado de tomar este curso.
Como me gusta este curso
han pasado 7 clases pero el tiempo se me ha ido muy rapido esta muy bueno el curso n.n
El tema de autenticación y autorización es super amplio e interesante. Si les interesa leer más sobre otros métodos y cómo funcionan, les recomiendo mucho este post que explica a detalle distintas maneras de autentificar y autorizar:
4 Most Used REST API Authentication Methods
ME ENCANTAN ESTAS CLASES! Muy claras. Hacen “Mas facil” aprender
Cúanto tarda en recibir el correo?? xD
Un curso muy bueno hasta ahora!
Según Google…
El código de error HTTP 418 Soy una tetera indica que el servidor se rehusa a preparar café porque es una tetera. Este error es una referencia al Hyper Text Coffee Pot Control Protocol, creado como parte de una broma del April Fools’ de 1998.
Sólo vengo a decir que me está gustando mucho el curso u,u
una APIKEY es una de las fromas que tiene el backend para saber QUIEN esta haciendo la solicitud.
Hay dos conceptos importantes:
Primero pregunta quien eres y luego revisa los permisos.
Para enviar la API KEY al backend podemos usar:
1)Query-Parameter: ?api_key=NOMBREDELAAPIKEY
2)Authorization Header: X-API-KEY:NOMBREDELAAPIKEY
Siendo la ultima mas comoda y segura
Hay otras alternativas para que el backend identifique la solicitud:
-Authorizaton: Basic
-Autorization: Bearer Token
-O Auth 2.0 (De las mejores y mas complicadas)
-Access Key + Secret Key (Firebase)
Y para cuando el backend necesita ademas de saber quien esta haciendo la solicitud, de quien es la aplicacion, se combina:
-Application-based- authentication y
-User-based authentication
he visto pocos cursos en platzi pero hasta ahora este es mi fav 💕
Excelente explicación. Gracias prof Juan por explicar de manera práctica para que podamos entender mejor.
En mi equipo usamos Autherization: Bearer Token en el header para autorizar las solicitudes.
todo esta tomando sentido en ellaberinto de mi cerebro!
ERROR 522 😦
No sé por qué, pero me dieron ganas de consumir la API de Marvel Comics y de paso implementé los api keys con los query parameters:
const API = "https://gateway.marvel.com:443/v1/public/characters/1011334/comics?ts=1&apikey=be8945bcac46de93659d1f8e44fc5cfe&hash=0266b29b25e0739836354477416bea98";
const main = document.querySelector('main')
async function fetchData(url){
const response = await fetch(url);
const data = response.json();
return data;
}
async function getData(url){
try{
const response = await fetchData(url);
const comics = response.data.results;
const imgUrl = comics[0].images[0].path +".jpg";
for(let i = 0; i < comics.length; i++){
main.innerHTML += `
<div class="tarjeta">
<img src=${comics[i].images[0].path + ".jpg"} alt="pokemon">
<h3>Nombre: <span>${comics[i].characters.items[i].name}</span></h3>
</div>
`
}
}catch{
throw new Error("Error en la API");
}
}
console.log(getData(API))
Para los que también iban a copiar el key del profe como yo, hay una aplicación para generar correos temporales y que no te llegue spam, allí te llegará la Key para que uses la API.
A mi me gusta porque muchas veces hay aplicaciones que te llenan de Spam y te suscriben a newsletters.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.