Llamadas de audio y vídeo desde una aplicación personalizada a una reunión de Teams

1. samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Abra en Visual Studio o abra la carpeta GraphACSFunctions en Visual Studio Code.

2. Vaya al GraphACSFunctions proyecto y cree un local.settings.json archivo con los siguientes valores:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Use los valores que copió en el archivo local de un ejercicio anterior para actualizar los TENANT_IDvalores y CLIENT_SECRET CLIENT_ID .
   • Defina USER_ID con el identificador de usuario que desea crear una reunión de Microsoft Teams.

   Puede obtener el identificador de usuario de Azure Portal.

   • Inicie sesión con su cuenta de administrador de inquilinos de desarrollador de Microsoft 365.
   • Seleccione Microsoft Entra ID
   • Vaya a la pestaña Usuarios de la barra lateral.
   • Busque el nombre de usuario y selecciónelo para ver los detalles del usuario.
   • Dentro de los detalles del usuario, Object ID representa .User ID Copie el Object ID valor y úselo para el USER_ID valor de local.settings.json.

   

   Nota:

   ACS_CONNECTION_STRING se usará en el ejercicio siguiente, por lo que aún no es necesario actualizarlo.

3. Abra GraphACSFunctions.sln ubicado en la carpeta acs-to-teams-meeting/server/csharp y tenga en cuenta que incluye los siguientes paquetes de Microsoft Graph e Identidad:

   <PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
   <PackageReference Include="Azure.Identity" Version="1.11.2" />
   <PackageReference Include="Microsoft.Graph" Version="5.51.0" />
   

4. Vaya a Program.cs y anote el código siguiente en el ConfigureServices método :

       var host = new HostBuilder()
           .ConfigureFunctionsWebApplication()
           .ConfigureServices(services => {
               services.AddApplicationInsightsTelemetryWorkerService();
               services.ConfigureFunctionsApplicationInsights();
               services.AddSingleton(static p =>
               {
                   var config = p.GetRequiredService<IConfiguration>();
                   var clientSecretCredential = new ClientSecretCredential(
                       config.GetValue<string>("TENANT_ID"),
                       config.GetValue<string>("CLIENT_ID"),
                       config.GetValue<string>("CLIENT_SECRET")
                   );
   
                   return new GraphServiceClient(
                       clientSecretCredential,
                       ["https://graph.microsoft.com/.default"]
                   );
               });
   
               ...
   
               services.AddSingleton<IGraphService, GraphService>();
           })
           .Build();
   }
   

   • Este código crea un GraphServiceClient objeto que se puede usar para llamar a Microsoft Graph desde Azure Functions. Es un singleton y se puede insertar en otras clases.
   • Puede realizar llamadas api de Microsoft Graph con permisos de solo aplicación (como Calendars.ReadWrite) pasando un ClientSecretCredential valor al GraphServiceClient constructor. ClientSecretCredential usa los Tenant Idvalores , Client Id y Client Secret de la aplicación Microsoft Entra ID.

5. Abra Servicios/GraphService.cs.

