>> Welcome everyone. In this session,
we will discuss how Microsoft Graph Toolkit
accelerates app development.
My name is Ayca Bas and I'm a Cloud Advocate at Microsoft.
Today, for this session,
my colleague, Beth is joining us.
Hi Beth. How're you doing?
>> Hello, I'm doing good. My name is Beth.
I'm a Software Engineer working
for this organization that we handle
first-party and third-party developer ecosystems
and trying to unblock
devs to build on top of
Microsoft platform services and technology.
One of them right now is Microsoft Graph.
Our team manages the toolkit for Microsoft Graph.
>> As you know, I'm a big fan of Microsoft Graph Toolkit.
Our teams work together to build this awesome module,
Get Started with Microsoft Graph Toolkit at Microsoft Learn.
Beth, since you are a part
of Microsoft Graph Toolkit product team,
why don't you tell us the story of Graph Toolkit and what it is?
>> Sure. At the beginning when we were first given
the task of figuring out how to help
developers to build on top of the graph,
we actually went out and interviewed a lot of our customers,
both our first-party partners or third-party communities,
and one of the most mentioned pain point that we've
heard was authentication and
authorization with the Graph is really difficult.
Our team decided, what if
we just built a component that's fully functional
behind the scenes and you just need to drop it
somewhere in your HTML page and it just works.
That's when we have the MGT login component.
From there on, we just built more components that
follows the same practice and you can
drop them on your HTML page and it just works.
>> That's so cool. I actually love using
Microsoft Graph Toolkit components and providers
because they're super easy to consume in our apps.
>> These are pre-built UI and authentication
providers that really cuts the development time.
Because they're fully functional behind the scenes,
you don't really have to write a lot of plumbing code.
As soon as you add the proper authentication provider
and then you drop some HTML tags on your page,
it cuts the development times by a lot.
>> Yeah. Also Graph Toolkit has a great selection
of supported platforms and the frameworks. That's awesome.
>> Right. When we first designed Microsoft Graph Toolkit,
we really wanted to work everywhere,
which is why we chose to use web components.
These are components that are built on web standards.
It works with any web framework style
you can think of: Angular, React.
We even have a React repr to
help you build functional react components,
it's called mgt-react.
Because they're all web standards,
it works in all the web browsers.
>> All of these are really cool.
I know that components have pre-built UI that looks and
feels like Microsoft Graph experience in default out of the box.
What about developers who wants to customize
the look and fit their styling with their components?
>> Of course, you can use templates or
CSS custom properties to tweak the look and
feel of your components.
We also have seaming system that you
can seam all your components altogether
and including dark theme because all the devs love dark theme.
>> Yeah, I'm sure lots of developers look for dark theme.
I'm glad we have that in Microsoft Graph Toolkit.
Cool. Let's check out what is in Microsoft Graph Toolkit.
>> We have a lot of components.
Like I said, logging was the first one and
then we decided to built more to fit different needs.
A good place to explore and play around with these
is called Microsoft Graph Toolkit Playground.
>> Yeah, exactly.
I think it's a really nice place
to practice about Microsoft Graph Toolkit.
Let me quickly walk you through what is
Microsoft Graph Toolkit Playground and where you can find it.
First of all, if you go to mgt.dev,
you will be directed to the playground.
This tool is super easy to use to be honest.
On the left side, you see all the components listed,
and on the right side,
you have the component itself.
If you customize anything here,
under the Canvas, you will see the changes automatically.
For example, you're under
Microsoft Graph Toolkit agenda component.
Now if I add or customize anything about the agenda component,
it should appear under the Canvas.
Let's, for example, group events by day.
The moment I add "group-by-day",
it will automatically group events under the related day.
That's super cool.
Definitely this is a really nice place to
practice about Microsoft Graph Toolkit.
This exists for all the components.
Let's try to check out other ones like mgt-people.
Again, this already has some attributes like show-max.
Whenever you change anything,
you will see the changes under the Canvas.
>> These are good attributes and properties that you can use to
tweak what you want
the functionality to look like or
what your UI components to look like.
There's a lot of these attributes and properties available.
A good place to explore these attributes and properties.
If you're already in the playground,
you can click on the "Docs" tab right next to Canvas,
and you will see the list of
attributes that you can use in your HTML tags or properties
that you can use behind the scenes with
your JavaScripts or the events that these
components fires and CSS custom
properties that's available for you to change styling.
Another good place to look at these is if
you go to aka.ms/mgt-docs.
That's where the official documentation
for Microsoft Graph Toolkit lives.
There's also a lot of
good Getting Started Guides for different platforms and like
we said with different authentication providers as well.
>> Yes. Official documentation has a lot of good information.
If you want to have deep dive information,
you can check out this doc.
If you want to stick in
the playground and explore, practice a little bit,
you can also check out docs for each and every component.
>> Exactly.
>> Okay, so let's see what else we
have in Microsoft Graph Toolkit.
>> The second part, which is also, in my opinion,
some of the most important things in
the Graph Toolkit are the authentication providers and
helpers that really just
makes it super easy to connect to the graph.
Out of the box, you have the MSAL provider which
will get token and call the Graph,
and then in exchange for information
and represented in your application.
But outside of building web apps using MSAL provider,
you can also enable your application
to be as part of SharePoint platform.
For example, if you're building SharePoint web parts or if you're
building teams platform apps such as Teams tab apps.
To convert your web apps into these platforms,
you can use our SharePoint authentication provider
or Teams app provider.
On top of all these, recently,
we just created the Electron provider to help people
build cross-platform applications if you wanted to
enable some of the native capabilities such as
Windows notifications or changing image in your background,
the desktop backgrounds such.
Some things like that. We also have two more at the bottom.
Proxy and Custom enable people who
already have your own ways of handling the authentication
behind the scenes and you can just enable proxy provider or
build your own custom provider in order
to use the Microsoft Graph Toolkit.
>> Awesome. With all these components and providers,
we actually have a lot of different things we can do?
>> There are a lot of different types of apps
that you can build with all these authentication providers.
We've already touched on web apps within the frameworks.
You can also translate your web app into Microsoft Teams
app and SharePoint web part using
different apps providers that come out of the box.
Electron app is a fun one that we're starting to explore,
and we would love to hear more
from the community on how you're using it,
what are the things that you're seeing with it.
The last one is in the middle.
We wanted to enable our developers
to export their web apps into PWAs in order to
utilize things such as the Microsoft Store that you
can utilize the infrastructure
in the store in order to distribute your app as well.
Microsoft itself has great tools such as
the PWA builder once you're done with your web app.
>> That's cool. Should we go ahead and
try have these components and providers work in a real app?
>> Yes. After all this talking,
let's get to the action.
>> Let's do it. I already created
a folder and index HTML here in Visual Studio Code.
What we're going to do is we will have
a very general HTML piece and we will add
first Microsoft Graph Toolkit loader to have
all the goodies from MGT providers and the components.
Then we will use MSAL provider as one of the providers
Beth mentioned earlier.
The last step, we will add our components like
login component and all the other fancy components. Let's start.
I'll click Ctrl Space and add HTML sample.
Inside the body, I will just have Microsoft Graph Toolkit loader.
I have it in here.
Let me just quickly get the script and paste it in here.
This MGT loader will bring me all the providers and components.
The second step is just using MSAL provider.
Here we need client ID.
Beth would you like to explain why do we need
client ID in this case?
>> Right. Your app is going to need to talk to
the Microsoft Identity platform for
getting a token and how
to obtain information from there on, right?
It needs an entry space per se.
The client ID will know which app that's registered
with all the configuration that comes with it in Azure portal.
We're probably going to do that right here in a little bit.
>> Yeah, exactly. We will do that piece too.
Before we just get our client ID from Active Directory,
let's add our very popular component, MGT login.
Before just creating Azure Active Directory app
lets try to check out what's happening in our app.
I'll open my palette and run the Live Server.
Now, our app is running localhost 3,000.
Let us quickly go to localhost 3,000 in our browser.
Let me grab the browser. There we go.
Now we have our sign-in button,
but it's not working yet.
Since we don't have the client ID in our code,
it is just showing us [inaudible] pretty looking UI,
but the authentication piece is not working.
As Beth mentioned earlier,
let's try to go to Azure Active Directory
and register an app in Active Directory,
get our client ID and see what happens.
I will go to portal.azure.com.
Let's make this bigger.
Now, I'll scroll down and choose Azure Active Directory.
In Azure Active Directory,
I'll find App registrations
and then I will click "New Registration".
There we go. Now this is
the place we are going to register
a new application and we will use the client ID.
Let me give this a name, Mgt Learn Together-Demo.
Our second step is just
defining what kind of accounts can reach out to our app.
Beth, would you like to explain what are these,
why do we use these at all?
>> Right, so there's a couple of tenant types.
The first one, for single-tenant,
that just means whatever account that you're using to
create the app registration,
the app can only be installed in the current tenant,
which if you see the right upper corner,
the admin account belongs to Contoso.
That's why it says Contoso only,
or you can build an app and try to install it
and support an enterprise scenarios for multitenant,
which is why the second option says multitenant.
That means that you can install this app
outside of the current tenant as well.
The third one supports not only
in multitenant commercial scenarios,
you can also support consumers scenarios using
personal accounts such as your .live.hotmail.com.
The last one is
just if you want to support only a personal account,
that's what you select.
I think for the demo purpose,
let's select the third one
because we want to distribute our app to everybody possible.
>> Yeah. Let's make our app for everyone.
Everyone can use our app.
For the Redirect URI is the last piece for registration of an app,
and this Redirect URI,
you're using after the authentication.
This is going to be the place our app will continue going.
For us our app is running in localhost 3,000.
We wanted to get back
localhost 3,000 when the authentication piece is done.
Then I'm going to type localhost 3,000 and we're good to go.
I will register this app.
Once the registration is done,
we have one last step to complete.
Under the authentication, we have to enable implicit grant.
>> Right. These are tokens that will enable MGT to know,
with the permission scope,
what kind of data that it needs to retrieve from Microsoft Graph.
>> Yeah. That's why we just check Access Tokens and ID Tokens.
I will save this and we are done.
Let's go to Overview,
grab our client ID,
and let's get back to our code.
I will paste our client ID here,
save it, and then let's check our app.
Here now, I will click the "Sign in" button, and there we go.
We have appropriate authentication.
I will choose my account.
It's asking me some permissions,
like read your profile.
That means after the authentication,
it will show me my username,
email address, my picture, and so on.
I will consent this and accept.
Wow, there we go.
This is really magic because we literally
edit three lines of HTML code,
and we have a good-looking UI,
with my picture, and username and email address.
This is really awesome,
and pretty useful, and pretty practical as well.
Let's try to test some of the other components in our HTML.
What else we should add, Beth? What do you think?
>> Let's get the person's agenda items so that I
don't have to go out to my email to track my calendar every day.
>> Okay. Let's add MGT agenda.
I added MGT agenda.
We get back to our app.
Now it's asking more permissions, like calendars.
>> This is an incremental consent.
Every time something more from MGT is added to the page,
it'll auto-detect, what are the scopes that is
needed and then try to get that for you.
>> This is awesome. With four lines of code,
we have the sign-in and the authentication.
We have the user profile as well
as now we can see user's calendar.
This is really awesome and it looks
pretty good as well in the UI perspective.
>> Exactly.
>> Wow, that's cool.
Let's check out where can learners find out these kind of
practical things and where they can learn more about
Microsoft Graph Toolkit and maybe build something like this,
what we did in demo.
>> Yes.
>> We recently built a great module in Microsoft Learn.
If you go to aka.ms/learn-mgt,
you will be directed to get started with Microsoft Graph Toolkit.
This module will walk you through what is Microsoft Graph Toolkit,
and it will also have some practice materials.
You will practice and build an application like just we did in
the demo piece and you will
discover Microsoft Graph toolkit a little bit more.
>> That's awesome. I already started mine.
>> That's cool. This is all from us.
Thank you everyone for joining our session.
I hope you enjoy the rest of the sessions as well.
Back to the studio.