Ejercicio: Usar Microsoft Graph en la aplicación web para recuperar la foto de perfil de un usuario

10 minutos

Aprendió todos los conceptos necesarios para acceder al perfil de un usuario mediante Microsoft Graph. Ahora es el momento de crear una aplicación cliente que recupere y muestre la foto de un vendedor que inició sesión.

Para completar correctamente esta unidad, necesita una cuenta de usuario (por ejemplo, de su espacio empresarial de desarrollador de Microsoft 365) con una imagen de perfil disponible para usarla en la aplicación.

Configuración de la aplicación

En este ejercicio, accederá a un repositorio de GitHub, agregará identificadores de Microsoft Entra a la aplicación y agregará código para acceder a una foto mediante Microsoft Graph. Si aún no ha creado un registro de aplicación de Microsoft Entra, complete el módulo de requisitos previos antes de continuar.

Para obtener el código de aplicación inicial usado en este ejercicio, elija una de las siguientes opciones:

Si usa Git, clone el proyecto mediante el comando git clone:
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
Si no usa Git, vaya a https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart en el explorador web. Seleccione el botón Código seguido de Descargar ZIP. Extraiga el archivo ZIP en la máquina.
Abra la carpeta en el editor de código.
La aplicación contiene los siguientes archivos:
- index.html: define la interfaz que le aparece a un usuario cuando accede al sitio web. Carga el script de la Biblioteca de autenticación de Microsoft (MSAL) y los scripts de aplicación personalizados, proporciona una manera de que un usuario inicie sesión y muestra el nombre del usuario después de iniciar sesión.
- auth.js: define la configuración de MSAL para asociar la aplicación a Microsoft Entra ID, inicia sesión en un usuario en la aplicación y controla la recuperación de un token de acceso que Microsoft Graph puede usar.
- graph.js: llama a Microsoft 365 para acceder al perfil de /me que ha iniciado sesión. Se basa en auth.js para recuperar el token de acceso que se usa para la llamada API de Microsoft Graph.
- ui.js: controla los elementos de la interfaz de usuario definidos en index.html.
Abra el archivo auth.js y busque la constante msalConfig:
```
const msalConfig = {
  auth: { .. }
}
```
Reemplace el valor de la clientId propiedad por el valor de id. de aplicación (cliente) copiado de la aplicación Microsoft Entra (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación Microsoft Entra (spa-aad-app).
En el mismo archivo auth.js , busque la msalConfig.auth.authority propiedad . Reemplace el <your directory ID here> valor por el valor de Id. de directorio (inquilino) de la aplicación Microsoft Entra (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación Microsoft Entra (spa-aad-app).

La msalConfig constante debe ser similar al código siguiente, con los identificadores únicos del inquilino de Microsoft Entra y la aplicación registrada:
```
const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};
```

Abra el archivo index.html. Busque la línea <h4>Welcome <span id="userName"></span></h4> y agregue el siguiente código inmediatamente después de ella:

<div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

En el mismo archivo index.html, busque la etiqueta <head>. Agregue el código siguiente para aplicar estilo al elemento de imagen que agregó en el paso anterior:
```
<style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>
```
Guarde el archivo index.html.
Abra el archivo graph.js. Agregue una nueva función denominada getUserPhoto() al archivo, como se muestra en el código siguiente. Esta función obtendrá la foto del usuario que ha iniciado sesión mediante el punto de conexión /me/photo/$value de la API de Microsoft Graph.
```
async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}
```
Guarde el archivo graph.js.

Abra el archivo ui.js y agregue una nueva función denominada displayProfilePhoto() como se muestra en el código siguiente. Esta función mostrará la respuesta de imagen recibida de Microsoft Graph en el elemento de imagen que creó anteriormente.

async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

Abra el archivo ui.js y agregue el código siguiente al final de la función displayUI() existente. Este código mostrará un botón que un usuario que ha iniciado sesión puede seleccionar para ver su foto de perfil. El botón permanecerá oculto si el usuario no ha iniciado sesión.
```
var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";
```

Ahora que agregó las funciones adicionales y los fragmentos de código para obtener la foto de un usuario que inició sesión, el siguiente paso es ejecutar la aplicación.

Ejecutar la aplicación

Ahora ha ampliado la aplicación para mostrar algunos de los archivos del usuario mediante Microsoft Graph. Asegúrese de que haya algunos archivos en la carpeta raíz de la instancia del usuario de OneDrive y, a continuación, ejecute la aplicación localmente.

Ejecute el siguiente comando en el terminal para obtener una vista previa de la aplicación web:
```
npm start
```
El explorador debe apuntar a http://localhost:8080.
Seleccione el botón Iniciar sesión con Microsoft para iniciar sesión con su cuenta de Microsoft 365. Asegúrese de que la cuenta con la que inicia sesión tiene una foto de perfil.
Inicie sesión con una cuenta en el mismo inquilino para desarrolladores de Microsoft 365 donde registró la aplicación Microsoft Entra.
Una vez que haya iniciado sesión correctamente, confirme que aparecen un mensaje de bienvenida y un botón para mostrar una foto de perfil.
Seleccione el botón Mostrar imagen de perfil. Aparece la imagen de perfil del usuario que inició sesión. Si el perfil no tiene una foto asociada, no se mostrará ninguna foto.

Ejercicio: Usar Microsoft Graph en la aplicación web para recuperar la foto de perfil de un usuario

Configuración de la aplicación

Ejecutar la aplicación

Comentarios