¿Qué es una API KEY?

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

API KEY

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.

Autenticació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.

Autorización

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:

• Query parameter: ?apy_key=ABC123
• Authorization Header: X-API-Key: ABC123

Alternativas

• Authorization: Basic
• Authorization: Barer Token
• OAuth 2.0 (es de las mejores y más complicadas formas de autenticar en la modernidad)
• Access Key + Secret Key

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:

1. Autenticacion que responde la pregunta de quien eres?
   “fulanito”,“patricia” o simplemente: sin identificar.
2. Autorizacion : que permisos tiene cada quien

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

https://thecatapi.com/signup

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.