Datos de la organización: creación de un registro de aplicaciones de Microsoft Entra ID

Mejore la productividad del usuario mediante la integración de datos de la organización (correos electrónicos, archivos, chats y eventos de calendario) directamente en sus aplicaciones personalizadas. Mediante el uso de las API de Microsoft Graph y el identificador de Entra de Microsoft, puede recuperar y mostrar sin problemas los datos pertinentes dentro de las aplicaciones, lo que reduce la necesidad de que los usuarios cambien de contexto. Independientemente de si hace referencia a un correo electrónico enviado a un cliente, revisando un mensaje de Teams o accediendo a un archivo, los usuarios pueden encontrar rápidamente la información que necesitan sin salir de la aplicación, lo que simplifica su proceso de toma de decisiones.

En este ejercicio, aprenderá a:

• Cree un registro de aplicación de Id. de Microsoft Entra para que Microsoft Graph pueda acceder a los datos de la organización y incorporarlos a la aplicación.
• Busque team e channel ids de Microsoft Teams necesarios para enviar mensajes de chat a un canal específico.
• Actualice el archivo .env del proyecto con valores del registro de la aplicación microsoft Entra ID.

Creación de un registro de aplicaciones de Microsoft Entra ID

1. Vaya a Azure Portal y seleccione Microsoft Entra ID.

2. Seleccione Administrar registros de> aplicaciones seguidos de + Nuevo registro.

3. Rellene los detalles del nuevo formulario de registro de aplicaciones como se muestra a continuación y seleccione Registrar:

   • Nombre: microsoft-graph-app
   • Tipos de cuenta admitidos: cuentas en cualquier directorio organizativo (cualquier inquilino de Id. de Microsoft Entra: multiinquilino)
   • URI de redireccionamiento:
     • Seleccione Aplicación de página única (SPA) y escriba http://localhost:4200 en el campo URI de redirección .
   • Seleccione Registrar para crear el registro de aplicación.

   

1. Seleccione Información general en el menú de recursos y copie el valor en el Application (client) ID Portapapeles.

   

Actualizar el archivo .env del proyecto

1. Abra el archivo .env en el

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Si desea habilitar la capacidad de enviar un mensaje desde la aplicación a un canal de Teams, inicie sesión en Microsoft Teams con su cuenta de inquilino de desarrollo de Microsoft 365 (esto se menciona en las preguntas previas del tutorial).

3. Una vez que haya iniciado sesión, expanda un equipo y busque un canal al que quiera enviar mensajes desde la aplicación. Por ejemplo, puede seleccionar el equipo de empresa y el canal General (o cualquier equipo o canal que quiera usar).

   

4. En el encabezado del equipo, haga clic en los tres puntos (...) y seleccione Obtener vínculo al equipo.

5. En el vínculo que aparece en la ventana emergente, el identificador de equipo es la cadena de letras y números después team/de . Por ejemplo, en el vínculo "https://teams.microsoft.com/l/team/19%3ae9b9.../", el identificador de equipo es 19%3ae9b9... hasta el siguiente / carácter.

6. Copie el identificador de equipo y asígnelo a TEAM_ID en el archivo .env .

7. En el encabezado del canal, haga clic en los tres puntos (...) y seleccione Obtener vínculo al canal.

8. En el vínculo que aparece en la ventana emergente, el identificador de canal es la cadena de letras y números después channel/de . Por ejemplo, en el vínculo "https://teams.microsoft.com/l/channel/19%3aQK02.../", el identificador del canal es 19%3aQK02... hasta el siguiente / carácter.

9. Copie el identificador del canal y asígnelo a CHANNEL_ID en el archivo .env .

10. Guarde el archivo env antes de continuar.

Iniciar o reiniciar la aplicación y los servidores de API

Realice uno de los pasos siguientes en función de los ejercicios completados hasta este punto:

• Si inició la base de datos, el servidor de API y el servidor web en un ejercicio anterior, debe detener el servidor de API y el servidor web y reiniciarlos para seleccionar los cambios del archivo .env . Puede dejar la base de datos en ejecución.

  Busque las ventanas de terminal que ejecutan el servidor de API y el servidor web y presione CTRL + C para detenerlas. Vuelva a iniciarlos escribiendo npm start en cada ventana de terminal y presionando Entrar. Continúe con el ejercicio siguiente.

• Si aún no ha iniciado la base de datos, el servidor de API y el servidor web, complete los pasos siguientes:

  1. En los pasos siguientes, creará tres ventanas de terminal en Visual Studio Code.

     

  2. Haga clic con el botón derecho en el archivo .env de la lista de archivos de Visual Studio Code y seleccione Abrir en terminal integrado. Asegúrese de que el terminal está en la raíz del proyecto - openai-acs-msgraph - antes de continuar.

  3. Elija una de las siguientes opciones para iniciar la base de datos postgreSQL:

     • Si tiene Docker Desktop instalado y en ejecución, ejecute docker-compose up en la ventana del terminal y presione Entrar.

     • Si tiene Podman con podman-compose instalado y en ejecución, ejecute podman-compose up en la ventana del terminal y presione Entrar.

     • Para ejecutar el contenedor de PostgreSQL directamente mediante Docker Desktop, Podman, nerdctl u otro entorno de ejecución de contenedor que haya instalado, ejecute el siguiente comando en la ventana del terminal:

       • Mac, Linux o Subsistema de Windows para Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows con PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Una vez que se inicia el contenedor de base de datos, presione el + icono de la barra de herramientas del terminal de Visual Studio Code para crear una segunda ventana de terminal.

     

  5. cd en la carpeta server/typescript y ejecute los siguientes comandos para instalar las dependencias e iniciar el servidor de API.

     • npm install
     • npm start

  6. Presione de nuevo el + icono en la barra de herramientas del terminal de Visual Studio Code para crear una tercera ventana de terminal.

  7. cd en la carpeta cliente y ejecute los siguientes comandos para instalar las dependencias e iniciar el servidor web.

     • npm install
     • npm start

  8. Se iniciará un explorador y se le llevará a http://localhost:4200.

     

Paso siguiente