6. Dedique un momento a explorar el CreateMeetingEventAsync método :

   using System;
   using System.Threading.Tasks;
   using Microsoft.Graph;
   using Microsoft.Extensions.Configuration;
   
   namespace GraphACSFunctions.Services;
   
   public class GraphService : IGraphService
   {
       private readonly GraphServiceClient _graphServiceClient;
       private readonly IConfiguration _configuration;
   
       public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
       {
           _graphServiceClient = graphServiceClient;
           _configuration = configuration;
       }
   
       public async Task<string> CreateMeetingAsync()
       {
           var userId = _configuration.GetValue<string>("USER_ID");
           var newMeeting = await _graphServiceClient
               .Users[userId]
               .Calendar
               .Events
               .PostAsync(new()
               {
                   Subject = "Customer Service Meeting",
                   Start = new()
                   {
                       DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   End = new()
                   {
                       DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   IsOnlineMeeting = true
               });
           return newMeeting.OnlineMeeting.JoinUrl;
       }
   }
   

   • GraphServiceClient y IConfiguration los objetos se insertan en el constructor y se asignan a los campos.
   • La CreateMeetingAsync() función envía datos a la API de eventos de calendario de Microsoft Graph, que crea dinámicamente un evento en el calendario de un usuario y devuelve la dirección URL de combinación.

7. Abra TeamsMeetingFunctions.cs y dedique un momento a examinar su constructor. El GraphServiceClient objeto que miró anteriormente se inserta y se asigna al _graphService campo.

   private readonly IGraphService _graphService;
   
   public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
   

8. Busque el Run método :

   [Function("HttpTriggerTeamsUrl")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
       return response;
   }
   

   • Define un nombre de función de HttpTriggerTeamsUrl al que se puede llamar con una solicitud HTTP GET.
   • Llama a _graphService.CreateMeetingAsync(), que crea un nuevo evento y devuelve la dirección URL de combinación.

9. Ejecute el programa presionando F5 en Visual Studio o seleccionando Depurar -> Iniciar depuración en el menú. Esta acción inicia el proyecto de Azure Functions y hace que esté ACSTokenFunction disponible para llamar a .

1. Abra la carpeta del proyecto samples/acs-to-teams-meeting/server/typescript en Visual Studio Code.

2. Cree un archivo local.settings.json con los siguientes valores:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "node",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Use los valores que copió en el archivo local de un ejercicio anterior para actualizar los TENANT_IDvalores y CLIENT_SECRET CLIENT_ID .
   • Defina USER_ID con el identificador de usuario que desea crear una reunión de Microsoft Teams.

   Puede obtener el identificador de usuario de Azure Portal.

   • Inicie sesión con su cuenta de administrador de inquilinos de desarrollador de Microsoft 365.
   • Seleccione Microsoft Entra ID(Id. de Entra de Microsoft),
   • Vaya a la pestaña Usuarios de la barra lateral.
   • Busque el nombre de usuario y selecciónelo para ver los detalles del usuario.
   • Dentro de los detalles del usuario, Object ID representa .User ID Copie el Object ID valor y úselo para el USER_ID valor de local.settings.json.

   

   Nota:

   ACS_CONNECTION_STRING se usará en el ejercicio siguiente, por lo que aún no es necesario actualizarlo.

3. Abra el archivo package.json en VS Code y tenga en cuenta que se incluyen los siguientes paquetes de Microsoft Graph e Identidad:

   @azure/communication-identity
   @azure/identity
   @microsoft/microsoft-graph-client
   

4. Abra una ventana de terminal en la carpeta typescript y ejecute el npm install comando para instalar las dependencias de la aplicación.

5. Abra Shared/graph.ts y dedique un momento a explorar las importaciones en la parte superior del archivo. Este código controla la importación de símbolos de cliente y autenticación que se usan en la función de Azure para llamar a Microsoft Graph.

   import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
   import { ClientSecretCredential } from '@azure/identity';
   import { Client } from '@microsoft/microsoft-graph-client';
   import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
   import 'isomorphic-fetch';
   

   Sugerencia

   También verá las importaciones de dateTimeFormat.ts que se usan más adelante en este ejercicio. startDateTimeAsync y endDateTimeAsync se usan al crear un vínculo de reunión de Microsoft Teams para definir la fecha de inicio y la fecha de finalización de la reunión.

6. Dedique un momento a examinar clientSecretCredential y appGraphClient. Se usarán más adelante en el proceso de autenticación y al llamar a Microsoft Graph API:

   let clientSecretCredential;
   let appGraphClient;
   

7. Busque la ensureGraphForAppOnlyAuth función :

   • ClientSecretCredential usa los Tenant Idvalores , Client Id y Client Secret de la aplicación Microsoft Entra ID.
   • El authProvider objeto se define como una aplicación de id. de Entra de Microsoft que se autenticará en segundo plano y usará permisos de solo aplicación (como Calendars.ReadWrite) para realizar llamadas api de Microsoft Graph.

   function ensureGraphForAppOnlyAuth() {
       if (!clientSecretCredential) {
           clientSecretCredential = new ClientSecretCredential(
               process.env.TENANT_ID,
               process.env.CLIENT_ID,
               process.env.CLIENT_SECRET
           );
       }
   
       if (!appGraphClient) {
           const authProvider = new TokenCredentialAuthenticationProvider(
           clientSecretCredential, {
               scopes: [ 'https://graph.microsoft.com/.default' ]
           });
   
           appGraphClient = Client.initWithMiddleware({
               authProvider: authProvider
           });
       }
   }
   

8. Dedique un momento a explorar la createNewMeetingAsync función. Envía datos a la API de eventos de calendario de Microsoft Graph, que crea dinámicamente un evento en el calendario de un usuario y devuelve los nuevos detalles del evento:

   async function createNewMeetingAsync(userId) {
       ensureGraphForAppOnlyAuth();
       let startTime = await startDateTimeAsync();
       let endTime = await endDateTimeAsync();
       const newMeeting = `/users/${userId}/calendar/events`;
   
       const event = {
       subject: 'Customer Service Meeting',
       start: {
           dateTime: startTime,
           timeZone: 'UTC'
       },
       end: {
           dateTime: endTime,
           timeZone: 'UTC'
       },
       isOnlineMeeting: true
       };
   
       const newEvent = await appGraphClient.api(newMeeting).post(event);    
       return newEvent;     
   }
   
   export default createNewMeetingAsync;
   

9. Vaya a server/typescript/src/functions/httpTriggerTeamsUrl.ts y explore la función Desencadenador Http:

   • createNewMeetingAsync se importa desde graph.ts. Controla la creación y recuperación de nuevos detalles del evento.
   • userIdse recupera de local.settings.json dentro de la función Desencadenador Http. Esta recuperación se realiza mediante el acceso a la USER_ID variable de entorno mediante process.env.USER_ID.
   • Cuando se desencadena la función, llama a createNewMeetingAsync con el identificador de usuario definido y devuelve los nuevos detalles del evento en teamMeetingLink el parámetro .
   • La función accede a la dirección URL de unión a la reunión de Teams llamando meeting.onlineMeeting.joinUrl a y devuelve el valor en el cuerpo de la respuesta.

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import createNewMeetingAsync from '../../Shared/graph';
   
   let teamsMeetingLink;
   
   export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       context.log("Request received");
       const userId = process.env.USER_ID;
       context.log('UserId', userId);
   
       teamsMeetingLink = await createNewMeetingAsync(userId);
       const body = JSON.stringify(teamsMeetingLink);
       const meeting = JSON.parse(body);
       context.log("meeting:", meeting);
   
       return {
           // status: 200, /* Defaults to 200 */
           body: meeting.onlineMeeting.joinUrl
       }    
   };
   
   app.http('httpTriggerTeamsUrl', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerTeamsUrl
   });
   
   export default httpTriggerTeamsUrl;
   

