Estoy tratando de crear una pequeña aplicación web que me muestre mi nombre, mi horario y mis calificaciones en la escuela.
Mi escuela usa principalmente los servicios de Microsoft, lo que me dio la idea de usar sus puntos finales de API de Azure (para los horarios y calificaciones) en mi proyecto.
Tengo acceso para crear un registro de aplicación en el portal de Azure, así que lo hice y funcionó para iniciar sesión con mi correo electrónico de estudiante. También traté de obtener la API de Microsoft Graph y eso funciona absolutamente bien.
Sin embargo, cuando intento obtener el punto final de calificaciones, devuelve un error 401 no autorizado. Supongo que esto tiene que ver con los alcances, pero no estoy seguro. Resulta que mi token de acceso no es válido para esos puntos finales de la API.
Entonces, mi pregunta es, ¿cómo obtengo un token de acceso que ES válido para esas API? ¿O es incluso posible? Tenga en cuenta que son registros de aplicaciones independientes en Azure Portal y que solo puedo editar el mío propio, no el de mi escuela.
Aquí está mi archivo JavaScript, con algunos comentarios:
const config = { auth: { clientId: "my_client_id_is_here", authority: "https://login.microsoftonline.com/my_tenant_id_is_here", redirectUri: "localhost" } }; async function login() { console.log("Started..") var client = new Msal.UserAgentApplication(config); var request = { scopes: [ 'User.Read' ] }; let loginResponse = await client.loginPopup(request); console.dir(loginResponse); let tokenResponse = await client.acquireTokenSilent(request); console.dir(tokenResponse); // User REQUEST - Here I fetch the Graph API for some profile information, which works fine and writes it to the HTML perfectly. let req = await fetch("https://graph.microsoft.com/v1.0/me/", { headers: { "Authorization": "Bearer " + tokenResponse.accessToken } }); let json = await req.json(); console.log(json); document.write("Logged in as " + json.displayName); document.write("<br>" + json.mail); document.write("<br>" + json.jobTitle + " " + json.officeLocation); // School Grades REQUEST - this is the part where I'm trying to fetch my School Grades, but it's not working since it gives me a 401 error.. let gradesReq = await fetch("https://myschool.azurewebsites.net/API/Grades/GetGrades", { "headers": { "authorization": "Bearer " + tokenResponse.accessToken } }); try { let gradesJson = await gradesReq.json(); console.log(gradesJson); } catch (err) { document.write("An error occured while trying to get the school grades..") } }```Tienes razón en tu forma de pensar. La razón por la que recibe este error es porque está utilizando el token de acceso adquirido para un ámbito diferente ( User.Read ) con su API.
La solución es bastante simple.
Lo que tienes que hacer es proteger tu API con Azure AD primero. Puede encontrar útil este vínculo para implementar esta funcionalidad: https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-overview .
Una vez que haya hecho eso, todo lo que necesita hacer es adquirir token para su API. En ese caso, el código de su alcance será algo como lo siguiente:
var request = { scopes: [ 'api://<your-application-id>/.default' ] };Una vez que adquiera el token para este alcance y lo use con su API, no debería obtener la excepción 401 que está recibiendo.