Microsoft 365 Community Microsoft Graph, 18 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Show a user's emails in an ASP.NET Core app with Microsoft Graph

Description

In this 18-minute developer focused demo - Dan Wahlin configures a .NET app (or Python, Java Script, Java) to retrieve emails using Microsoft Graph, secure messages using Microsoft Identity. Define queries that break up large data sets - emails into batches. Demo follows learn module steps - create app, register app in AAD, configure/add middleware, create and use GraphEmailClient, and render Emails. Start by cloning repo, run sample on your Microsoft 365 developer tenant. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials:
• Learn - Show a user's emails in an ASP.NET Core app with Microsoft Graph | aka.ms/learn-msgraph-email
• Tool – Graph Explorer | aka.ms/ge

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

Well, folks, I'm excited to be here with you. This is uh I've watched some of the recordings, but it's the first time I've been able to join live, and uh so this will be fun. I'm looking uh forward to talking with you real quick here, so let me go ahead and start up. I only have a few slides to go over really.

A

The goal of this is to introduce you to a feature, that's part of microsoft graph and it allows you to pull in email into your custom maps, and you could even do a lot more than that, but, uh as vasa mentioned, my name is dan walleen. I'm a cloud developer advocate at microsoft and, like I said, I'm really excited to be here to talk with you today.

A

So let's jump on in a lot of you probably know all about microsoft graph and know that you can get to things like mail. You can get conversations from teams, files, events, calendar items, meetings and more and the list just goes on and on and on, um but I know there might be a few of you that say: yeah and I've heard of it. I know a little bit what it is, but maybe I haven't done it so I'm going to speak to you real quick.

A

If I were to sum up microsoft, graph, I'd say that it's a secured unified api and that means I can learn one general api and get access to all the stuff. You see on the screen here and much more actually. Now you might wonder. Why would I need access in this case to say, email?

A

Well, let's say we have a customer application and in this application people can work with customers orders. Maybe invoices stuff like that. You know, there's only about a million of these out there that we, some of you, have probably written actually and how many times have you worked in an app where you say you know to complete this info. Whatever I'm doing, I pretty sure there was an email I received or I sent, or maybe there was a calendar meeting scheduled about it and then you jump to your email client.

A

If you're like me, you kind of forget what you were doing in the first place. You get distracted and you're like oh yeah. The whole reason I was here because then you start checking email was to get this one email to then plug that information at the app a lot of context, shifting there and there's a lot of organ organizational data and intelligence that, as developers, we just don't generally think of we kind of think of forms over data database driven apps.

A

But what if you could take your app to the next level and actually bring content that would be valuable to users where they work now, of course, if you're going to access their email or their files or things like that, it needs to be very secure. So everything I'm going to talk about relates to microsoft, identity and once we've authenticated and done a little bit more from a coding standpoint, we can get what's called an access token and that access token is kind of like the key to say, hey microsoft, graph.

A

I want to be able to get this or this or this now the user and there's a couple ways. You can do this at the app app level or the user. I'm going to talk about the user today, they can actually then accept and you've, probably all seen this. You know this app would like to access your email in read only or maybe read write, or this app would like to get to your files. So you have permissions that the user will have to accept.

A

Assuming they accept that, though we can use the access token that will be generated and we can actually make these calls and that's what we're going to talk about. So the good news here is, I only have about 15 minutes or so so this will be really quick, but this is all in a microsoft, learn module, as mentioned earlier, so everything that you see here you can get to after you can get step-by-step instructions.

A

I'm going to walk you through just a quick high-level overview. Show you a quick demo and then we'll kind of jump into the rest of this will be up to you. So what the learn module will have you do is we need an app well we'll have a github repo you can clone.

A

Then we need to register that app in aad azure active directory, it'll walk you through that, and then this is a net core demo. I'm going to do now. I want to emphasize that you could be doing python or javascript or java or whatever it may be, and you could do the same thing today, I'm going to focus on.net core, but again it's open to pretty much any language and framework just about that's out there.

A

So we're going to be talking a little bit about middleware, real, quick, a custom class called graph email client, that's part of this module for learn and then we're going to show how to use that to call microsoft graph and then ultimately render emails. So with that, let's go ahead and jump on in now, I'm going to open vs code and the only reason I really debated this.

A

I have visual studio on here, I'm on windows today. I also work on mac a lot, but I know some of you are on. Maybe linux some are on mac. Some are on windows and this works anywhere. So I just wanted to emphasize that and make that point clear, so I'm going to go ahead and do it in vs code.

A

Now let me first start off by kind of showing the demo when you go to the learn: module they'll, have you clone a github repo and that's going to have a begin solution that you'll work with I'm going to work, given that I have about 10 minutes left with the end solutions, you're not going to see a lot of typing, but I want to run this demo just really quick. So you can get an idea of what you can do so we're going to do a standard.net run.