10. Use una ventana de terminal para ejecutarse npm start en la carpeta samples/acs-video-to-teams-meeting/server/typescript para ejecutar la función localmente.

1. Abra local.settings.json y actualice el ACS_CONNECTION_STRING valor con el cadena de conexión de ACS que guardó en un ejercicio anterior.

2. Abra Startup.cs en Visual Studio y explore la segunda AddSingleton() llamada en el ConfigureServices() método .

   var host = new HostBuilder()
       .ConfigureFunctionsWebApplication()
       .ConfigureServices(services => {
   
           ...
   
           services.AddSingleton(static p =>
           {
               var config = p.GetRequiredService<IConfiguration>();
               var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
               return new CommunicationIdentityClient(connectionString);
           });
   
           ...
   
       })
       .Build();
   }
   

3. La AddSingleton() llamada crea un CommunicationIdentityClient objeto mediante el ACS_CONNECTION_STRING valor de local.settings.json.

4. Abra ACSTokenFunction.cs y busque las definiciones de constructor y campo.

   • Se define un campo denominado Scopes que incluye el CommunicationTokenScope.VoIP ámbito. Este ámbito se usa para crear el token de acceso para la llamada de vídeo.

     private static readonly CommunicationTokenScope[] Scopes =
     [
         CommunicationTokenScope.VoIP,
     ];
     

   • La CommunicationIdentityClient instancia singleton creada en Startup.cs se inserta en el constructor y se asigna al _tokenClient campo.

     private readonly CommunicationIdentityClient _tokenClient;
     
     public ACSTokenFunction(CommunicationIdentityClient tokenClient)
     {
         _tokenClient = tokenClient;
     }
     

