{"id":4396,"date":"2020-04-15T10:27:48","date_gmt":"2020-04-15T17:27:48","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4396"},"modified":"2020-04-15T10:27:48","modified_gmt":"2020-04-15T17:27:48","slug":"a-lap-around-microsoft-graph-toolkit-day-2-zero-to-hero","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-day-2-zero-to-hero\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 2 &#8211; Zero to Hero"},"content":{"rendered":"<p>Welcome to Day 2 of the <a href=\"https:\/\/developer.microsoft.com\/en-us\/graph\/blogs\/announcing-a-lap-around-microsoft-graph-toolkit-blog-series\/\">A Lap Around Microsoft Graph Toolkit<\/a> blog series! Today\u2019s blog post will walk you through the setup needed to follow the samples and exercises throughout the blog series and show you how to get started using Microsoft Graph Toolkit in your application. For today\u2019s exercise, we\u2019ll be creating a simple web application that allows a user to sign in and view their calendar events.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4426 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/001-3.gif\" alt=\"example of simple application built with Microsoft Graph Toolkit\" width=\"800\" height=\"450\" \/><\/p>\n<h3>Setup your development environment<\/h3>\n<p><strong>Join the Microsoft 365 Developer Program and create a developer subscription<\/strong><\/p>\n<p>The samples in this blog series will be easiest to follow when using a tenant where you have admin access. We strongly recommend creating a Microsoft 365 developer subscription which gives you access to a demo tenant with you as the Global Administrator for development purposes.<\/p>\n<ol>\n<li><a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/dev-program\">Join the Microsoft 365 Developer Program<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/developer-program\/microsoft-365-developer-program-get-started\">Setup a developer subscription<\/a><\/li>\n<\/ol>\n<p><strong>Download tools<\/strong><\/p>\n<p>To follow along with the samples, you will need the tools listed below. If you don\u2019t have them already, you can install them from these links.<\/p>\n<ol>\n<li>A text editor or IDE. You can install and use <a href=\"https:\/\/code.visualstudio.com\/download\">Visual Studio Code<\/a> for free.<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\">Live Server<\/a> or a similar lightweight development server.<\/li>\n<\/ol>\n<p><strong>Register your application<\/strong><\/p>\n<p>To follow along with the exercises in this blog series, you will need to create a new Azure AD web application registration in the Azure Portal.<\/p>\n<ol>\n<li>Login to the <a href=\"https:\/\/portal.azure.com\/\">Azure Portal<\/a> using the account you created with your developer subscription.<\/li>\n<li>Select <strong>Azure Active Directory <\/strong>in the left-hand navigation, then select <strong>App registrations<\/strong> under <strong>Manage<\/strong> and click <strong>New registration.<\/strong><\/li>\n<li>On the Register an application page, set the following values:\n<ul>\n<li>Set <strong>Name<\/strong> to MGT Zero to Hero (or any name you would like for your application)<\/li>\n<li>Set <strong>Supported account types <\/strong>to <strong>Accounts in any organizational directory<\/strong><\/li>\n<li>Under\u00a0<strong>Redirect URI<\/strong>, set the drop-down to <strong>Web<\/strong> and set the value to <a href=\"http:\/\/localhost:3000\/\"><strong>http:\/\/localhost:3000\/<\/strong><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4454\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/002-3-scaled.png\" alt=\"Register an Azure AD Application\" width=\"800\" height=\"474\" \/><\/p>\n<p>4. Click <strong>Register<\/strong>. Locate <strong>your application (client) ID<\/strong>. You will need to reference this later. You can use this client ID for this sample as well as any other samples throughout the blog series.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4399 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003.png\" alt=\"location of your Application Client ID in the Azure AD portal\" width=\"800\" height=\"402\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003.png 1920w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003-300x151.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003-1024x514.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003-768x386.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/003-1536x771.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>5. Under <strong>Manage<\/strong> on the left-hand navigation, select <strong>Authentication<\/strong>. Locate the <strong>Implicit Grant<\/strong> section and enable both <strong>Access tokens<\/strong> and <strong>ID tokens<\/strong>, then click <strong>Save<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4400 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004.png\" alt=\"how to configure authentication for your application\" width=\"800\" height=\"402\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004.png 1920w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004-300x151.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004-1024x515.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004-768x386.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/004-1536x772.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3>Create your application<\/h3>\n<ol>\n<li>In the directory of your choice, create a folder for your project.<\/li>\n<li>Add an index.html file to the root of your project folder and add the basic construction of an HTML file, as shown below, and save the file.\n<pre class=\"lang: decode:true\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n \u00a0&lt;head&gt;\n \u00a0&lt;\/head&gt;\n \u00a0&lt;body&gt;\n \u00a0\u00a0\u00a0\u00a0&lt;title&gt;Welcome to MGT!&lt;\/title&gt;\n \u00a0&lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/pre>\n<\/li>\n<li>Add a folder named <span class=\"lang: decode:true  crayon-inline \">.vscode<\/span>\u00a0 to the root of your project folder and add a file named <span class=\"lang: decode:true  crayon-inline \">settings.json<\/span>\u00a0 inside of that folder. Copy and paste the below code into <span class=\"lang: decode:true  crayon-inline \">settings.json<\/span>\u00a0 and save the file.\n<pre class=\"lang: decode:true\">{\n    \"liveServer.settings.host\": \"localhost\",\n    \"liveServer.settings.port\": 3000\n}<\/pre>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4456\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1.png\" alt=\"configure live-server settings\" width=\"800\" height=\"433\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1.png 1920w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1-300x163.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1-1024x555.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1-768x416.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/liveserver-1-1536x832.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n<li>Right click on the <span class=\"lang: decode:true crayon-inline \">index.html<\/span>\u00a0file in the Explorer pane and click <strong>Open with Live Server. <\/strong>The server will start and automatically open your <span class=\"lang: decode:true  crayon-inline \">index.html<\/span>\u00a0 page in your default browser at http:\/\/localhost:3000. Your page will automatically refresh to display any changes you make from now on.<\/li>\n<li>You should now see \u201cWelcome to MGT!\u201d in the browser.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"wp-image-4415 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/005-1.gif\" alt=\"using live server to to open your application in the browser\" width=\"800\" height=\"431\" \/><\/p>\n<h3>Add Microsoft Graph Toolkit to your application<\/h3>\n<p>Now, you will add Microsoft Graph Toolkit to your application. In this sample, we will reference the loader directly via unpkg. Add the following code inside the head of your HTML.<\/p>\n<pre class=\"lang: decode:true\">&lt;script src=\"https:\/\/unpkg.com\/@microsoft\/mgt\/dist\/bundle\/mgt-loader.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><strong>Note:<\/strong> MGT can also be added by installing the npm package if you\u2019re using Node.js. To do this, add the npm package:<\/p>\n<pre class=\"lang: decode:true\">npm install @microsoft\/mgt<\/pre>\n<p>And reference the components:<\/p>\n<pre class=\"lang: decode:true\">&lt;script src=\u201dnode_modules\/@microsoft\/mgt\/dist\/es6\/components.js&gt;&lt;\/script<\/pre>\n<h3><span data-contrast=\"none\">Add the\u00a0<\/span><span data-contrast=\"none\">MSAL Provider<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:240,&quot;335559739&quot;:0,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">The Microsoft Graph Toolkit\u00a0<\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/providers\/msal\"><span data-contrast=\"none\">providers<\/span><\/a><span data-contrast=\"auto\">\u00a0enable authentication and Microsoft Graph access for\u00a0<\/span><span data-contrast=\"auto\">the components.<\/span><span data-contrast=\"auto\">\u00a0We have\u00a0<\/span><span data-contrast=\"auto\">a number of providers available, but for this example we\u2019ll<\/span><span data-contrast=\"auto\">\u00a0be using the\u00a0<\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/providers\/msal\"><span data-contrast=\"none\">MSAL provider<\/span><\/a><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">which uses\u00a0<\/span><a href=\"https:\/\/github.com\/AzureAD\/microsoft-authentication-library-for-js\"><span data-contrast=\"none\">MSAL.js<\/span><\/a><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">to sign in users<\/span><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Add the MSAL provider<\/span><span data-contrast=\"auto\">\u00a0by adding the following line<\/span><span data-contrast=\"auto\">\u00a0to the body of your HTML<\/span><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<pre class=\"lang: decode:true\">&lt;mgt-msal-provider client-id=\"[YOUR-CLIENT-ID]\"&gt;&lt;\/mgt-msal-provider&gt;<\/pre>\n<p><span data-contrast=\"auto\">Replace\u00a0<\/span><span data-contrast=\"auto\">[<\/span><span data-contrast=\"auto\">YOUR-<\/span><span data-contrast=\"auto\">CLIENT-ID]<\/span><span data-contrast=\"auto\">\u00a0with your applicatio<\/span><span data-contrast=\"auto\">n(<\/span><span data-contrast=\"auto\">client<\/span><span data-contrast=\"auto\">)<\/span><span data-contrast=\"auto\">\u00a0ID<\/span><span data-contrast=\"auto\">\u00a0that yo<\/span><span data-contrast=\"auto\">u saved in step 4 of the\u00a0<\/span><b><span data-contrast=\"auto\">Register your application<\/span><\/b><span data-contrast=\"auto\">\u00a0section above.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<h3>Add the login component<\/h3>\n<p>Now, you will add the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/login\">login component<\/a> to your application. Add the following line to your index.html file right after the MSAL provider.<\/p>\n<pre class=\"lang: decode:true\">&lt;mgt-login&gt;&lt;\/mgt-login&gt;<\/pre>\n<p>Your index.html\u00a0file should now look like this:<\/p>\n<pre class=\"lang: decode:true\">&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\u00a0\u00a0\u00a0 &lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;script src=node_modules\/@microsoft\/mgt\/dist\/es6\/components.js&gt;&lt;\/script&gt;\n\u00a0\u00a0 &lt;\/head&gt;\n\u00a0\u00a0 &lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;title&gt;Welcome to MGT!&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;mgt-msal-providet client-id=\u201d[YOUR-CLIENT-ID]\u201d&gt;&lt;\/mgt-msal-provider&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;mgt-login&gt;&lt;\/mgt-login&gt;\n\u00a0\u00a0 &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><span class=\"TextRun BCX0 SCXW160663669\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun BCX0 SCXW160663669\" data-wac-het=\"1\">Save the file and o<\/span><\/span><span class=\"TextRun BCX0 SCXW160663669\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun BCX0 SCXW160663669\" data-wac-het=\"1\">nce your application refreshes, you should see a sign in button. When clicked, it will take you through the authentication flow then redirect you back to your home page.\u00a0<\/span><\/span><span class=\"TextRun BCX0 SCXW160663669\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun CommentStart BCX0 SCXW160663669\" data-wac-het=\"1\">The component will show your profile information to indicate that you\u2019re signed in, and you can click the component to sign out.<\/span><\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-4425 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/006-2.gif\" alt=\"Microsoft Graph Toolkit Login component\" width=\"800\" height=\"450\" \/><\/p>\n<h3>Add additional components<\/h3>\n<p>Now that you\u2019ve successfully created a login experience that authenticates a user, you can add any of the other components to your application. In the example below, we\u2019ve added the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/agenda\">agenda component t<\/a>o display the signed-in user\u2019s upcoming calendar events.<\/p>\n<pre class=\"lang: decode:true\">&lt;mgt-agenda&gt;&lt;\/mgt-agenda&gt;<\/pre>\n<p><img decoding=\"async\" class=\"wp-image-4403 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007.png\" alt=\"Microsoft Graph Toolkit Login and Agenda components\" width=\"800\" height=\"434\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007.png 1918w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007-300x163.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007-1024x555.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007-768x416.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/007-1536x833.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Super easy, right? It only took a couple lines of code! Microsoft Graph Toolkit makes it quick and easy to integrate Microsoft 365 experiences like these into your application with very little code.<\/p>\n<p>Tune in for the <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/a-lap-around-microsoft-graph-toolkit-day-3-microsoft-graph-toolkit-components\">next post<\/a> in the <a href=\"https:\/\/developer.microsoft.com\/en-us\/graph\/blogs\/announcing-a-lap-around-microsoft-graph-toolkit-blog-series\/\">series<\/a> on April 20<sup>th<\/sup> where we will cover all of the components in MGT and their features.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Day 2 of A Lap Around Microsoft Graph Toolkit! Today&#8217;s post will show you how to get started with Microsoft Graph Toolkit from Zero to Hero. The exercise will walk you through registering your application, setting up authentication, and using your first Microsoft Graph Toolkit components with only a couple lines of code.<\/p>\n","protected":false},"author":69095,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-4396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"<p>Welcome to Day 2 of A Lap Around Microsoft Graph Toolkit! Today&#8217;s post will show you how to get started with Microsoft Graph Toolkit from Zero to Hero. The exercise will walk you through registering your application, setting up authentication, and using your first Microsoft Graph Toolkit components with only a couple lines of code.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69095"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4396"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}