Microsoft 365 Community Microsoft Teams, 31 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Dynamically Create an Azure Communication Services Identity and Token

Description

In this 11-minute developer focused demo, Ayça Baş kicks articulates how does an external customer get a token that enables them to join my Teams meeting through ACS? Learn about the integrations between ACS, Teams and Azure functions. Use an Azure function (ACSTokenFunction) called from client’s React app, to make a dynamic ACS identity and token. Walk through the code and see the result in action. This is the 5th demo in this series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 7, 2023.

Demo Presenter
• Ayça Baş (Microsoft) | @aycabs

Supporting materials
• Tutorial - Audio/Video Calling from a Custom App into a Teams Meeting | aka.ms/mscloud-acs-teams-tutorial
• Integrations - Microsoft Cloud Integration Scenarios | aka.ms/microsoft-cloud
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/MicrosoftCloud
• Library - Azure Communication Services – UI Library | aka.ms/acs-ui-library
• Documentation - Azure Functions documentation | aka.ms/msazure-functions
• Tool – Graph Explorer | aka.ms/ge

• Previously delivered demos in this series
• Demo 4 – Dynamically Create a Microsoft Teams Meeting using Microsoft Graph - Ayça Baş (Microsoft) | @aycabs - (2/28)
• Demo 3 – Integrate Azure Communication Services Calling into a React App - Dan Wahlin (Microsoft) | @DanWahlin – (2/21)
• Demo 2 – Create an Azure Communication Services Resource – Dan Wahlin (Microsoft) | @DanWahlin (2/14)
• Demo 1 – Getting Started with Azure Communication Services, Microsoft Graph, and Microsoft Teams – Dan Wahlin (Microsoft) | @DanWahlin (2/7)
• Demo 0 – Introduction to Azure Communication Services – Tomas Chladek (Microsoft) | @tomaschladek2 (1/31)

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Tegrating Services across Microsoft cloud to enhance user collaboration. This is a part of by the way before I jump into it. Let me introduce myself if you're new here my name is archa but I'm A, Cloud Advocate at Microsoft, working together with a world that can Gary in the same team, and today I will talk about how we can do ACS Azure communication, Services Integrations, with Microsoft teams.

A

This session is part of the series V over D done a lot at the beginning of the series first, my colleague Dan was here to talk about how audio and video calling from a custom app in. We can bring into a teams meeting and the second week. He was here again talking about how we can create Azure communication Services resource on Azure and in the third week he was here showing you integrating Azure communication, Services, calling functionality into a react app and last week.

A

I was here to talk about how we can dynamically create a Microsoft have to use meeting using Microsoft graph, which was cons which was consumed by Azure communication Services, as well as by the client side of the user. On Microsoft teams- and today, I will be talking about how we can dynamically create an Azure communication, Services, identity and token and last week, which will be next week, then we'll be here back again talking how we can deploy our app to Azure.

A

If you're interested in learning more about our series, all of the videos are available in our community Channel. You can go ahead and check out the video separately and I will jump into uh dynamically, creating an Azure communication, Services identity and token for this week before we start talking about the code and everything I just want to show you what we're talking about here. This is a customer Viewpoint where we created a react app which consumes Azure communication Services as a customer.

A

They can join the customer meeting through react and the point they send the request there will be a teams meeting created on the client's calendar client will use Microsoft teams interface to join the meeting and both client and the customer will meet in the same meeting. Even though customers joining from react app and client, uh the customer agent will be joining from Microsoft teams, so they both meet in the same meeting by consuming Microsoft teams, URL, which we covered last week, how we can create the meeting link dynamically.

A

So this week we will be focusing on dynamically, creating an Azure communication, Services, identity and token. This will be under the react, Azure communication services and connection with Azure functions, and so we are creating the token for our client, which we don't ask any login any permissions from the client side. But of course, for all the clients, we need some sort of a user token for them to join the meeting through Azure communication Services.

A

As a customer agent, we will be using teams Microsoft teams as an interface, so we will know about the customer agent because they will be consuming teams. We will have their identity, but for the client every time when they try to join the meeting, we will need ID in the token from their side. So we will. We will know that the same individual is trying to join the call and maybe trying to recall less well that that will help us for the Azure communication Services bit in the react app.

