Datos de la organización: inicio de sesión de un usuario y obtención de un token de acceso

2025-06-13

Los usuarios deben autenticarse con el identificador de Entra de Microsoft para que Microsoft Graph acceda a los datos de la organización. En este ejercicio, verá cómo se puede usar el componente del mgt-login Kit de herramientas de Microsoft Graph para autenticar a los usuarios y recuperar un token de acceso. A continuación, el token de acceso se puede usar para realizar llamadas a Microsoft Graph.

Nota:

Si no está familiarizado con Microsoft Graph, puede obtener más información sobre ella en la ruta de aprendizaje Aspectos básicos de Microsoft Graph .

En este ejercicio, aprenderá a:

Obtenga información sobre cómo asociar una aplicación de id. de Entra de Microsoft con el Kit de herramientas de Microsoft Graph para autenticar a los usuarios y recuperar datos de la organización.
Obtenga información sobre la importancia de los ámbitos.
Obtenga información sobre cómo se puede usar el componente mgt-login del Kit de herramientas de Microsoft Graph para autenticar a los usuarios y recuperar un token de acceso.

En el ejercicio anterior, ha creado un registro de aplicación en microsoft Entra ID e inició el servidor de aplicaciones y el servidor de API. También ha actualizado los siguientes valores en el .env archivo (TEAM_ID y CHANNEL_ID son opcionales):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Asegúrese de que ha completado el ejercicio anterior antes de continuar.
Vuelva al explorador (http://localhost:4200), seleccione Iniciar sesión en el encabezado e inicie sesión con una cuenta de usuario administrador del inquilino de Microsoft 365 Developer.

Sugerencia

Inicie sesión con su cuenta de administrador de inquilino de desarrollador de Microsoft 365. Puede ver otros usuarios en el inquilino del desarrollador si va al Centro de administración de Microsoft 365.
Si inicia sesión en la aplicación por primera vez, se le pedirá que dé su consentimiento a los permisos solicitados por la aplicación. Obtendrá más información sobre estos permisos (también denominados "ámbitos") en la sección siguiente mientras explora el código. Seleccione Aceptar para continuar.
Una vez que haya iniciado sesión, debería ver el nombre del usuario mostrado en el encabezado.

Ahora que ha iniciado sesión, echemos un vistazo al código que se usa para iniciar sesión en el usuario y recuperar un token de acceso y un perfil de usuario. Obtendrá información sobre el componente web mgt-login que forma parte del Kit de herramientas de Microsoft Graph.

Sugerencia

Si usa Visual Studio Code, puede abrir archivos directamente seleccionando:

Windows/Linux: Ctrl + P
Mac: Cmd + P

A continuación, escriba el nombre del archivo que desea abrir.

Abra el cliente opackage.json y observe que los @microsoft/mgt paquetes y @microsoft/mgt-components se incluyen en las dependencias. El @microsoft/mgt paquete contiene características del proveedor msAL (biblioteca de autenticación de Microsoft) y componentes web, como mgt-login y otros que se pueden usar para iniciar sesión a los usuarios y recuperar y mostrar datos de la organización.
Abra client/src/main.ts y observe las siguientes importaciones del @microsoft/mgt-components paquete. Los símbolos importados se usan para registrar los componentes del Kit de herramientas de Microsoft Graph que se usan en la aplicación.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Desplácese hasta la parte inferior del archivo y anote el código siguiente:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Este código registra los mgt-logincomponentes web , mgt-search-resultsy mgt-person y los habilita para su uso en la aplicación.
Para usar el componente mgt-login para iniciar sesión en los usuarios, es necesario hacer referencia al identificador de cliente de la aplicación de id. de microsoft Entra (almacenado en el archivo .env como ENTRAID_CLIENT_ID) y usarse.
Abra graph.service.ts y busque la init() función . La ruta de acceso completa al archivo es client/src/app/core/graph.service.ts. Verá la siguiente importación y código:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Este código crea un nuevo Msal2Provider objeto, pasando el identificador de cliente de Id. de Entra de Microsoft desde el registro de la aplicación y el para el scopes que la aplicación solicitará acceso. scopes se usan para solicitar acceso a los recursos de Microsoft Graph a los que accederá la aplicación. Una vez creado el Msal2Provider objeto, se asigna al Providers.globalProvider objeto , que los componentes del Kit de herramientas de Microsoft Graph usan para recuperar datos de Microsoft Graph.
Abra header.component.html en el editor y busque el componente mgt-login . La ruta de acceso completa al archivo es client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
El componente mgt-login habilita el inicio de sesión del usuario y proporciona acceso a un token que se usa con Microsoft Graph. Tras iniciar sesión correctamente, se desencadena el loginCompleted evento , que llama a la loginCompleted() función . Aunque mgt-login se usa dentro de un componente de Angular en este ejemplo, es compatible con cualquier aplicación web.

La presentación del componente mgt-login depende del featureFlags.microsoft365Enabled valor que se establece trueen . Esta marca personalizada comprueba la presencia de la ENTRAID_CLIENT_ID variable de entorno para confirmar que la aplicación está configurada correctamente y puede autenticarse en el identificador de Microsoft Entra. La marca se agrega para dar cabida a los casos en los que los usuarios eligen completar solo los ejercicios de inteligencia artificial o comunicación en el tutorial, en lugar de seguir toda la secuencia de ejercicios.
Abra header.component.ts y busque la loginCompleted función . Se llama a esta función cuando se emite el loginCompleted evento y controla la recuperación del perfil del usuario que ha iniciado sesión mediante Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
En este ejemplo, se realiza una llamada a Microsoft Graph me API para recuperar el perfil del usuario (me representa el usuario que inició sesión actual). La this.userLoggedIn.emit(me) instrucción de código emite un evento del componente para pasar los datos de perfil al componente primario. El componente primario es app.component.ts archivo en este caso, que es el componente raíz de la aplicación.

Para obtener más información sobre el componente mgt-login , visite la documentación del Kit de herramientas de Microsoft Graph .
Ahora que ha iniciado sesión en la aplicación, veamos cómo se pueden recuperar los datos de la organización.

Paso siguiente

Datos de la organización: recuperar archivos, chats y enviar mensajes a Teams

Compartir a través de

Datos de la organización: inicio de sesión de un usuario y obtención de un token de acceso

Uso de la característica de inicio de sesión

Exploración del código de inicio de sesión

Paso siguiente

Comentarios

Recursos adicionales