5. Explore el Run() método en ACSTokenFunction.cs:

   [Function("HttpTriggerAcsToken")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var user = await _tokenClient.CreateUserAsync();
       var userToken = await _tokenClient.GetTokenAsync(user, Scopes);
   
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteAsJsonAsync(
           new
           {
               userId = user.Value.Id,
               userToken.Value.Token,
               userToken.Value.ExpiresOn
           }
       );
       return response;
   }
   

   • Define una función denominada de HttpTriggerAcsToken que se puede llamar con una solicitud HTTP GET.
   • Se crea un nuevo usuario de ACS llamando al _tokenClient.CreateUserAsync() método .
   • Se crea un token de acceso que se usa para las videollamadas mediante una llamada al _tokenClient. GetTokenAsync() método .
   • El identificador de usuario y el token se devuelven de la función como un objeto JSON.

6. Ejecute el programa presionando F5 en Visual Studio o seleccionando Depurar -> Iniciar depuración en el menú. Esto iniciará el proyecto de Azure Functions y hará que esté ACSTokenFunction disponible para llamar a .

   Nota:

   Si usa VS Code, puede abrir una ventana de terminal en la carpeta GraphACSFunctions y ejecutar func start. Esto supone que tiene instaladas las herramientas principales de Azure Functions en el equipo.

7. Ahora que Azure Functions se ejecuta localmente, el cliente debe poder llamar a ellos para obtener los valores de token e identidad de usuario de ACS.

8. Abra el archivo samples/acs-to-teams-meeting/client/react/App.tsx en el editor.

9. Busque las userId variables de estado y token en el componente. Quite los valores codificados de forma rígida y reemplácelos por comillas vacías:

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

10. Busque la useEffect función y cámbiela para que tenga el siguiente aspecto para habilitar la llamada a la función de Azure para recuperar una identidad de usuario y un token de ACS:

    useEffect(() => {
        const init = async () => {
            setMessage('Getting ACS user');
            //Call Azure Function to get the ACS user identity and token
            let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
            let user = await res.json();
            setUserId(user.userId);
            setToken(user.token);
    
            setMessage('Getting Teams meeting link...');
            //Call Azure Function to get the meeting link
            res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
            let link = await res.text();
            setTeamsMeetingLink(link);
            setMessage('');
            console.log('Teams meeting link', link);
        }
        init();
    
    }, []);
    

11. Guarde el archivo antes de continuar.

12. Abra una ventana de terminal y ejecute npm start en la react carpeta . Después de compilar y cargar, debería ver que se muestra la interfaz de usuario de llamada de ACS y puede llamar a la reunión de Teams creada dinámicamente por Microsoft Graph.

13. Detenga la aplicación React presionando Ctrl + C en la ventana del terminal.

14. Detenga el proyecto de Azure Functions.

15. Confirme los cambios de Git e insértelos en el repositorio de GitHub mediante Visual Studio Code:

    • Seleccione el icono control de código fuente (uno abajo en la barra de herramientas de Visual Studio Code).
    • Escriba un mensaje de confirmación y seleccione Confirmar.
    • Seleccione Sincronizar cambios.

