Microsoft 365 Community Microsoft Graph, 1 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Access a user's calendar events in an ASP.NET Core app with Microsoft Graph

Description

In this 17-minute developer focused demo delivered by Dan Wahlin, learn about the APIs and SDKs used to tie into an individual’s e-mail, Teams conversations, OneDrive files, etc. Follow a 6-step process from app creation to result rendering for calendar events. Specifically highlighted is the code for middleware (for authentication), the GraphCalendarClient, injection and for rendering a person’s calendar events for a specified date range and time zone. Step-by-step details in Learn module. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 1, 2022.

Demo Presenter: Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials:
• Learn - Access a user's calendar events in an ASP.NET Core app with Microsoft Graph | aka.ms/learn-msgraph-calendar
• Tool – Graph Explorer | aka.ms/ge
• Related Demo - Show a user's emails in an ASP.NET Core app with Microsoft Graph – Dan Wahlin (Microsoft) | @DanWahlin

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

All right folks! Well I'm glad to be uh back here with you again. I was here. I think it was two weeks ago and uh talked about microsoft, graph and accessing email. We're gonna do actually the same exact thing this time. So if you were here two weeks ago, you'll get a nice somewhat review. But if you weren't here, I'm gonna start from scratch. Assume you haven't done this before and kind of walk you through this process.

A

So the general idea is that, with microsoft graph, we can tie all kinds of organizational data into our apps, of course, so, for example, we could tie in uh email. That was one thing I talked about two weeks ago. We could tie into teams conversations files from onedrive and more in fact, there's going to be a microsoft. Learn module that I'm going to introduce you to about that as well, but we're going to focus on calendar events.

A

You know how many times have you gone to set up something like you're in an app working with a customer, whatever it may be, and then you have to go run off to your calendar, because you're pretty sure you had talked about a particular topic with someone, but you can't remember when it was who it was. You just know it was a related customer now, in addition to that, we can tie into device information, security tasks, groups, users and way way way more.

A

In fact, I'll have a quick intro to this if you're brand new in just a moment now, let's assume, then that you have an app and you're going to authenticate your users. I showed something like this last time.

A

Two weeks ago, once we've authenticated the user, we can request very specific permissions, such as I want to get to a user's email or I want to get to their calendar events or something along those lines, and we can do that by requesting an access token and I kind of like to think of it as a specialized key that only fits in certain doors, and we can then take that key and pass it to microsoft graph and then get things like calendar events.

A

Now everything I'm going to be covering in this short 15 minute session here in demo, can be found in a microsoft, learn module. So last time I mentioned, we talked about email. So if you want to learn about that, you'll find it in the same general location. Here this particular link at the bottom. This will take you right to the calendar events, one that we're going to be covering here and there's also a third one on access accessing onedrive files.

A

So if you want to do that, you could uh certainly tie that in as well now the reason again we're doing this is really to avoid a couple things to avoid user context, switching jumping out of the custom app you've built to email or some other location to find a calendar event in this case, but also just to pull in data that might be relevant for your app and that's really where what this is all about is pulling in that organizational intelligence and data uh into apps, so that users can get everything they need, and it's not just a database app.

A

It also lets them leverage what they've already stored somewhere else in the org. Now to do this, you need to create a net core app. Now you can do that in visual studio again or you could use the dotnet cli if you prefer, and then you need to register your app in azure active directory now. Last time I also mentioned the same thing: the learn module the link. I just showed a minute earlier. It's going to have step-by-step guidance on how you can register your app with azure active directory.

A

Even if you're brand new to this, it's actually very straightforward, uh we walk you through screenshots and what to click on and what to put in and kind of explain it along the way. So you don't need to uh memorize any of that. Actually it'll walk you through it. Now.

A

What we're going to spend most of the rest of today on is we're going to talk a little bit about middleware in net core we're going to talk about a custom graph calendar client class, how we can inject it and then ultimately how we can render events now in order to uh do this, though, we need some code and I'm going to see where my powerpoint moved it to. So let me switch this around real quick.

A

So when you go to the microsoft, learn module there's going to be a github repo that you can clone and you're going to notice that there's a begin and an end solution. Now, I'm going to work with the end solution here, mainly because I don't have a ton of time, but one of the things I want to point out before we get going is I talked about that specialized kind of key or access token, as we call it, and that has the rights to do certain things now in this particular app.

A

It covers three learn modules, so we can get to the user's profile and read it. We can get to the user's presence and read it undo that we can get to the mailbox settings and read those we're going to do that to get to some time zone settings for a calendar event.

