{"id":363,"date":"2020-07-12T13:32:09","date_gmt":"2020-07-12T13:32:09","guid":{"rendered":"https:\/\/codingwithramin.com\/?p=363"},"modified":"2025-07-11T16:25:02","modified_gmt":"2025-07-11T16:25:02","slug":"sfpx-consuming-dynamic-crm-api","status":"publish","type":"post","link":"https:\/\/codingwithramin.com\/?p=363","title":{"rendered":"SFPx consuming Dynamics 365 CRM API"},"content":{"rendered":"\n<p>We usually building a SharePoint Framework solution that requires access to specific resources secured with Azure AD such as Microsoft Graph, Yammer, and Dynamic CRM. In this post I will show you how you can consume Dynamics CRM API from an SPFx web part.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dynamics 365 30-day Trial<\/h2>\n\n\n\n<p>If you don&#8217;t already have a Dynamics 365 environment, you can sign up for a 30-day trial from <a href=\"https:\/\/trials.dynamics.com\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> API permissions<\/h2>\n\n\n\n<p>To be abe to obtain the access token from our web part we need to add required permissions to the app registration, you can either create an app registration, add your permissions to it and use AadHttpClient to use the resources or you can add the permissions directly to the <strong>SharePoint Online Client Extensibility<\/strong>&nbsp;Azure AD application and use the AadTokenProvider class to obtain the access token.<\/p>\n\n\n\n<p>In this sample I add the &#8220;Dynamics CRM&#8221; to the <strong>SharePoint Online Client Extensibility<\/strong>&nbsp;Azure AD application:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-1024x550.jpg\" alt=\"\" class=\"wp-image-364\" srcset=\"https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-1024x550.jpg 1024w, https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-300x161.jpg 300w, https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-768x413.jpg 768w, https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-1536x826.jpg 1536w, https:\/\/codingwithramin.com\/wp-content\/uploads\/2020\/07\/crm1-2048x1101.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">App Registration Manifest<\/h2>\n\n\n\n<p>Go to the manifest page, and makes sure the value for the allowPublicClient and the oauth2AllowImplicitFlow is set to true.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Obtain Access Token<\/h2>\n\n\n\n<p>In your code, you can use  AadTokenProviderFactory class to get the access token:<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">public async getAccessToken(){\n    const token = sessionStorage.getItem(\"dynamic365Token\");\n    if(token)\n      this.accessToken = token;\n    else{\n      await \n      this.aadTokenProviderFactory\n      .getTokenProvider()\n      .then((tokenProvider) => {\n        tokenProvider\n          .getToken(this.resourceUri)\n          .then((t) => {\n            this.accessToken = t;\n            sessionStorage.setItem(\"dynamic365Token\",t);\n          })\n          .catch((err) => console.log(\"Error: \" + err));\n      });\n    }\n  }\n<\/pre><\/div>\n\n\n\n<p>The resource URI in the above code would be your company&#8217;s CRM URI (e.x.,  <a href=\"https:\/\/ramindev.crm11.dynamics.com\/\">https:\/\/contoso.crm11.dynamics.com<\/a>). You can also keep the token in the session storage or local storage to not get a new one each time the page gets refreshed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Consume the API<\/h2>\n\n\n\n<p>After obtaining the access token you can consume the API like this:<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">public async getAccounts() {\n    const url = `${this.resourceUri}\/api\/data\/v9.0\/accounts?$top=20&amp;$select=name,emailaddress1`;\n    const response = await axios({\n      url,\n      method: \"GET\",\n      headers:{\"Authorization\":`Bearer ${this.accessToken}`}\n    });\n    return response.data.value;\n}<\/pre><\/div>\n\n\n\n<p>In above sample, I&#8217;m getting the accounts from the Dynamic 365 Sales.<\/p>\n\n\n\n<p>I provide you a sample that displays accounts and relate contacts from Dynamic CRM which you can find the source code <a href=\"https:\/\/github.com\/AhmadiRamin\/react-dynamic365-api\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/codingwithramin.com\/img\/posts\/dynamic-crm-screenshot.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p> What we have seen above is a simple SharePoint Framework web part which consumes Dynamics CRM API. We used the AadTokenProvider class to obtain the OAuth2 token which is used to authenticate the user from the SharePoint page to a service like Dynamics CRM.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We usually building a SharePoint Framework solution that requires access to specific resources secured with Azure AD such as Microsoft Graph, Yammer, and Dynamic CRM. In this post I will show you how you can consume Dynamics CRM API from an SPFx web part. Dynamics 365 30-day Trial If you don&#8217;t already have a Dynamics 365 environment, you can sign up for a 30-day trial from here. API permissions To be abe to obtain the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":367,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,4,3],"tags":[41,7,11],"class_list":["post-363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-crm","category-sharepoint-framework","category-sharepoint-online","tag-dynamics-crm","tag-sharepoint","tag-spfx"],"_links":{"self":[{"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/posts\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363"}],"version-history":[{"count":5,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions\/395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=\/wp\/v2\/media\/367"}],"wp:attachment":[{"href":"https:\/\/codingwithramin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingwithramin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}