1. Abra local.settings.json y actualice el ACS_CONNECTION_STRING valor con el cadena de conexión de ACS que guardó en un ejercicio anterior.

2. Abra server/typescript/src/functions/httpTriggerAcsToken.ts en Visual Studio Code. Tiene el código siguiente:

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       // Get ACS connection string from local.settings.json (or App Settings when in Azure)
       const connectionString = process.env.ACS_CONNECTION_STRING;
       let tokenClient = new CommunicationIdentityClient(connectionString);
       const user = await tokenClient.createUser();
       const userToken = await tokenClient.getToken(user, ["voip"]);
       return {
           jsonBody: { userId: user.communicationUserId, ...userToken }
       };
   }
   
   app.http('httpTriggerAcsToken', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerAcsToken
   });
   
   export default httpTriggerAcsToken;
   

3. La función realiza las siguientes tareas:

   • Importa CommunicationIdentityClient que se usará para crear la identidad y el token de usuario.

     import { CommunicationIdentityClient } from '@azure/communication-identity';
     

   • Obtiene el cadena de conexión de ACS de una variable de entorno denominada ACS_CONNECTION_STRING.

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Nota:

   Este es el valor cadena de conexión que agregó anteriormente al archivo local.settings.json.

   • Crea una nueva CommunicationIdentityClient instancia y pasa el cadena de conexión de ACS.

     let tokenClient = new CommunicationIdentityClient(connectionString);
     

   • Crea un usuario de ACS y obtiene un token de Voz sobre IP.

     const user = await tokenClient.createUser();
     const userToken = await tokenClient.getToken(user, ["voip"]);
     

   • Devuelve los valores userId y token al autor de la llamada.

     return {
         jsonBody: { userId: user.communicationUserId, ...userToken }
     };
     

4. Vaya a la carpeta server/typescript en una ventana de terminal y ejecute npm start.

5. Ahora que Azure Functions se ejecuta localmente, el cliente debe poder llamar a ellos para obtener los valores de token e identidad de usuario de ACS.

6. Abra el archivo client/react/App.tsx en el editor.

7. Busque las userId variables de estado y token en el componente. Quite los valores codificados de forma rígida y reemplácelos por comillas vacías:

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

8. Busque la useEffect función y cámbiela para que tenga el siguiente aspecto para habilitar la llamada a la función de Azure para recuperar una identidad de usuario y un token de ACS:

   useEffect(() => {
       const init = async () => {
           setMessage('Getting ACS user');
           //Call Azure Function to get the ACS user identity and token
           let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
           let user = await res.json();
           setUserId(user.userId);
           setToken(user.token);
   
           setMessage('Getting Teams meeting link...');
           //Call Azure Function to get the meeting link
           res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
           let link = await res.text();
           setTeamsMeetingLink(link);
           setMessage('');
           console.log('Teams meeting link', link);
       }
       init();
   
   }, []);
   

9. Guarde el archivo antes de continuar.

10. Abra un terminal independiente y ejecute npm start en la carpeta react . Después de compilar y cargar, debería ver que se muestra la interfaz de usuario de llamada de ACS y puede llamar a la reunión de Teams creada dinámicamente por Microsoft Graph.

11. Detenga ambos procesos de terminal (React y Azure Functions) seleccionando Ctrl + C.

12. Confirme los cambios de Git e insértelos en el repositorio de GitHub mediante Visual Studio Code:

    • Seleccione el icono control de código fuente (uno abajo en la barra de herramientas de Visual Studio Code).
    • Escriba un mensaje de confirmación y seleccione Confirmar.
    • Seleccione Sincronizar cambios.

1. Abra el samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln proyecto en Visual Studio.

2. Haga clic con el botón derecho en el GraphACSFunctions proyecto y seleccione Publicar.

3. Seleccione Azure en la sección de destino y haga clic en Siguiente.

4. Seleccione Aplicación de funciones de Azure (Windows) y haga clic en Siguiente.

5. Seleccione la suscripción y, a continuación , seleccione + Crear nuevo.