A

We can read their mail, their calendars and then on files. If you go through that learn, module it'll show you how to not only download files but also upload files. So we can do read, write in that case now we're going to focus mainly right here, calendars.read now before I show you that, let me go ahead and let me start this up.

A

You can see all my previous commands, which is not what I wanted and we'll give this just a sec to build, but before that fit well, it's already done, but I'm going to show you one more thing in case you're brand new to this now, I'm already uh where I want, but it's quick to get back. If you haven't been to microsoft graph explorer, it is a phenomenal tool, so you can go to aka.ms.

A

Aka.Mslashge and then on the left here, I'm just going to type calendar and you'll notice. Several things come up. I could find a meeting time schedule. I can do all this fun stuff.

A

Now, I'm not currently logged in, but, as brian mentioned a little bit earlier, you can go, get a free, microsoft, 365, developer tenant and then you could log in with one of the users that you'll get in that tenant and that's actually what I'm going to do for the demo in a moment, but I'm not going to sign in in this case, because I just want to show you the basics.

A

So if we go to my events for the next week notice down here at the bottom, it pulled back a bunch of json data, and this is my anonymous in this case. Calendar events. Now the part I want to call out is right here: notice, we're going to me slash calendar view.

A

That's one of the api calls it's a restful api. You can see that you can call. In fact, if you click on this little, I here you can even learn more about what you can do with calendar view.

A

Now I only want to get for the next week, though so notice that it plugged in a start date time and an end date time and we're going to do something similar in the code demo, I'm going to run and then, of course you can click on run query now you can do this with all of these. Now, some of these right now like I can't find a meeting time or schedule because I'm not logged in, but if I were to log in, I could do everything very powerful tool if you haven't seen it now.

A

The next thing I'm going to do is actually run the app and it runs on localhost 5001. So let's go ahead and do that now. This is one of my free microsoft. 365 developer tenant accounts, I'm gonna use so, like I said you can sign up for one of these we'll click on it. I'm gonna go ahead and log in really quick here and I have to factor on put that in all right now. This will take me to the home page and I'm just in a temporary browser here and notice.

A

It says: welcome dan well that just made a call to slash me. I talked about this a little bit last time, but it basically gets the user's profile and then I also made a call to get the user's presence right now in my kind of fake account. It hasn't seen me in teams for a while, so it thinks I'm not available but notice up top. I can go to email. We covered this last time, but I could also go to calendar now.

A

I only have one event in there and that was to give the presentation this morning. But if we went off to you know teams.microsoft.com, I could go, there add a new event and then I'm going to show you how we can display these events and get these events right. So that's kind of what the app does now, let's go on back now that we've seen that and let's talk about how this kind of works from the flow that I showed earlier so notice.

A

The calendars.read what'll happen is you're going to have to have middleware, and this will do all the heavy lifting for authenticating the user, getting the access. Token token, making sure you can call microsoft graph, all those fun things and that's done in configure services. Now, while I'm focusing on net core here, keep in mind that all these same concepts can be done with many different languages and frameworks. We just chose to focus on this learn module in this case.

A

But what this line here does is it goes into that app settings and it grabs these scopes. These are the permissions in essence that I need- and it's going to use those in a moment, but this is really the big part here, we're going to add authentication, okay- and these are extension methods, they're called in c sharp, we're going to add microsoft identity. Web app, you saw me just use that actually to log in and things and we're going to enable token acquisition to call a downstream api. What's the downstream api.

A

Well, in this case, once I log in and then I request a access token, I can then use that key again to call microsoft craft. Well, that's the downstream api, so we're basically with just like three lines of code and there's a little bit more you'll, see right here, but you know three main lines of code: we're enabling authentication and all the fun to make this possible to call microsoft graph, not too bad, and if you're new to this, um I mentioned this last time. Probably it's not something!

A

I actually write that much, because once you put it in the app it's there and it works, so you just leave it. So you can just borrow from your own code if you'd like, and do that type of thing now we also add microsoft graph. This is going to grab those scope, permissions and the url to call again that calls into here. There's our downstream api there's our graph call and then we're going to do in memory token. Caching, there's a couple options there now.

A

The rest of this is really just making it where every page in this razer app is authenticated. So you do have to be authenticated to get to any page and that's kind of what the rest of this does now. The final piece I want to show you I'm going to skip past some bonus code is notice. These two right here we're going to have the ability to inject a graph profile, client and a graph calendar client, and that's the one I'm going to jump to now.