A

It should be pretty quick because I've already built and there we go so you'll notice, localhost 5001.

A

So I'm going to run over to edge here and I already have 5001 up and let's go ahead and hit this now, you'll notice, right off the bat and you're all pretty used to this. The custom map is now asking me to you, know log in give my credentials.

A

Well, that's because, as you're gonna see in this module, we'll walk you through registering your app with azure active directory and then I'm going to talk about the middleware code. That kind of ties that to azure directory in just a moment. Now I have a developer tenant. If you don't have one of these, you should get one. They are super cool. uh This was mentioned earlier. You basically get your own microsoft, 365 environment and you can even be admin.

A

So if at work they deny you from doing certain things, you can do whatever you want with this one all right, so let me go ahead and log in and this is an in a private window, so it won't really matter if I stay logged in and what this should show is my profile to start now. If you go through this learn module, this part of the code will be done for you, but you're going to notice. I have welcome dan.

A

I went into one of my users that the custom developer tenant gave me renamed it to myself put in my photo and then up here, you'll notice. I can sign out, and then this is actually my uh my fake cloned. I guess you could say status and right now, I'm uh busy and if I actually went to teams and change that to available and then refreshed, then this is also using microsoft, graph to kind of show, presence and that's kind of cool. You could integrate that now.

A

We're not going to have time to go into that today, because we're going to focus on the email aspect, so this is now pulling email live from my developer, tenant that I have there's some other. Just as a heads up, I think, beginning february, I'm back to talk a little bit about calendar events, we're going to do the kind of the same thing and then there's already been. I think my colleague bob german, who you all probably know pretty well. He gave a talk on files.

A

You can upload download files and things, but when it comes to email, email's a little interesting when it comes to what we typically call paging so email we typically batch, and the reason is that what goes into your inbox, not just email right, you have uh calendar, invites and other things that can show up as well.

A

So what this call to microsoft graph will do, which I'll show you in a moment is it'll actually filter out the stuff. That's not email messages.

A

So now, if I come down to the bottom and say next page, it's not contiguous as far as the order goes, so in other words, if I had 25 things in my inbox, but five of those were median invites or something then this will automatically take that out. So luckily, there's a way to grab the next batch of email without having to write any custom code to say ignore this: ignore this ignore this it'll just kind of do that for us, so really nice all right.

A

So that's just what you'll end up building in the demo, so I can go ahead and I can do the normal sign out. uh Close my browser, those type of things, okay, so let's spend the rest of the time by going through some of the code here, and what I'm going to talk about. Just really quick is first off there's going to be three key assemblies that this project will use: you'll, see microsoft, identity, web web ui and then web microsoft graph.

A

This is where most of what I'm going to show you is going to come from, but there's some extension methods in just a moment, they're going to come from these top two as well, so I'm going to jump to our startup cs now, if you've done net core at all, and if you haven't don't worry because it's similar, no matter what language or framework you use just different code, obviously, but we have our standard suspects here. This is if you're new to this.

A

This is what kind of fires up one of the first things that fires up, so we register our configuration and then this is where we configure our services and, quite honestly, this is generally the most challenging thing to get right. When you do this with pretty much anything involving security right, the good news is first off. I don't have this memorized. I am really good at leveraging code, I've already written how many of you quick show of hands uh borrow from yourself on a very frequent basis.

A

If you do that's good, but I do want to walk through just really quickly some fundamentals here, so you'll notice, we have some services and we're going to configure using extension methods. Things like what are we going to use for authentication open id connect, authentication scheme, we want to add microsoft identity, the web app. You saw, I just used that actually to log in, but this is the really these next two are the really critical pieces for microsoft. Graph notice enable token acquisition to call downstream api. What's that mean?

A

Well, once I logged in what did the home page show it showed a profile. This allows the token that we're going to get back ultimately to be used to call microsoft graph.

A

That's what this is setting up and you'll kind of see that in the comments and then we actually add some configuration information from app settings into this. Add microsoft, graph extension method uh from there. We have some other things like: where are we going to store the tokens in this case? It's in memory cache? There is some other options now. The last thing I want to point out in this section is that you'll notice right here, that we have this authorization policy builder.

A

What this is going to do is actually make it. So you have to log in to every page, even the home page, because I'm going to call microsoft graph. I need to know who you are all right. Now, that's the main middleware and that's a really quick overview I'll admit if you check out the learn module, there's a lot more detail on this, but this is one of those things you generally get right once and then you call it a day and then you're you're good to go.

A