6. Escriba la siguiente información:

   • Nombre de función: se requiere un nombre único global. Ejemplo: acsFunctions<YOUR_LAST_NAME>.
   • Suscripción: seleccione su suscripción.
   • Grupo de recursos: seleccione un grupo de recursos que creó anteriormente en este tutorial o también puede crear uno nuevo.
   • Plan de hospedaje: plan de consumo.
   • Ubicación: seleccione la región en la que desea realizar la implementación.
   • Azure Storage: cree uno nuevo. (También puede seleccionar una cuenta de almacenamiento existente).
   • Azure Insights: cree uno nuevo. (También puede seleccionar una cuenta de almacenamiento existente).

   Nota:

   Se requiere un nombre único global. Puede hacer que el nombre sea más único agregando un número o su apellido al final del nombre.

7. Una vez creada la aplicación de funciones de Azure, verá una pantalla de confirmación. Asegúrese de que está seleccionada la opción Ejecutar desde el paquete y, a continuación, seleccione Finalizar.

8. Seleccione Publicar para implementar la función en Azure.

9. Una vez implementada la función en Azure, vaya a Azure Portal y seleccione la aplicación de funciones que ha creado.

10. Copie la dirección URL de la función que implementó. Usará el valor más adelante en este ejercicio.

11. Seleccione Configuración:> configuración en el menú de la izquierda.

12. Seleccione el botón + Nueva configuración de la aplicación y agregue las siguientes claves y valores en la configuración de la aplicación. Puede recuperar estos valores desde local.settings.json en el GraphACSFunctions proyecto.

    # Retrieve these values from local.settings.json
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. Seleccione el botón Guardar para guardar la configuración.

14. Por último, debe habilitar CORS (uso compartido de recursos entre orígenes) para que la aplicación de funciones pueda acceder a las API de la aplicación de funciones desde fuera del dominio. Seleccione Configuración:> CORS en el menú de la izquierda.

15. Escriba * (accesible desde cualquier dominio) en el cuadro de texto Orígenes permitidos y, a continuación, seleccione el botón Guardar .

Comencemos con VS Code para implementar el código de funciones en Azure Functions.

1. Abra la carpeta del proyecto server/typescript .

2. Ya debería haber ejecutado npm install y ver una carpeta node_modules en la raíz del proyecto. Si no es así, abra una ventana de comandos y ejecute npm install para instalar las dependencias.

3. Abra la paleta de comandos de VS Code (Mayús+Cmd+P en Mac | Mayús+Ctrl+P en Windows) y seleccione Azure Functions: Crear aplicación de funciones en Azure.

   

   Nota:

   Si no ve esta opción, asegúrese de que tiene instalada la extensión de Azure Functions en VS Code.

4. Se le pedirá que escriba la siguiente información:

   • El nombre de la suscripción de Azure.
   • El nombre de la función: acsFunctions<YOUR_LAST_NAME>.

   Nota:

   Se requiere un nombre único global. Puede hacer que el nombre sea más único agregando un número o su apellido al final del nombre.

   • Pila en tiempo de ejecución: seleccione la versión más reciente Node.js LTS .
   • La región (seleccione cualquier región que desee).

5. Una vez creada la aplicación de funciones de Azure, verá un mensaje sobre cómo ver los detalles.

6. Vuelva a la paleta de comandos en VS Code y seleccione Azure Functions: Implementar en Function App. Se le pedirá que seleccione la suscripción y el nombre de function App que creó anteriormente.

7. Una vez implementada la función en Azure, haga lo siguiente:

   • Seleccione la extensión de Azure en VS Code (haga clic en el icono de Azure en la barra lateral).
   • Expanda la suscripción.
   • Expanda la aplicación de funciones.
   • Haga clic con el botón derecho en la función y seleccione Examinar sitio web. Asegúrese de que la aplicación de funciones funciona correctamente antes de continuar.

8. Copie el dominio de Azure Function en un archivo local. Usará el valor más adelante en este ejercicio.