{"id":4776,"date":"2020-06-15T10:19:45","date_gmt":"2020-06-15T17:19:45","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4776"},"modified":"2020-06-15T10:19:45","modified_gmt":"2020-06-15T17:19:45","slug":"a-lap-around-microsoft-graph-toolkit-day-9-microsoft-graph-toolkit-sharepoint-provider","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-day-9-microsoft-graph-toolkit-sharepoint-provider\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 9 \u2013 Microsoft Graph Toolkit SharePoint Provider"},"content":{"rendered":"

Author: Hugo Bernier, Office developer MVP<\/p>\n

@bernier<\/a> | GitHub<\/a> | LinkedIn<\/a><\/p>\n

Introduction<\/h2>\n

Season 1 of our A Lap around Microsoft Graph Toolkit<\/a> was all about getting started with the Microsoft Graph Toolkit. We explored how to use it when creating a web application. We configured, styled, and templated toolkit components. We used mgt-get to call the Microsoft Graph – and we explained how providers work.<\/p>\n

If you\u2019re a SharePoint developer, you may have thought: \u201cThat\u2019s great, but I don\u2019t want to write a web application, I want to write SharePoint solutions!\u201d.<\/p>\n

The great news is that most of what we\u2019ve covered so far will work inside of your SharePoint Framework (SPFx) solutions \u2013 with very few changes!<\/p>\n

In today\u2019s post, we\u2019ll show you how you can apply what you\u2019ve learned so far in your own SPFx solutions.<\/p>\n

From an HTML application to a SharePoint Framework solution<\/h3>\n

As Elise explained on Day 2<\/a>, if you want to create an HTML application with MGT, follow these steps:<\/p>\n

    \n
  1. Register your application<\/li>\n
  2. Create your application<\/li>\n
  3. Add Microsoft Graph Toolkit to your application<\/li>\n
  4. Add the MSAL Provider<\/li>\n
  5. Add the login component<\/li>\n
  6. Add additional components<\/li>\n<\/ol>\n

    We\u2019ll follow almost<\/em> the same steps to create our SPFx solution.<\/p>\n

    Let\u2019s get started!<\/p>\n

    Step 1: Register your application<\/h3>\n

    When you build an HTML application, you create a new application registration in Azure Active Directory so that you can generate a unique application ID (also known as a client<\/em> ID). You use the application ID to grant access to the various Microsoft Graph APIs that the MGT components in your application will use.<\/p>\n

    When you build a SharePoint solution, it works a little differently; every solution package you create automatically generates a unique ID that is ultimately used to grant access to Microsoft Graph APIs.<\/p>\n

    So for now, we don\u2019t need to do anything. (Don\u2019t you love it when instructions start with \u201cStep 1: Do nothing\u201d?)<\/p>\n

    Step 2: Create your application<\/h3>\n

    To create a SharePoint Framework web part application, we\u2019ll use the Yeoman SharePoint generator. If you don\u2019t already have it installed, you should follow the steps to set up your SharePoint Framework development environment<\/a>.<\/p>\n

    We\u2019ll use the standard steps to create a new web part project. Using your favorite command shell, do the following :<\/p>\n

      \n
    1. Create a new project directory in your favorite location.<\/li>\n<\/ol>\n
      md helloworld-mgt<\/pre>\n
      2. Go to the project directory.<\/p>\n
      cd helloworld-mgt<\/pre>\n
      3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator<\/a>.<\/p>\n
      yo @microsoft\/sharepoint<\/pre>\n
      4. When prompted:<\/p>\n