Adición de autenticación de usuario a aplicaciones de TypeScript para Microsoft Graph

En este artículo, agregará la autenticación de usuario a la aplicación que creó en Compilación de aplicaciones typeScript con Microsoft Graph. A continuación, use la API de usuario de Microsoft Graph para obtener el usuario autenticado.

Agregar autenticación de usuario

La biblioteca cliente de Azure Identity para JavaScript proporciona muchas TokenCredential clases que implementan flujos de token de OAuth2. La biblioteca cliente de JavaScript de Microsoft Graph usa esas clases para autenticar llamadas a Microsoft Graph.

Configuración del cliente de Graph para la autenticación de usuario

Empiece por usar la DeviceCodeCredential clase para solicitar un token de acceso mediante el flujo de código del dispositivo.

1. Abra graphHelper.ts y reemplace su contenido por lo siguiente.

   import 'isomorphic-fetch';
   import {
     DeviceCodeCredential,
     DeviceCodePromptCallback,
   } from '@azure/identity';
   import { Client, PageCollection } from '@microsoft/microsoft-graph-client';
   import { User, Message } from '@microsoft/microsoft-graph-types';
   // prettier-ignore
   import { TokenCredentialAuthenticationProvider } from
     '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';
   
   import { AppSettings } from './appSettings.js';
   
   let _settings: AppSettings | undefined = undefined;
   let _deviceCodeCredential: DeviceCodeCredential | undefined = undefined;
   let _userClient: Client | undefined = undefined;
   
   export function initializeGraphForUserAuth(
     settings: AppSettings,
     deviceCodePrompt: DeviceCodePromptCallback,
   ) {
     // Ensure settings isn't null
     if (!settings) {
       throw new Error('Settings cannot be undefined');
     }
   
     _settings = settings;
   
     _deviceCodeCredential = new DeviceCodeCredential({
       clientId: settings.clientId,
       tenantId: settings.tenantId,
       userPromptCallback: deviceCodePrompt,
     });
   
     const authProvider = new TokenCredentialAuthenticationProvider(
       _deviceCodeCredential,
       {
         scopes: settings.graphUserScopes,
       },
     );
   
     _userClient = Client.initWithMiddleware({
       authProvider: authProvider,
     });
   }
   

2. Reemplace la función vacía initializeGraph de index.ts por lo siguiente.

   function initializeGraph(settings: AppSettings) {
     graphHelper.initializeGraphForUserAuth(settings, (info: DeviceCodeInfo) => {
       // Display the device code message to
       // the user. This tells them
       // where to go to sign in and provides the
       // code to use.
       console.log(info.message);
     });
   }
   

Este código declara dos propiedades privadas, un DeviceCodeCredential objeto y un Client objeto . La initializeGraphForUserAuth función crea una nueva instancia de DeviceCodeCredentialy, a continuación, usa esa instancia para crear una nueva instancia de Client. Cada vez que se realiza una llamada API a Microsoft Graph a través de _userClient, usa la credencial proporcionada para obtener un token de acceso.

Prueba de DeviceCodeCredential

A continuación, agregue código para obtener un token de acceso de DeviceCodeCredential.

1. Agregue la siguiente función a graphHelper.ts.

   export async function getUserTokenAsync(): Promise<string> {
     // Ensure credential isn't undefined
     if (!_deviceCodeCredential) {
       throw new Error('Graph has not been initialized for user auth');
     }
   
     // Ensure scopes isn't undefined
     if (!_settings?.graphUserScopes) {
       throw new Error('Setting "scopes" cannot be undefined');
     }
   
     // Request token with given scopes
     const response = await _deviceCodeCredential.getToken(
       _settings?.graphUserScopes,
     );
     return response.token;
   }
   

2. Reemplace la función vacía displayAccessTokenAsync de index.ts por lo siguiente.

   async function displayAccessTokenAsync() {
     try {
       const userToken = await graphHelper.getUserTokenAsync();
       console.log(`User token: ${userToken}`);
     } catch (err) {
       console.log(`Error getting user access token: ${err}`);
     }
   }
   

3. Ejecute el siguiente comando en la CLI en la raíz del proyecto.

   npx ts-node index.ts
   

4. Escriba 1 cuando se le solicite una opción. La aplicación muestra una dirección URL y un código de dispositivo.

   TypeScript Graph Tutorial
   
   [1] Display access token
   [2] List my inbox
   [3] Send mail
   [4] Make a Graph call
   [0] Exit
   
   Select an option [1...4 / 0]: 1
   To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
   enter the code RK987NX32 to authenticate.
   

5. Abra un explorador y vaya a la dirección URL que se muestra. Escriba el código proporcionado e inicie sesión.

   Importante

   Tenga en cuenta cualquier cuenta de Microsoft 365 existente que haya iniciado sesión en el explorador al navegar a https://microsoft.com/devicelogin. Use características del explorador como perfiles, modo invitado o modo privado para asegurarse de autenticarse como la cuenta que quiere usar para las pruebas.

6. Una vez completado, vuelva a la aplicación para ver el token de acceso.

   Sugerencia

   Solo con fines de validación y depuración, puede descodificar tokens de acceso de usuario (solo para cuentas profesionales o educativas) mediante el analizador de tokens en línea de Microsoft en https://jwt.ms. El análisis del token puede ser útil si se producen errores de token al llamar a Microsoft Graph. Por ejemplo, comprobar que la scp notificación del token contiene los ámbitos de permiso de Microsoft Graph esperados.

Obtener usuario

Ahora que la autenticación está configurada, puede realizar la primera llamada de Microsoft Graph API. Agregue código para obtener el nombre y la dirección de correo electrónico del usuario autenticado.

1. Abra graphHelper.ts y agregue la siguiente función.

   export async function getUserAsync(): Promise<User> {
     // Ensure client isn't undefined
     if (!_userClient) {
       throw new Error('Graph has not been initialized for user auth');
     }
   
     // Only request specific properties with .select()
     return _userClient
       .api('/me')
       .select(['displayName', 'mail', 'userPrincipalName'])
       .get();
   }
   

2. Reemplace la función vacía greetUserAsync de index.ts por lo siguiente.

   async function greetUserAsync() {
     try {
       const user = await graphHelper.getUserAsync();
       console.log(`Hello, ${user?.displayName}!`);
       // For Work/school accounts, email is in mail property
       // Personal accounts, email is in userPrincipalName
       console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
     } catch (err) {
       console.log(`Error getting user: ${err}`);
     }
   }
   

Si ejecuta la aplicación ahora, después de iniciar sesión, le da la bienvenida por su nombre.

Hello, Megan Bowen!
Email: MeganB@contoso.com

Código explicado

Tenga en cuenta el código de la getUserAsync función . Son solo unas pocas líneas, pero hay algunos detalles clave que debe tener en cuenta.

Acceso a 'me'

La función pasa /me al _userClient.api generador de solicitudes, que compila una solicitud a la API Get user . Esta API es accesible de dos maneras:

GET /me
GET /users/{user-id}

En este caso, el código llama al punto de conexión de API GET /me . Este punto de conexión es un método abreviado para obtener el usuario autenticado sin conocer su identificador de usuario.

Solicitud de propiedades específicas

La función usa el select método en la solicitud para especificar el conjunto de propiedades que necesita. Este método agrega el parámetro de consulta $select a la llamada API.

Tipo de valor devuelto fuertemente tipado

La función devuelve un User objeto deserializado a partir de la respuesta JSON de la API. Dado que el código usa select, solo las propiedades solicitadas tienen valores en el objeto devuelto User . Todas las demás propiedades tienen valores predeterminados.

Paso siguiente