Setting up resources for real-time Microsoft Graph notifications

Key Takeaways

hey everyone welcome back to our video series about building a real-time collaborative apps my name is ichibash i'm a cloud adopted at microsoft and i'm super excited to dive into part three of this video series with you today we did the introduction um for this video series by showing you what kind of technologies you're gonna use in the second part you learn more about fluid framework from then and you also understood how you can set up your resources for fluid framework and integrate this into your app in this session we will focus more on microsoft 365 and how you can integrate real-time change notifications using graph we will discover more about setting up resources in the session and once we set up our resources in the next part we will learn how to integrate crash engine locations into our app okay let's have a quick recap about our scenario let's say i'm running a large company and we build our own collaboration app we call it a brainstorm app and as you see in the previous session we already have a fluid framework for real-time brainstorming notes now we want to personalize our app a little bit more and we know that microsoft graph provides us data from microsoft 365 cloud so we use microsoft graph toolkit to basically integrate authentication and have the login capability by using logincomponent and msl provider we also leverage from graph toolkit by using people components so that we integrated people information whoever is in the session with us we can track it on the top right corner of the session and now we want to go one step further and you want to get more information so while we are collaborating in the brainstorm app if one of our colleagues become available we want to receive real-time notification about that person's presence status so how we can track changes real time in microsoft 365 data the best way to do it is leveraging from microsoft graph change notifications change notifications is a mechanism that allows you to get notified when an object changes in a resource that you subscribe this resource can be anything like outlook user group it can be onedrive teams any resource you choose from microsoft 365. what if we have thousands of people working in our company and we try to track their presence changes but seems like it's quite difficult to do that using traditional web hooks because we see that there are millions of data coming through during the day we have lots of employees how we can optimize this data flow and still manage to get real-time data in our own app we can leverage from microsoft azure technologies to do that and in this session i will show you how we can basically get the graph change notifications data using azure event hubs so here's the flow we will follow we will track change notifications using azure event hubs to do that we of course need to create azure event hubs and then keyword once we create event hubs we will use the keyword to carry the connection string securely and then we will create our subscription using the keyword url and to create the subscription we will leverage from azure poverty to basically automate the subscription flow so we don't need to worry about the expiration or we don't need to worry about handling any sort of data or code we can go for the low code option in the private weight but if you're interested in um basically building this into your app you can also do the http graph call into your app too once we create our subscription using power to mate we will start getting the notifications in the event hub so in this session i will show you how to all do all this in a demo and of course last but not least as you see in the url at the bottom we will leverage from event hub and we will use azure keyword url and then we will use a secret name and domain name to create our notification url and then this will help us to create subscription and then we will start listening the changes in the related resource okay let's see the demo in this demo i will show you how to set up resources for microsoft graph change notifications all right so i'm in the azure portal and the first thing i'll do is just create a resource and i'll create event hub i'll choose event hubs and i will create event hubs here let's make sure that we have the right subscription and i will create a new resource group for my project so i can keep my resources under the same resource group so i'll just call the resource group as microsoft 365 resources brainstorm app and my event hub name will be something unique brainstorm [Music] app dash event hubs i will choose location as the best us and i'll choose the pricing as standard i will click review and create once the review is done we will go ahead and create our app our email house okay once the deployment is done we will just go to the event hubs this is our namespace so we can carry more than one event hub here and we just need to create our event hubs under the tab event hubs here i can create more than one event hub for our demo we just need one i will create event hub code name called presence event hub i will create this one and then i will go into my event hub and these sort of need to access our event hub and to do that we will use share access policies i will add a new policy to create subscription and here i'll call it policy.send lesson i will use this policy to create subscription i will basically click on the policy and i will copy the connection string primary key next we need to create azure keyword to carry our connection stream i will create a new resource i'll type keyword and i will create a keyboard let's make sure we have the right subscription we choose the same resource group and 365 resources brainstorm app i will type something unique here again brainstorm app dash keyword oh it seems like it's taken let's type one okay then it's unique and i'll choose west us again for this one and i will review and create once review is done we will create our keyboard when the deployment is done we will go to our keyword and here i need to create secret so that i can carry my connection string in the secret i will generate a new secret and i will type here as any name i want i can call it keyword secret and i just paste my connection string in the value and then i will click create as you know we will use keyword to create our subscription so we need to basically get the connection string through the keyword and to do that the final step is missing we need to go to access policies and we need to add a new access policy we just need to give a permission of secrets i will select all and i will edit principle we will basically add microsoft graph change tracking principle here plus make sure you type it correctly i'll just type this correctly change tracking and there we go we will add microsoft graph change tracking and we will add it in our keyboard so that the change tracking can access to our secret and the keyboard urap to create the subscription we will need two things from our keyword we will need the volt uri and we will need the secret name all right once we have these two the next step is to start creating our subscription first thing we need before we create the subscription flow we will need a directory directory app registration so i'll go into my demo tenant azure active directory and then i will create a new app registration i click on administration new registration i can call this app anything i want brainstorm app subscription i will choose the support access type as anything and here we need to use redirect uri that helps us to do the authentication in power automate flow so i'll register this one and then there are a couple things i need to do here so first i need to go to authentication and enable implicit brand as access and id tokens second i need to add api permissions we will track presence changes that's why i will choose graph delegated permissions i'll type presence and we will select those two as presents read and read all once we are done with the permissions the next thing we will create is the secret so here i will create a new client secret so that we can use this in our power to make flow to create authentication okay i will copy this one now we can go ahead and start building our flow in power automate so i will type in the browser flow.micros.com it will direct me to the power automate i'm logged in as my demo tenant again so that i can basically use this tenant to create my flows here the first thing we will do is creating the custom connector under data you can find custom connectors and here there are several options you can create custom connectors for us we will import our custom connector uh using the open file so i'll just show you where you can find the open file in our project if you go to our project on github you will see a folder called after 65 subscription flow when you extend this folder you will see there is something called subscription.swagger.json this is the file we will use this is basically our open file to create our custom connectors i just need to direct to the related folder in our app okay so let's choose import open file and then i'll type it subscription and then i will import file under the folder i just showed you and then it will generate the subscription con custom connector for us the only part missing for our connector is the authentication so authentication type is selected as o 2.0 so we're using azure active directory to do that we already have a registered app and we have client id secret we have all the details we just need to fill in and the first thing i'll do is just fill in all these details i have secret just copied here's the place i copy my secret let's paste it in here let's go ahead and grab the client id from the overview part i'll just copy this and paste it in here and the final part i'll fill is the resource url which is graph.microsoft.com and then we are basically done with the custom connector we will click on create connector and our custom connector will be created automatically so we need to do some connections before we jump into creating the flow we basically need to go to data tab and then we will choose connections and we will create the connections of the related connectors we will use in our flow okay so let's go ahead and click on new connection i will first create connection with our subscription custom connector i will click create and i will authenticate with my demo tenant account here i will consent on the on behalf of everybody in my organization and accept this one i will just repeat this step for um teams i will create an authentication basically i will complete the authorization process here for teams connector as well and finally i will do exact same thing for interactive directory connector i will just choose ad and create authentication with my demo tenant again once we are done with creating the connections the next step is finally creating our flows so here we can basically choose new flow so that you can create flow from scratch or you can basically import the flow using a zip file i already provided you the zip file you required for this demo in the github repo so you can click on import and you can choose the zip file under the same folder i just shown you enter 65 subscription flow folder under our app in github and you can choose presence subscription flow zip file here so that is it will bring us all the details about our flow okay so we have to do a couple setup here uh first thing first we need to choose our flow and update import setup we will um set up this flow as a new flow we are not updating the current one and i will save this second we need to choose our connector and then we need to choose our connections with the connector teams and interactive directory let's select our connector shown here we will also select our connection with the connector and teams as well as active directory let's click on import and we are done our flow seems like uh created let's go to our flow all right so this is our flow and it's in our account let's take a quick look we have a recurrence every 61 minutes we have a chosen teams and if you want to choose any other teams and if you want to track changes for different set of users you can actually change the team uh under this connector we have team id tracking here and finally this is a step we need to customize right in here and we are using subscription custom connector to create our subscription for presence data and here as you can see we have changed up as updated the notification url we have to update we have resource as communications presences and filter id basically we are just getting all this data from the array of idv collect from teams and we have expiration date time as one hour later the only thing i need to do is just updating the notification url to do that i will need my secret name from the keyboard i will copy paste here i will need the volt uri as i mentioned earlier i'll just copy this and paste it here let's delete this last bit and then we will need tenant id so once we're done with this we can actually save our flow let's go ahead and check the flow checker everything works and when i want to test this app seems like our flow is disabled let's go ahead and enable our flow okay here uh you can either go to flow checker or you can basically click on the turn on button on the left side i'll go ahead and check the flow checker and here there's an option to fix this issue as turn the slow on it will basically do exactly the same thing now our flow is enabled and i can run the flow okay so it seems like our flow is running successfully that's great news let's check out what we get in here in the subscription that means our http request succeeded and here in the subscription i can see that we successfully created a subscription using our power automated flow that's great that means that now whenever there is a change in the present status of any person we are tracking we have to see the changes in our event top let's try to do that okay to test this i will open teams for a user okay let's go to teams.microsoft.com and i'm logged in as again my demo tenant i will change the status as be right back and let's quickly go to our event hub i will go to event hub namespace and i will go inside my event hub and see if we see any changes oh there we go now we can see the changes uh basically data is coming through the event hub that means now when there's a change happening in the present status of any person we want to track we get the data in our event hub that's exciting okay so next step for us is basically using this data so how you're going to use this data in our app we will need signal r to get this data real time in our app i will search for signal r i will click on signalr service and create and then let's make sure we have the right subscription here we have we will choose the same resource group and i will give signalr name brainstorm app dash signal r i will choose region investios presenter will be standard service default will be serverless make sure that you choose serverless here in the next video i will describe you why we choose serverless here right so i'll click review and create and i will create the signalr and once it is deployed we will just go into our signal our service now that we set up all of our resources on azure the next step for us is getting the data through azure event hubs and broadcasting data real time using signalr into our app in next session i will show you how to integrate real-time data in our react app so stay tuned thanks for watching this video see you in the next one bye