Now, I'm going to jump down. There's some bonus stuff in here. That's commented out, but I want to jump down to these guys. This is where we're going to register for dependency injection some custom classes, so you'll noticed earlier. I got the profile and I got the email and I could have shown calendar and files and stuff like that.

A

Well, this is the last piece we're going to talk about actually today the final piece in this file I want to show you, though, is we configured everything for the middleware. This is actually where we then say: okay, let's use this as middleware and if you're new to middleware it's kind of like a subway. The request is like the subway going this direction.

A

Maybe it goes east and it hits this stop this stop this stop and something happens at each of those stops like we check your credentials, we check for a token and then what happens when the subway gets to the end it turns around, and then you can have response subway stops. That could add a cookie, for example, add a token things like that.

A

So if you're new to it um that's kind of what middleware does it's kind of like a subway train um all right, so the next thing we're going to talk about, I think, is the fun part, and I I do want to emphasize.

A

Let me show one more quick thing here so when you go to this, learn, module and I'll have a link again at the end, um and you hit start there's going to be units and one of the unit units and if you're new to this is really good to know, though, is configuring your app now I don't have time to go into all of this part, but I want to assure you that there are screen shots and step-by-step instructions on how to actually do this for a net core app uh and really just any server side type web app like the one I'm showing right now and literally it'll.

A

Take you like five minutes. So if you're new to this they'll be step by step on how to get through that now, the last little piece I want to show you is okay, that's great! So we just hooked up our authentication. How tokens can get exchanged, but how do we actually make the microsoft graph call?

A

Well the assembly I showed earlier for the web microsoft graph, there's a graph service client in there, and if you haven't worked with microsoft graph before I would encourage you to go to aka dot. Ms slash ge graph explorer, and this is where you can actually play with it. So, like here's my profile and I should get back some json, uh my bandwidth is not cooperating right now, email and stuff like that, so this is a great place to learn about the api calls notice. This me slash messages right here.

A

Okay, let me go ahead and go back and what we're gonna do is instead of having to do raw rest, calls we're going to use this graph service client here we're going to inject it right. There store it in a field and now look at this code right here right, it's actually going to say: let's use this graph service client there's the me that would just get the profile, that's actually in the graph profile, client class. But in this case we want email messages.

A

That's what I want to request now, there's a lot of data with email messages, and I'm saying I only want the subject: the preview of the body, not the whole body, because that can get kind of big and then I want the receive date time here and we're going to order by that and then grab the first 10, the top 10..

A

Now there's some more code in here for the load, the next batch, if you're interested, that's all in the learn module, but I'm real close to out of time here. So luckily I'm on schedule. I have one last thing to show you, so this is great because now we have a reusable method, called get user messages to go, get our messages, but we need to display them in a page right.

A

So this is using asp.net core razer pages. If you haven't used that before and you do.net core, it is awesome. I love it. Nbc is great, but I'm a big fan of razer pages, so I'm going to go into email, cshtml.cs and you'll see it's pretty clean. We have a little authorization attribute on top of our class, but other than that we have two properties and we inject our graph email, client, okay, we're going to store that in a field and now look how clean it is to actually get our messages.

A

Now, this one adds just a little bit more for the batching aspect, but it if you look up this method and go through the module, it's pretty much the identical code. I showed here that you'll see it right here, but microsoft graph will return you a link. You can use to get the next page if you will or batch of emails.

A

So this will all be in the code if you're interested in doing that now, once we uh get our messages, we hook that into a property called messages, and then, of course, we render it so in here we check. If the user is authenticated, do we have any messages and then, if we do we're going to go ahead and loop through- and this is where you actually saw those little kind of cards if you will uh written out, so that's a really quick overview.

A

It's actually a lot to throw at you in 15 minutes or so, but to wrap up my kind of final thoughts on this, for you are the following.

A

If you are currently working on an app that integrates, you know, restful api calls and maybe database data, which, probably almost all of you are.

A

I would challenge you consider what type of organizational data could you include now we just covered email, but there are many other examples out there you can include so the user doesn't have to go jumping around. They can get right to that data right in the app. It's amazing how much more productive we can make our users it reduces user context. Switching of course we secure the app with microsoft identity. So it's super secure and there's permissions involved and then, as I showed, you can encapsulate this and you could reuse it across apps as well.

A

You can make a reusable class library, for example. So uh if you get some time have fun and go through the learn module on your own. Here's the link again- and uh I hope you enjoyed what you heard. I hope, if you haven't thought about doing this, that you will, because it really can take your apps to the next level. So with that, let me go ahead and stop sharing here and I'll turn it back over to everybody else. Thank you.

B

Dan really really great uh teaser and a quick demo related on the power of the microsoft graph, so really really awesome stuff thanks thanks for having me absolutely.