Chiamate audio/video da un'app personalizzata a una riunione di Teams

1. samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Aprire in Visual Studio o aprire la cartella GraphACSFunctions in Visual Studio Code.

2. Passare al GraphACSFunctions progetto e creare un local.settings.json file con i valori seguenti:

   {
       "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"
       ]
   }
   

   • Usare i valori copiati nel file locale in un esercizio precedente per aggiornare i TENANT_IDvalori e CLIENT_ID CLIENT_SECRET .
   • Definire USER_ID con l'ID utente che si vuole creare una riunione di Microsoft Teams.

   È possibile ottenere l'ID utente dal portale di Azure.

   • Accedere con l'account amministratore del tenant per sviluppatori di Microsoft 365.
   • Seleziona Microsoft Entra ID
   • Passare alla scheda Utenti sulla barra laterale.
   • Cercare il nome utente e selezionarlo per visualizzare i dettagli dell'utente.
   • All'interno dei dettagli dell'utente rappresenta Object ID l'oggetto User ID. Copiare il Object ID valore e usarlo per il USER_ID valore in local.settings.json.

   

   Nota

   ACS_CONNECTION_STRING verrà usato nell'esercizio successivo in modo che non sia necessario aggiornarlo ancora.

3. Aprire GraphACSFunctions.sln la cartella acs-to-teams-meeting/server/csharp e notare che include i pacchetti Microsoft Graph e Identity seguenti:

   <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. Passare a Program.cs e prendere nota del codice seguente nel ConfigureServices metodo :

       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();
   }
   

   • Questo codice crea un GraphServiceClient oggetto che può essere usato per chiamare Microsoft Graph da Funzioni di Azure. Si tratta di un singleton e può essere inserito in altre classi.
   • È possibile effettuare chiamate all'API Microsoft Graph con autorizzazioni solo app (ad esempio Calendars.ReadWrite) passando un ClientSecretCredential valore al GraphServiceClient costruttore. ClientSecretCredential usa i Tenant Idvalori e Client Id Client Secret dell'app Microsoft Entra ID.

5. Aprire Servizi/GraphService.cs.

6. Per esplorare il CreateMeetingEventAsync metodo, dedicare qualche istante:

   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 gli oggetti e IConfiguration vengono inseriti nel costruttore e assegnati ai campi.
   • La CreateMeetingAsync() funzione invia i dati all'API Eventi del calendario di Microsoft Graph, che crea dinamicamente un evento nel calendario di un utente e restituisce l'URL di join.

7. Aprire TeamsMeetingFunctions.cs ed esaminare il costruttore. L'oggetto GraphServiceClient esaminato in precedenza viene inserito e assegnato al _graphService campo.

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

8. Individuare il Run metodo :

   [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;
   }
   

   • Definisce un nome di HttpTriggerTeamsUrl funzione che può essere chiamato con una richiesta HTTP GET.
   • _graphService.CreateMeetingAsync()Chiama , che crea un nuovo evento e restituisce l'URL di join.

9. Eseguire il programma premendo F5 in Visual Studio o selezionando Debug -> Avvia debug dal menu. Questa azione avvia il progetto Funzioni di Azure e rende disponibile la ACSTokenFunction chiamata.

1. Aprire la cartella del progetto samples/acs-to-teams-meeting/server/typescript in Visual Studio Code.

2. Creare un file local.settings.json con i valori seguenti:

   {
       "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"
       ]
   }
   

   • Usare i valori copiati nel file locale in un esercizio precedente per aggiornare i TENANT_IDvalori e CLIENT_ID CLIENT_SECRET .
   • Definire USER_ID con l'ID utente che si vuole creare una riunione di Microsoft Teams.

   È possibile ottenere l'ID utente dal portale di Azure.

   • Accedere con l'account amministratore del tenant per sviluppatori di Microsoft 365.
   • Selezionare Microsoft Entra ID,
   • Passare alla scheda Utenti sulla barra laterale.
   • Cercare il nome utente e selezionarlo per visualizzare i dettagli dell'utente.
   • All'interno dei dettagli dell'utente rappresenta Object ID l'oggetto User ID. Copiare il Object ID valore e usarlo per il USER_ID valore in local.settings.json.

   

   Nota

   ACS_CONNECTION_STRING verrà usato nell'esercizio successivo in modo che non sia necessario aggiornarlo ancora.