A

So if you've done this before with net core, you probably know all about dependency injection, that's all we're doing here is setting that up now. This is where the fun starts, though you got to get the middleware registered properly, but then you can start making the graph calls you'll notice over here to the left. I have a graph folder and I have a calendar client, an email, client, a files client, so I've kind of broken this up by a single responsibility.

A

If you will, but what we're going to do is inject into the constructor of this graph. Client calendar client uh a logger, and then this is the the big important one, a graph service client. Now. What is that?

A

Well, that came from some nuget packages, and so, if we went into our cs proj file you're going to notice, I have some microsoft, identity, assemblies or nuget packages, but I also have a microsoft graph, one, that's important, because inside of that it has a graph service, client and think of this as really the doorway to make these microsoft graph calls.

A

So we're going to inject that into here and then I'm going to have a get events. Now. Events are always a little bit tricky because there's time zones so also a time zone could be passed in. We can get that through microsoft graph as well, so that we can make sure we're getting the proper events for the user's time zone. So that's why this is being passed in now from there. What we're going to do is a little bit of filtering so notice.

A

We have a start of the week and end of the week so from today, seven days out and then what we're going to do is feed that into what's called a query option. It's the view settings for the query kind of like our, where clauses, if you were, will so notice. We add in the start date time and the end date time, and these are the properties that we want to basically filter on now, once we've set today and a week from today, then we can actually make the call now remember I showed you earlier.

A

It was slash me slash calendar view well by using the microsoftgraph.net core sdk. We can actually call into our graph service client and treat this as a dynamic api that we can call into a chained api. I should say so we're going to say, go to the user logged in user's profile, but I don't want to get just the profile. I want to get their calendar view and then I'm going to filter the request based on the start and end date, so we're going to pass those view options in now.

A

I'm also passing in a header for the user's time zone, so we make sure we get the right ones and you might have noticed when I was back here in graph explorer, there's a lot of properties that get passed back by default.

A

I may not want all those, so I can project or select exactly what I want and that's what we're doing right here, I'm going to grab the subject, the organizer, the start and the end date. Now that means that it'll really minimize the amount of data sent over the wire, which is always a good thing. You only want to retrieve what you actually need now in addition to that, we have an order by we're going to order by start date. Time now start date. Time is actually uh in this case it's a nested property.

A

If you go back and look at the json, this is how we can get to it and then we're going to do this asynchronously all right. Now, that's not too bad! I mean, if you're new to this, you may have never done it before, but once you have this graph service client injected in a.net core app and you have your middleware set up now. It's just a matter of learning the api and you'll get nice intellisense and code, help and stuff, like that in vs code and visual studio and other editors.

A

Now the final piece is: we need to now use this graph calendar client. So I mentioned earlier it's registered in the configuration, and that means it's injectable now notice that we have a graph profile, client in my calendar, page here and a graph calendar client. These are both injected.

A

So now the last part is I'm going to get the user's time zone all right, we're going to do that by making a separate call to get the user's mailbox settings, and then this is the call we just looked at we're going to call into the calendar, client get the events and then I'm going to pass their time zone in and from there we get back. We hope some events now at this point if you've done razer syntax at all, with mvc or razer pages.

A

You know the rest of this we're going to check if the user is authenticated. If they are do, we have any calendar events and if we do let's loop through the calendar events and then the rest of this just writes out the subject and the start, and things like that, and that's really what you saw right there right. If I had more calendar events, of course, it would just keep uh looping through those all right, so that is an example of how we can get started so to kind of wrap this up.

A

If you would like to get more information about this, you can go to the link that you see on your screen here and I would encourage you to not just think in terms of you know: calendar events you may say I don't need calendar events. I need this this and this again this could be teams chats. It could be calendar events, it could be email, it could be files, and the list just is huge of what you can pull in trending documents, all kinds of fun.

A

What's so great about this, is you bring the data where the user works every day you avoid the context shifts and it's very secure with microsoft identity. So I'd encourage you to go through the learn, module and I'm out of time. So I'm going to turn back over here thanks a lot for listening.

B

Excellent, thank you so much dan, a really great demo, and where you can get some comments, that people appreciate the uh handling like time zones and other things that may not come up very frequently so good to see that kind of well-rounded. How do you encapsulate the entire solution? Not just a point. You know get one daily thing in there.

B

Awesome thanks excellent! Thank you. So much dan.