Getting Started with Microsoft Graph and JavaScript SDKs

Key Takeaways

everyone I'm Gerry here with Daryl today how are you doing good mate we're gonna be talking about the JavaScript SDK today so as a JavaScript developer or web developer in general why would someone use that the Microsoft got SDKs so with our SDKs we allow you what we help you do a lot of kind of standard behavior when working with the graph handling standard error codes doing some standard kind of tasks like batch requests and large file uploads and downloads and things like that cool so with the standard error codes one that comes up a lot is around falling and handling the write that you call that API is there anything the SDK does around kind of 49 yeah so what we have done is under the the SDK we've built kind of a middle or a pipeline where we can do all those kind of clever things like redirect handling and retry throttling so if you get a 429 and it has a retry after header we'll wait the appropriate amount of time same those if you get a 503 response there's a lot of different standard behavior that comes with HTTP that we're able to plug in these middleware components so this help you work a bunch of stuff you get four three by going down that path absolutely and and if I've already built an application that's using the Microsoft graph in that web stack using JavaScript are there benefits to starting to try and layer this SDK into your existing application well there's a variety approach well one thing that you can really get a lot of benefits immediately is just using our typescript types we take all the shapes of all the models request some response models across all the graph and we generate a typescript library so you can just plug that in and then all of a sudden you've got strong types for anytime so if you're ready getting a request back for your normal stack you can at least get yester only typing going yeah that's really neat what's the best way to get started with this for a developer well let me let me show you give you a demo I just opened here the page on github for our JavaScript libraries m/s graph - yes DK - JavaScript and we kind of give you a little walkthrough here show you some of the benefits of intellisense and show the how to install it either were an NPM package or via a script tag now one of the ways that I liked working with these things is just let's go see a little sample all right get the minimum kind of viable thing working so we've got a couple of samples here one running under node and one running for the browser and the browser it shows you how to get it all set up now I have it loaded up here on my machine it opened up in vs code and I got a few files opening first of all you're going to provide it at the client ID because I've got to get the auth working so you'll fill in the client ID in the secret ICS file it's a very simple one-page HTML page and we pull in the MS ljs library here and also the our graph SDK library there's one main Jas file that gets loaded up on page load and you can see in here how we're setting up what's called the user agent application which is the MSL way of configuring the security parameters for the application in this case the client ID and then we have our earth provider which is kind of an adapter to MSL and working with the graph and we'll take care of taking that Tok and putting it in the right place and handling certain error codes that come back from emcell just MSL is the Microsoft authentication library that helps with the whole process of authenticating the user that's going to be yeah it's our standard approach for well for any application using Azure ad em Sol library works we just kind of specialized this adapter to help you with the graph scenario yep so this particular client gets set up here this Microsoft graph client and then we have a small request like we just kind of show you how to use it so you do client API slash me get and it will return back the user profile you can slice slash mede slash messages there's a bunch of different examples in here and if I were to just do an NPM start on here you'll see what this application looks like when it's running so little browser I click the one of these buttons here get my details when I make that request this as oh this is not authenticated oh I better get an authentication token so it pops up this login dialog which is handled by himself for us we click on here and it's gonna sign in and then it's going to oh well first it's going to authenticate the application right give consent to the application for all the things that it wants to access we click accept and then it's going to display the results out in the results app now if I click on get my mails we won't have to go through that same dance because there's a token cache there that has all that information I can go click on that and it returns back just a JSON blob of all of my emails that's really none that's as easy as it is to get started great so if you're interested in this and you want to get started today graph dot microsoft comm click get start at the top you'll see Java scripts is one of the options there and we give you a tutorial to get started links straight to the sdk pages Daryll just showed as well as a quick start there we can get up and going within a few minutes so thanks for your time they're already based on Jeremy