3. Aprire il file package.json in VS Code e notare che sono inclusi i pacchetti Microsoft Graph e Identity seguenti:

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

4. Aprire una finestra del terminale nella cartella typescript ed eseguire il npm install comando per installare le dipendenze dell'applicazione.

5. Aprire Shared/graph.ts (Condivisi/graph.ts ) ed esaminare le importazioni nella parte superiore del file. Questo codice gestisce l'importazione di simboli di autenticazione e client usati nella funzione di Azure per chiamare 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';
   

   Suggerimento

   Verranno visualizzate anche le importazioni da dateTimeFormat.ts usate più avanti in questo esercizio. startDateTimeAsync e endDateTimeAsync vengono usati durante la creazione di un collegamento alla riunione di Microsoft Teams per definire la data di inizio e la data di fine per la riunione.

6. clientSecretCredential Esaminare e appGraphClient. Verranno usati più avanti nel processo di autenticazione e quando si chiama l'API Microsoft Graph:

   let clientSecretCredential;
   let appGraphClient;
   

7. Individuare la ensureGraphForAppOnlyAuth funzione :

   • ClientSecretCredential usa i Tenant Idvalori e Client Id Client Secret dell'app Microsoft Entra ID.
   • L'oggetto authProvider viene definito come un'app Microsoft Entra ID che esegue l'autenticazione in background e usa autorizzazioni solo app (ad esempio Calendars.ReadWrite) per effettuare chiamate all'API 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. Dedicare qualche istante all'esplorazione della createNewMeetingAsync funzione. Pubblica i dati nell'API Eventi del calendario di Microsoft Graph, che crea dinamicamente un evento nel calendario di un utente e restituisce i dettagli del nuovo 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. Passare a server/typescript/src/functions/httpTriggerTeamsUrl.ts ed esplorare la funzione Trigger HTTP:

   • createNewMeetingAsync viene importato da graph.ts. Gestisce la creazione e il recupero di nuovi dettagli dell'evento.
   • userId viene recuperato da local.settings.json all'interno della funzione Trigger HTTP. Questo recupero viene eseguito accedendo alla USER_ID variabile di ambiente usando process.env.USER_ID.
   • Quando la funzione viene attivata, chiama createNewMeetingAsync con l'ID utente definito e restituisce i nuovi dettagli dell'evento nel teamMeetingLink parametro .
   • La funzione accede all'URL di partecipazione alla riunione di Teams chiamando meeting.onlineMeeting.joinUrl e restituisce il valore nel corpo della risposta.

   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. Usare una finestra del terminale per l'esecuzione npm start nella cartella samples/acs-video-to-teams-meeting/server/typescript per eseguire la funzione in locale.

1. Aprire local.settings.json e aggiornare il ACS_CONNECTION_STRING valore con il stringa di connessione ACS salvato in un esercizio precedente.

2. Aprire Startup.cs in Visual Studio ed esplorare la seconda AddSingleton() chiamata nel ConfigureServices() metodo .

   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() chiamata crea un CommunicationIdentityClient oggetto utilizzando il ACS_CONNECTION_STRING valore di local.settings.json.

4. Aprire ACSTokenFunction.cs e individuare il costruttore e le definizioni dei campi.

   • Viene definito un campo denominato Scopes che include l'ambito CommunicationTokenScope.VoIP . Questo ambito viene usato per creare il token di accesso per la videochiamata.

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

   • L'istanza CommunicationIdentityClient singleton creata in Startup.cs viene inserita nel costruttore e assegnata al _tokenClient campo.

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

5. Esplorare il Run() metodo in 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;
   }
   

   • Definisce una funzione denominata di HttpTriggerAcsToken che può essere chiamata con una richiesta HTTP GET.
   • Un nuovo utente ACS viene creato chiamando il _tokenClient.CreateUserAsync() metodo .
   • Un token di accesso usato per le videochiamate viene creato chiamando il _tokenClient. GetTokenAsync() metodo .
   • L'ID utente e il token vengono restituiti dalla funzione come oggetto JSON.

