{"id":40285,"date":"2021-06-16T00:27:10","date_gmt":"2021-06-16T07:27:10","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=40285"},"modified":"2021-06-15T07:23:23","modified_gmt":"2021-06-15T14:23:23","slug":"getting-started-with-graph-api-and-teams","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/getting-started-with-graph-api-and-teams\/","title":{"rendered":"Getting Started with Graph API and Teams"},"content":{"rendered":"

Reed Robison<\/a> extends a simple JavaScript Single-Page Application (SPA) to integrate with Teams using Microsoft Graph API.<\/p>\n

\n

In my last post<\/a>, I covered a basic introduction to Graph API using Graph Explorer and a developer tenant. This is the easiest way to get started with Graph API. In this post, I\u2019ll look at how to setup an app registration and move some of these concepts into a custom application that uses Graph API.\u00a0 We’ll build on an existing Graph Tutorial, review some concepts, and add support for sending a chat message in Teams.<\/p>\n

Before you go through this, be sure you have a developer tenant setup<\/a> and verify that you can successful sign in.<\/p>\n

Building the Graph Tutorial Sample App<\/h3>\n

There are several different samples you could build on found in Microsoft Graph Tutorials<\/a>. Let\u2019s start with this very basic JavaScript sample<\/a> that uses a single-page app and Node to spin up a HTTP server to host it. There are a LOT of tutorial samples out there that use different languages, dev environments, tools, etc. The code may look<\/em> different, but the concepts are all similar. Once you get the concepts down, it\u2019s easy to adapt them in whatever language and environment you prefer.<\/p>\n

The existing MS graph tutorial for Create a JavaScript single-page app<\/a> tutorial has you copy and paste to create six files (index.html, style.css, auth.js, graph.js, ui.js, and config.js) that make up the code.\u00a0 You can use any editor you like. I used VS Code but there are no dependencies on the tool you use. Just create the files in the same directory you started your web server using npx.<\/p>\n

Step #1 is to Create the JavaScript Single-page app<\/a>.<\/h3>\n

When you complete this step, browse to http:\/\/localhost:8080<\/a> and if all goes well, you should see the app load in your browser:<\/p>\n

<\/p>\n

Before this app is functional, we need to configure the app registration and auth library before the sign-in will work.\u00a0 We’ll do that in the next steps 2 and 3.<\/p>\n

An important note before you continue.<\/strong> Online samples are great– when they work. Technology is always moving forward and that means things change constantly. Azure AD and MS Graph are no exception, so you may find many of the online samples need some tweaking to make them work if things have changed since they were created.\u00a0 If you find that something has changed and the info below no longer works for any reason, leave a comment and I\u2019ll update my post.<\/p>\n

I picked the Create a JavaScript single-page app<\/a> because there are almost no dependencies to break or SDKs to install, but there are still a few config changes I needed to make:<\/p>\n

1) Azure AD recently started to enforce \u201cSecurity Defaults<\/a>\u201d which will try to require Multi-Factor authentication. That\u2019s a good practice, but for the sake of this demo and getting started\u2013 we don\u2019t want to dive too deep yet and I don\u2019t to get into MFA yet. You will need to turn off security defaults to start with (or else you need to work through setting up MFA)\n<\/p>\n

2) Also, when you setup the App Registration, AAD will default the client type to Web. Make sure you follow the tutorial and change this to Single-Page Application (SPA) or auth will not work from the JavaScript test app.<\/p>\n

3) Use a Private or Incognito browsing session when you test to ensure you get to pick the credentials that get passed during development.<\/p>\n

Step #2 is to register the sample app in the portal<\/a><\/strong><\/h3>\n

As you work through Step 2<\/strong>, you will sign in to Azure Active Directory using the developer account and tenant you setup earlier.<\/p>\n

Make sure you copy the App ID when you are done (you\u2019ll need this ID to update your code). Your ID will be different than the screen shot below as these are uniquely generated every time you register an application.<\/p>\n

<\/p>\n

Step #3 is to Add Azure AD Authentication to the app<\/a><\/h3>\n

Step 3<\/strong> modifies config.js to wire up the authentication and fully implements auth.js for MSAL. You should have filled in your config.js with your ClientId from your app registration.<\/p>\n

I don\u2019t want to re-create all the tutorial instructions here (you can follow the 3 Steps in the base tutorial), but for the sake of understanding the concepts of what you did, let\u2019s review:<\/p>\n

    \n
  1. You launched a local web server to host the app using Node (npx http-server -c -1)<\/li>\n
  2. You created a simple web app using JavaScript consisting of index.html, style.css, auth.js, graph.js, ui.js, and config.js in the directory where you launched the web server.<\/li>\n
  3. Of those files, auth.js and graph.js handle the authentication using MSAL. Config.js is the configuration passed into MSAL which contains your App ID and the scopes needed to complete the calls the Graph API.<\/li>\n
  4. You created an App Registration in AAD for the JavaScript Single-Page Application.<\/li>\n
  5. You updated the authentication code in the app with your newly registered App ID, local URI, and configured the MSAL code to handle the tokens returned from AAD.<\/li>\n<\/ol>\n

    Once all this is done, you should be able to browse to http:\/\/localhost:8080<\/a> and successfully sign-in.<\/p>\n

    *<\/em>Tip<\/em><\/strong> \u2013 Use Private or Incognito browsing sessions when using dev\/test tenants and alternate accounts. This will avoid the browser trying to use cached or active credentials that can complicate auth scenarios where you want to use an alternate account.<\/em><\/p>\n

    This sample authenticates your app to AAD using MSAL and pulls some basic profile info to display on the home page.<\/p>\n

    <\/p>\n

    Troubleshooting<\/strong><\/p>\n