Dynamically Create an Azure Communication Services Identity and Token

Open local.settings.json and update the ACS_CONNECTION_STRING value with the ACS connection string you saved in an earlier exercise.

Open Startup.cs in Visual Studio and explore the second AddSingleton() call in the ConfigureServices() method.

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

The AddSingleton() call creates a CommunicationIdentityClient object using the ACS_CONNECTION_STRING value from local.settings.json.

Open ACSTokenFunction.cs and locate the constructor and field definitions.

• A field named Scopes is defined that includes the CommunicationTokenScope.VoIP scope. This scope is used to create the access token for the video call.

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

• The CommunicationIdentityClient singleton instance created in Startup.cs is injected into the constructor and assigned to the _tokenClient field.

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

Explore the Run() method 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;
}

• It defines a function named of HttpTriggerAcsToken that can be called with an HTTP GET request.
• A new ACS user is created by calling the _tokenClient.CreateUserAsync() method.
• An access token used for video calls is created by calling the _tokenClient. GetTokenAsync() method.
• The user ID and token are returned from the function as a JSON object.

Run the program by pressing F5 in Visual Studio or by selecting Debug --> Start Debugging from the menu. This will start the Azure Functions project and make the ACSTokenFunction available to call.

Now that the Azure Functions are running locally, the client needs to be able to call into them to get the ACS user identity and token values.

Open samples/acs-to-teams-meeting/client/react/App.tsx file in your editor.

Locate the userId and token state variables in the component. Remove the hardcoded values and replace them with empty quotes:

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

Locate the useEffect function and change it to look like the following to enable calling the Azure Function to retrieve an ACS user identity and token:

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

}, []);

Save the file before continuing.

Open a terminal window and run npm start in the react folder. After it builds and loads you should see the ACS calling UI displayed and you can call into the Teams meeting that was dynamically created by Microsoft Graph.

Stop the React app by pressing Ctrl + C in the terminal window.

Stop the Azure Functions project.

Commit your git changes and push them to your GitHub repository using Visual Studio Code:

• Select the Source Control icon (3rd one down in the Visual Studio Code toolbar).
• Enter a commit message and select Commit.
• Select Sync Changes.

Open local.settings.json and update the ACS_CONNECTION_STRING value with the ACS connection string you saved in an earlier exercise.

Open server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. It has the following code:

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;

The function performs the following tasks:

• Imports CommunicationIdentityClient which will be used to create the user identity and token.

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

• Gets the ACS connection string from an environment variable named ACS_CONNECTION_STRING.

  const connectionString = process.env.ACS_CONNECTION_STRING;
  

• Creates a new CommunicationIdentityClient instance and passes the ACS connection string to it.

  let tokenClient = new CommunicationIdentityClient(connectionString);
  

• Creates an ACS user and gets a Voice Over IP token.

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

• Sends the userId and token values back to the caller.

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

Go to the server/typescript folder in a terminal window and run npm start.

Now that the Azure Functions are running locally, the client needs to be able to call into them to get the ACS user identity and token values.

Open client/react/App.tsx file in your editor.

Locate the userId and token state variables in the component. Remove the hardcoded values and replace them with empty quotes:

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

Locate the useEffect function and change it to look like the following to enable calling the Azure Function to retrieve an ACS user identity and token:

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

}, []);

Save the file before continuing.

Open a separate terminal and run npm start in the react folder. After it builds and loads you should see the ACS calling UI displayed and you can call into the Teams meeting that was dynamically created by Microsoft Graph.

Stop both of the terminal processes (React and Azure Functions) by selecting Ctrl + C.

Commit your git changes and push them to your GitHub repository using Visual Studio Code:

• Select the Source Control icon (3rd one down in the Visual Studio Code toolbar).
• Enter a commit message and select Commit.
• Select Sync Changes.