6. Eseguire il programma premendo F5 in Visual Studio o selezionando Debug -> Avvia debug dal menu. Verrà avviato il progetto Funzioni di Azure e reso disponibile per la ACSTokenFunction chiamata.

   Nota

   Se si usa VS Code, è possibile aprire una finestra del terminale nella cartella GraphACSFunctions ed eseguire func start. Si presuppone che nel computer sia installato Funzioni di Azure Core Tools.

7. Ora che l'Funzioni di Azure è in esecuzione in locale, il client deve essere in grado di chiamarli per ottenere i valori dell'identità utente e del token ACS.

8. Aprire il file samples/acs-to-teams-meeting/client/react/App.tsx nell'editor.

9. Individuare le userId variabili di stato e token nel componente. Rimuovere i valori hardcoded e sostituirli con virgolette vuote:

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

10. Individuare la useEffect funzione e modificarla in modo che sia simile alla seguente per abilitare la chiamata alla funzione di Azure per recuperare un'identità utente e un token 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. Salvare il file prima di continuare.

12. Aprire una finestra del terminale ed eseguire npm start nella react cartella . Dopo la compilazione e il caricamento, verrà visualizzata l'interfaccia utente chiamante ACS ed è possibile chiamare la riunione di Teams creata dinamicamente da Microsoft Graph.

13. Arrestare l'app React premendo CTRL+C nella finestra del terminale.

14. Arrestare il progetto di Funzioni di Azure.

15. Eseguire il commit delle modifiche Git ed eseguirne il push nel repository GitHub usando Visual Studio Code:

    • Selezionare l'icona Controllo del codice sorgente (terza giù nella barra degli strumenti di Visual Studio Code).
    • Immettere un messaggio di commit e selezionare Commit.
    • Selezionare Sincronizza modifiche.

1. Aprire local.settings.json e aggiornare il ACS_CONNECTION_STRING valore con il stringa di connessione ACS salvato in un esercizio precedente.

2. Aprire server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. Ha il codice seguente:

   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 funzione esegue le attività seguenti:

   • Importazioni CommunicationIdentityClient che verranno usate per creare l'identità utente e il token.

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

   • Ottiene il stringa di connessione ACS da una variabile di ambiente denominata ACS_CONNECTION_STRING.

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Nota

   Si tratta del valore stringa di connessione aggiunto in precedenza nel file local.settings.json.

   • Crea una nuova CommunicationIdentityClient istanza e passa il stringa di connessione ACS.

     let tokenClient = new CommunicationIdentityClient(connectionString);
     

   • Crea un utente ACS e ottiene un token IP Voice Over.

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

   • Invia i valori userId e token al chiamante.

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

4. Passare alla cartella server/typescript in una finestra del terminale ed eseguire npm start.

5. Ora che l'Funzioni di Azure è in esecuzione in locale, il client deve essere in grado di chiamarli per ottenere i valori dell'identità utente e del token ACS.

6. Aprire il file client/react/App.tsx nell'editor.

7. Individuare le userId variabili di stato e token nel componente. Rimuovere i valori hardcoded e sostituirli con virgolette vuote:

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

8. Individuare la useEffect funzione e modificarla in modo che sia simile alla seguente per abilitare la chiamata alla funzione di Azure per recuperare un'identità utente e un token 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. Salvare il file prima di continuare.

10. Aprire un terminale separato ed eseguire npm start nella cartella react . Dopo la compilazione e il caricamento, verrà visualizzata l'interfaccia utente chiamante ACS ed è possibile chiamare la riunione di Teams creata dinamicamente da Microsoft Graph.

11. Arrestare entrambi i processi del terminale (React e Funzioni di Azure) selezionando CTRL+C.

12. Eseguire il commit delle modifiche Git ed eseguirne il push nel repository GitHub usando Visual Studio Code:

    • Selezionare l'icona Controllo del codice sorgente (terza giù nella barra degli strumenti di Visual Studio Code).
    • Immettere un messaggio di commit e selezionare Commit.
    • Selezionare Sincronizza modifiche.

1. Aprire il samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln progetto in Visual Studio.

2. Fare clic con il pulsante destro del mouse sul GraphACSFunctions progetto e scegliere Pubblica.

3. Selezionare Azure nella sezione di destinazione e quindi fare clic su Avanti.

4. Selezionare App per le funzioni di Azure (Windows) e quindi fare clic su Avanti.

5. Selezionare la sottoscrizione e quindi + Crea nuovo.

