>> Howdy, I'm Richard diZerega,
a principal software engineer and
Microsoft's commercial software engineering division.
Today, I'll share a brief overview of
the Microsoft Graph SDK for JavaScript and how you
can use it to build powerful applications
connected to Microsoft and Office 365.
Before I jump into a demo,
let me cover a few highlights of the SDK.
First, the Microsoft Graph SDK
for JavaScript was built for
both client side applications that run in
a browser and Node.js applications.
In simply a matter of referencing
the JavaScript libraries in your markup,
or using Node Package Manager to
include the SDK in your Node.js applications.
The SDK is decoupled from authentication,
meaning you can use
any authentication approach you
want against Azure Active Directory.
Simply provide the SDK a valid access
token when initializing
the graph client and you're good to go.
Although there isn't dependency on these,
Microsoft does offer authentication libraries
such as ADAL and
MSAL to easily authenticate
and acquire tokens for Azure Active Directory.
You use the SDK
by specifying an API endpoint in the graph,
adding any optional query parameters such as paging,
filtering, selects, and then performing an action.
The action is going to correlate to
familiar HTTP verbs such as ''Get'',
''Post'', ''Put'', ''Delete'' and ''More''.
I often have developers asked me why I use this SDK
when REST and JSON are so
optimized for JavaScript development already.
Well, the Microsoft Graph SDK
for JavaScript offers typings.
This provides strongly typed classes
for both TypeScript and IntelliSense.
The SDK also eliminates
the complexities around advanced payloads
such as binary streams
and for working with requests headers.
Let's take a look at the JavaScript SDK
for Microsoft Graph in more detail.
As I mentioned, the Microsoft graph
SDK for JavaScript supports
both client side applications that run in
a browser and Node.js applications.
Here I'm going to do
a quick demonstration of using this in
a client side application that uses angular.
So in this case, I already have
a base project scaffolding in place
and I already have my
token acquisition stuff figured out.
Again, that's decoupled from the SDK.
At this point, I want to incorporate the Graph SDK into
this project and start using it to
get information out of Office 365.
So, what I'm going to do then is first go
out to my package.JSON
and include a few additional things in my dependencies.
The first thing I'm going to grab
is I'm going to reference
the actual Microsoft Graph SDK for JavaScript.
So I'll just go out here and say
Microsoft-graph-client and I'll grab
the most recent version of this.
The second thing I'm going to do because this is
a client side application but I
am building it with TypeScript,
is I'm going to pull in all of the typing so that I can
get all of the great strongly typed classes to work with.
So let's go ahead and add
one more dependency that will again be Microsoft.
And this one is going to be Microsoft-graph-types
and again I'll grab the most recent one of these.
All right, I need to
pull these into my projects or simply
pull up a console here and let's do a npm install.
And that should pull again these libraries and
the typings into my project for me to be able to use.
Okay, looks like that's done.
So let's go to our main app component.
There's a few things that we're going to need to do here.
First of all, let's import both of
those two libraries that we
just pulled into our projects.
So we'll do an import star as
Graph from- and we'll
do @microsoft-graph-client
first and then we'll do one more,
import star as we'll say
GraphTypes from in this case
@ Microsoft types that we had.
Now, this application is already set up to
be bound to a collection of messages.
We're going to query messages.
So you can see that here we have this messages and we've
defined it as an any which is just a generic object.
But now that we have our typing,
we should be able to say GraphTypes and I can actually
specify this as a specific type in this case a message,
so you can see I have this nice strongly typed messages.
In fact, if I were to start
referencing on a specific one,
so we can say this dot messages
and maybe grab the first one,
you can see I get those strongly typed properties
which is really nice as
opposed to having to maybe console log
out a response that I get back.
So here's where I have my token.
Let's now use the graph client,
and what I'm going to do is define
the Graph Client first so we'll say,
''Client'' and we're going to say ',
''Graph'' and again notice that I get IntelliSense for
this and we're going to initialize this Graph Client.
In here is where I'm going to specify my token.
So we're going to say, ''AuthProvider''
and it's going to be
a function here where we'll call ''done with our token.''
So we'll just take our token and pass it in here.
Actually, do null and token.
And then we can use our client to call into the graph.
So what we'll do is, again it starts
with specifying the API you want.
So we'll say ''client.api.''
And to that, we will pick our specific endpoint.
So you can see it's asking for the path here
and I'll say ''me/messages.''
The next thing that I'm going to do
is I could optionly put
some additional query parameters if I wanted to
maybe filter this list of messages,
I could do that very easily.
But what I'm going to do is
go ahead and just perform my ''get.''
So I'll do a
''get'' and this is going to return a promise that
will either give us
error details or we'll actually get a response back.
And so finally, I already have my messages class here.
And so I'm going to go ahead and grab messages
and simply bind that to the results that come back.
So we'll in this case do a comp.messages
equals the result that value.
All right, so let's see if we did everything right.
Here we'll go over to our console.
Again since is angular,
I'll do an ng serve and once this finishes compiling,
all of our TypeScript down to
JavaScript we should be able
to pull this up in a browser and give it a go.
So we'll do a- let's see what port it is.
Looks like it's going to be 4200 so we'll just grab this,
go back to our browser, ''4200.''
And here's our sign in process.
One of the things I'll do here really quickly,
and the benefit of again using
a modern ID with JavaJcript
is that I should be able to
actually debug this along the way,
so we'll go in sign in with Office 365.
I'll just sign in with one of my developer tenants.
Here's the consent that says it wants to read my mail.
And you can see that I get all
of my mail messages back again
using the power of
the Microsoft Graph SDK for JavaScript.
You can get started developing with
the Microsoft Graph SDK for
JavaScript right away using these links.
All of the Microsoft Graph SDKs
are offered open source on GitHub,
so you can submit feedback,
look at issues, and even contribute poll requests.
You'll also find a number of samples for
all the platforms we support out there.
Finally, we're active where developers are active.
So check us out on StackOverflow and post
your questions with the tag Microsoft Graph.