Dynamiczne utworzenie tożsamości i tokenu w usługach Azure Communication Services

W tym ćwiczeniu dowiesz się, jak dynamicznie pobierać tożsamość użytkownika i wartości tokenów z usług Azure Communication Services przy użyciu usługi Azure Functions. Po pobraniu wartości zostaną przekazane do modułowego interfejsu użytkownika usługi ACS, aby umożliwić wykonanie połączenia przez klienta.

C#

1. Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametrów połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

2. Otwórz Startup.cs w programie Visual Studio i zapoznaj się z drugim AddSingleton() wywołaniem ConfigureServices() metody .

   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. Wywołanie AddSingleton() tworzy CommunicationIdentityClient obiekt przy użyciu ACS_CONNECTION_STRING wartości z local.settings.json.

4. Otwórz ACSTokenFunction.cs i znajdź definicje konstruktora i pola.

   • Zdefiniowane jest pole o nazwie Scopes , które zawiera CommunicationTokenScope.VoIP zakres. Ten zakres służy do tworzenia tokenu dostępu dla wideorozmowy.

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

   • Pojedyncze wystąpienie CommunicationIdentityClient, utworzone w Startup.cs, jest wstrzykiwane do konstruktora i przypisywane do pola _tokenClient.

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

5. Zapoznaj się z Run() metodą w 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;
   }
   

   • Definiuje funkcję o nazwie HttpTriggerAcsToken , którą można wywołać za pomocą żądania HTTP GET.
   • Nowy użytkownik usługi ACS jest tworzony przez wywołanie _tokenClient.CreateUserAsync() metody .
   • Token dostępu używany do wywołań wideo jest tworzony przez wywołanie _tokenClient. GetTokenAsync() metody .
   • Identyfikator użytkownika i token są zwracane z funkcji jako obiekt JSON.

6. Uruchom program, naciskając F5 w programie Visual Studio lub wybierając pozycję Debuguj —> Rozpocznij debugowanie z menu. To spowoduje uruchomienie projektu usługi Azure Functions i udostępnienie do wywołania ACSTokenFunction.

   Uwaga / Notatka

   Jeśli używasz programu VS Code, możesz otworzyć okno terminalu w folderze GraphACSFunctions i uruchomić polecenie func start. Przyjęto założenie, że na maszynie zainstalowano narzędzia Azure Functions Core Tools .

7. Teraz, gdy usługa Azure Functions działa lokalnie, klient musi mieć możliwość wywołania ich w celu uzyskania tożsamości użytkownika i wartości tokenu usługi ACS.

8. Otwórz plik samples/acs-to-teams-meeting/client/react/App.tsx w edytorze.

9. Zlokalizuj zmienne stanu userId i token w komponencie. Usuń zakodowane na stałe wartości i zastąp je pustymi cudzysłowami:

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

10. useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości użytkownika i tokenu usługi 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. Zapisz plik przed kontynuowaniem.

12. Otwórz okno terminalu i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS. Możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.

13. Zatrzymaj aplikację React, naciskając Ctrl + C w oknie terminalu.

14. Zatrzymaj projekt usługi Azure Functions.

15. Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu programu Visual Studio Code:

    • Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi programu Visual Studio Code).
    • Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
    • Wybierz pozycję Synchronizuj zmiany.

Maszynopis

1. Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametrów połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

2. Otwórz plik server/typescript/src/functions/httpTriggerAcsToken.ts w programie Visual Studio Code. Zawiera on następujący kod:

   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. Funkcja wykonuje następujące zadania:

   • Importy CommunicationIdentityClient , które będą używane do tworzenia tożsamości i tokenu użytkownika.

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

   • Pobiera parametry połączenia ACS ze zmiennej środowiskowej o nazwie ACS_CONNECTION_STRING.

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Uwaga / Notatka

   Jest to wartość parametrów połączenia dodana wcześniej do pliku local.settings.json .

   • Tworzy nowe CommunicationIdentityClient wystąpienie i przekazuje do niego parametry połączenia ACS.

     let tokenClient = new CommunicationIdentityClient(connectionString);
     

   • Tworzy użytkownika usługi ACS i pobiera token protokołu VOICE Over IP.

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

   • Wysyła wartości identyfikatora użytkownika i tokenu z powrotem do nadawcy.

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

4. Przejdź do folderu server/typescript w oknie terminalu i uruchom polecenie npm start.

5. Teraz, gdy usługa Azure Functions działa lokalnie, klient musi mieć możliwość wywołania ich w celu uzyskania tożsamości użytkownika i wartości tokenu usługi ACS.

6. Otwórz plik client/react/App.tsx w edytorze.

7. Zlokalizuj zmienne stanu userId i token w komponencie. Usuń zakodowane na stałe wartości i zastąp je pustymi cudzysłowami:

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

8. useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości użytkownika i tokenu usługi 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. Zapisz plik przed kontynuowaniem.

10. Otwórz oddzielny terminal i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS. Możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.

11. Zatrzymaj oba procesy terminalowe (React i Azure Functions), wybierając Ctrl + C.

12. Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu programu Visual Studio Code:

    • Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi programu Visual Studio Code).
    • Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
    • Wybierz pozycję Synchronizuj zmiany.

Następny krok

Wdrażanie aplikacji w usługach Azure Functions i Azure Container Apps