6. Immettere le informazioni seguenti:

   • Nome funzione: è necessario un nome univoco globale. Esempio: acsFunctions<YOUR_LAST_NAME>.
   • Sottoscrizione: selezionare la propria sottoscrizione.
   • Gruppo di risorse: selezionare un gruppo di risorse creato in precedenza in questa esercitazione oppure crearne uno nuovo.
   • Piano di hosting: piano a consumo.
   • Località: selezionare l'area in cui si vuole eseguire la distribuzione.
   • Archiviazione di Azure: crearne uno nuovo. È anche possibile selezionare un account di archiviazione esistente.
   • Azure Insights: crearne uno nuovo. È anche possibile selezionare un account di archiviazione esistente.

   Nota

   È necessario un nome univoco globale. È possibile rendere il nome più univoco aggiungendo un numero o il cognome alla fine del nome.

7. Dopo aver creato l'app per le funzioni di Azure, verrà visualizzata una schermata di conferma. Assicurarsi che l'opzione Esegui dal pacchetto sia selezionata e quindi selezionare Fine.

8. Selezionare Pubblica per distribuire la funzione in Azure.

9. Dopo aver distribuito la funzione in Azure, passare al portale di Azure e selezionare l'app per le funzioni creata.

10. Copiare l'URL per la funzione distribuita. Il valore verrà usato più avanti in questo esercizio.

11. Selezionare Impostazioni -> Configurazione nel menu a sinistra.

12. Selezionare + Nuovo pulsante di impostazione dell'applicazione e aggiungere le chiavi e i valori seguenti nelle impostazioni dell'applicazione. È possibile recuperare questi valori da local.settings.json nel GraphACSFunctions progetto.

    # 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. Selezionare il pulsante Salva per salvare le impostazioni.

14. Infine, è necessario abilitare CORS (Condivisione risorse tra le origini) per l'app per le funzioni per rendere le API dell'app per le funzioni accessibili dall'esterno del dominio. Selezionare Impostazioni -> CORS nel menu a sinistra.

15. Immettere * (accessibile da qualsiasi dominio) nella casella di testo Origini consentite e quindi selezionare il pulsante Salva .

Per iniziare, usare VS Code per distribuire il codice delle funzioni in Funzioni di Azure.

1. Aprire la cartella del progetto server/typescript .

2. È necessario avere già eseguito npm install e visualizzare una cartella node_modules nella radice del progetto. In caso contrario, aprire una finestra di comando ed eseguire npm install per installare le dipendenze.

3. Aprire il pallet dei comandi di VS Code (MAIUSC+CMD+P in Mac | MAIUSC+CTRL+P in Windows) e selezionare Funzioni di Azure: Crea app per le funzioni in Azure.

   

   Nota

   Se questa opzione non viene visualizzata, assicurarsi di avere installato l'estensione Funzioni di Azure in VS Code.

4. Verrà richiesto di immettere le informazioni seguenti:

   • Il nome della sottoscrizione di Azure.
   • Nome della funzione: acsFunctions<YOUR_LAST_NAME>.

   Nota

   È necessario un nome univoco globale. È possibile rendere il nome più univoco aggiungendo un numero o il cognome alla fine del nome.

   • Stack di runtime: selezionare la versione più recente Node.js LTS .
   • Area (selezionare qualsiasi area desiderata).

5. Dopo aver creato l'app per le funzioni di Azure, verrà visualizzato un messaggio sulla visualizzazione dei dettagli.

6. Tornare al pallet dei comandi in VS Code e selezionare Funzioni di Azure: Deploy to Function App (Distribuisci nell'app per le funzioni). Verrà chiesto di selezionare la sottoscrizione e il nome dell'app per le funzioni creato in precedenza.

7. Dopo aver distribuito la funzione in Azure, eseguire le operazioni seguenti:

   • Selezionare l'estensione Azure in VS Code (fare clic sull'icona di Azure nella barra laterale).
   • Espandere la sottoscrizione.
   • Espandere l'app per le funzioni.
   • Fare clic con il pulsante destro del mouse sulla funzione e scegliere Sfoglia sito Web. Assicurarsi che l'app per le funzioni sia funzionante prima di procedere.

8. Copiare il dominio della funzione di Azure in un file locale. Il valore verrà usato più avanti in questo esercizio.