Automating the Process of Creating a Microsoft Teams Meeting Link and Switching to ACS Using Azure Functions and Microsoft Graph

Open the project folder samples/acs-to-teams-meeting/server/typescript in Visual Studio Code.

Create a file local.settings.json with the following values:

    "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 the values ​​you copied to the local file to update the TENANT_IDvalues ​​and CLIENT_IDCLIENT_SECRET .
• Define USER_ID with the user ID you want to create a Microsoft Teams meeting.

You can get the user id from the portail Azure. Select Azure Active Directory and go to the tab Users in the sidebar. Find your username and select it to view user details. In the user details, Object ID represented .User ID Copy it Object ID value and use it for the USER_ID value in local.settings.json.

Open the file package.json in VS Code and note that the following Microsoft Graph and Identity packages are included:

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

Open a terminal window in the folder typescript and run the npm install command to install application dependencies.

Open Shared/graph.ts and take a moment to explore the imports at the top of the file. This code handles the import of authentication and client symbols that will be used in the Azure Function to call 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';

Take a moment to consider clientSecretCredential et appGraphClientthey will be used later in the authentication process and when calling Microsoft API Graph:

let clientSecretCredential;
let appGraphClient;

Look for the ensureGraphForAppOnlyAuth function :

• ClientSecretCredentialuse the Tenant Idvalues ​​and Client SecretClient Id de l’application Azure Active Directory.
• The object authProvider is defined as an Azure Active Directory application that authenticates in the background and uses application-only permissions (such as Calendars.ReadWrite) to make Microsoft Graph API calls.

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: [ ' ]
        );

        appGraphClient = Client.initWithMiddleware(
            authProvider: authProvider
        );
    

Take a moment to explore the createNewMeetingAsync function. It posts data to the Microsoft Graph Calendar Events API which dynamically creates an event in a user’s calendar and returns the new event details:

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;

Go to TeamsMeetingFunction/index.ts and explore the function Http trigger :

• createNewMeetingAsync is imported from graph.ts. It handles the creation and retrieval of event details.
• userId is retrieved from local.settings.json inside the Http Trigger function. To do this, access the environment variable using USER_IDprocess.env.USER_IDof .
• When the function is triggered, it calls createNewMeetingAsync with the defined user id and returns the new event details in teamMeetingLink the parameter.
• The function accesses the Teams meeting join URL by calling meeting.onlineMeeting.joinUrl and returns the value in the response body.

import  AzureFunction, Context, HttpRequest  from "@azure/functions";
import createNewMeetingAsync from '../Shared/graph';

let teamsMeetingLink;

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest)
    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);

    context.res = 
        // status: 200, /* Defaults to 200 */
        body: meeting.onlineMeeting.joinUrl
        
;

export default httpTrigger;

Use a terminal window to run npm start the function locally in the folder samples/acs-video-to-teams-meeting/server/typescript .

Now that the TeamsMeetingFunction is ready to use, we will call the function from the React application.

Back to file samples/acs-to-teams-meeting/client/react in VS Code. Add file .env in the folder with the following values:

REACT_APP_TEAMS_MEETING_FUNCTION=

REACT_APP_ACS_USER_FUNCTION=

These values ​​are passed into React as it is built so you can easily modify them as needed during the build process.

Open le fichier samples/acs-to-teams-meeting/client/react/App.tsx in VS Code.

Look for the teamsMeetingLink state variable in the component. Remove the hardcoded Teams link and replace it with empty quotes:

const [teamsMeetingLink, setTeamsMeetingLink] = useState('');

Look for the useEffect function and modify it to look like this. This handles the call to the Azure Function you looked at earlier, which creates a Teams meeting and returns the meeting join link:

useEffect(() => 
    const init = async () => 
        /* Commenting out for now
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        const res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        const user = await res.json();
        setUserId(user.userId);
        setToken(user.token);
        */

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        const resTeams = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        const link = await resTeams.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);

    
    init();

, []);

Save the file before continuing.

Open another terminal window, cd in the file react then run npm start to build and run the application.

Once the app is generated, the ACS call UI should appear and then you can call the Teams meeting created dynamically by Microsoft Graph.

Stop both terminal processes (React and Azure Functions) by entering Ctrl + C in each terminal window.