A

So let's quickly take a look: how you're going to do that? It's really straightforward! We are making this Dynamic ACS identity and token call from another Azure functions. We've we've seen how to call Microsoft graph from Azure functions. Last week this week we will be covering another Azure functions where we are calling ACS identity client. What we are doing here is the creative function, and then we get ACS connection string from the code in our code.

A

We are using connection string and we are putting in the EnV file, but you can also get that from Azure directly as well. Once we once you get the connection string, the only thing you do is just calling the communication identity, client to create user identity and token, and once you create your user, we are basically returning the user details to uh back to our react app, so our ACS app will be working. This function will be triggered the moment when our client starts the app the moment they go to the URL. This functions.

A

This function will be triggered and will be returned with the user, ID and the token and our user will be able to join the meeting with the created newly created identity and token I want to quickly show you how we do that in our code, let's quickly go to our code and then I will run the app first of all. If you join the previous sessions in the community call, you may realize we've been going through the same map in the past five weeks, and this week we will be focusing on team.

A

We did last week we covered teams meeting function. This week we will be focusing on ACS token function, here's our function under the server typescript and we will be calling that function from app.tsx, which is under the client, react app.

A

So basically the moment when we render the app UI, we are calling these two functions, one that we've seen last week and this one we will be covering this week.

A

So the moment we render the UI, we are calling react, app, ACS user function, which will be let's go to dot EnV file, which will be localhost, 7071, API, ACS, token function, it's exactly our function here and when we, when we call that in the UI our function will be triggered and as I showed in the slides as well, we will be first getting the connection string, which is again in the that in EnV file and after that we will create token client by using communication, identity, client, and this requires the connection string from ACS.

A

You can create this connection string on um Azure portal and then cover that part in I think two weeks before, so you can go check out that video. Once we create the token, then we can create our user with the token client and after that, the only thing we will return as the body will be user. Id user ID will be consumed here when setting up the meeting and by using this user ID our reactive will be understanding uh who's, this user, we will be creating user ID and token.

A

Every time a new user joins the session and every time when they want to make a call with our customer agent, so I want to see that in action, yeah okay, here is my taskbar I- want to see that in action, let's open the browser. My react app is running at the moment and my as well as my functions. Both of the functions are working today we will be focusing on the ACs user function.

A

Let's go to localhost 3000 and the moment when I hit this UI, it's initializing, meaning that it is creating a new token and the ID for me and I can quickly show up here. Hi everyone- and here I already have the ID and the token when I click on start to call. My ID in the token will be consumed by ACS and I will be joining the meeting with my newly created ID and the token and I can start connecting with the customer agent.

A

So this is pretty much it and all these samples and details are available for you if you're interested in trying this demo out by yourself here are the resources. If I need to quickly go through the resources, the first one is ak.mslash Microsoft Cloud. You can find more Integrations about Microsoft cloud there. If you're interested in this particular tutorial, you can go through the step-by-step tutorial by just going to Academia, slash mscloud, Dash, acs-teams tutorial. This will be guiding you to step-by-step tutorial for this uh Workshop. Specifically, we have a samples repo on GitHub.

A

We also have the Azure communication Services UI Library, which will be super useful if you're interested in using ACS. If you're interested in creating a react app. Let's say you can use the UI library to create something like I showed a couple of couple minutes back and if you're new to Azure functions and interested in what kind of functions do we we have in this example, I've shown you HTTP trigger, but there are more available in Azure functions. You can go and check out.

A

Ike.S Ms, Azure, Dash functions and graph was the topic for last week, but you will see if you complete this tutorial, you will see it plays a huge role in this Workshop as well. If you're interested in learning more about Microsoft graph, you can check out ak.ms GE or you can join hack together to learn more about graph. This is all I wanted to cover today. If you have any questions, I will be in the chat. I can answer your questions and hand over to Gary and he has a exciting topic to to cover.

B

Thank you, Aisha really, really cool, uh awesome stuff and it's it's. It's so simple, so really really cool great work on the on the demos as well. Foreign.