Microsoft 365 Community SharePoint, 13 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Calling Dynamics 365 CRM APIs from SharePoint

Description

In this 11-minute Developer - focused demo, Ramin Ahmadi delivers a demo about a SPFx web part used for finding contacts aligned to an account or team in Microsoft Dynamics 365 CRM and steps viewers through the authentication path to retrieving this information. The flow includes a secured Azure function, getting an access token from Microsoft Identity Platform and calling Dynamics APIs using User Impersonation permissions. The Web part has 3 properties and React hooks increase readability. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 13, 2020.

Demo Presenter: Ramin Ahmadi (Content and Code) | @raminahmadi1986

Supporting materials:
• Blog post - SFPX CONSUMING DYNAMICS CRM API | https://ramin.expert/?p=363
• React Library - Ant Design site | https://ant.design/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Okay, hello, everyone, my name is ramin ahmadi, I'm a sharepoint developer at continent code, and you can find my contact information from here and today, I'm going to show you how you can call dynamics, 365 crm, apis from a sharepoint framework web part. So let's jump to the demo without wasting time, so the demo itself is really simple. I used and design to build this ui. It's a react library which has plenty of ui components you can explore from its website.

A

The ones I use is the expandable table. You can see here, which returns a top to any top 20 accounts from dynamics crm, which has a pagination and by clicking on each rows.

A

You can see uh the related contacts to to each account and we have a search box at the top so that you can search and it returns data back from dynamics crm. So this is the web part. It's really simple! um So in terms of the properties, it has three properties.

A

One is the crm instance url url, which we can define here and the app registration and azure function, url, which I'm gonna talk about these two later on.

A

So, let's jump to the code, so I can show you some of the coolest stuff behind the scene. So we have two two components here. I hope it's large enough and you can see the code.

A

So this is the accounts components which, using uh and design as I mentioned, it's a table, divider and search components and by the way I'm using uh react hooks. I think we are getting used to this uh approach and it's a really like a simple way of building components and it's more readable than the classic way of building components.

A

I have a table here which just displayed accounts, which has expandable property, which is another component, and if you go to that component, it's just uh basically another table with four columns uh displaying uh the contents of the context information and when you click or select each row, you just call get contacts from a service class which is a dynamic service and brings back the data and displayed to the user.

A

But the takeover from this sample is in the dynamic service class, which I have a aad token provider factory class here so aad token provider factory gives you the get get token provider class. Sorry yeah get a token provider method and by calling that you can get token for a resource.

B

A

Remember a few weeks ago I explained this for building a yammer part, so in this case you can get access to another resource, and when you get the token you can use it to call the api that you can find here. For example, we are getting contacts uh by a filter filter that is a account id and also set the authorization header. With the token we got from the aed token provider and when user uh try to search, you also uh get the accounts uh back from the dynamic crm uh by filtering.

A

uh The name uh bear in mind that you need also to add the permissions to the sharepoint online client accessibility, which is dynamic crm, and it has only one permission available. Is it is a user impersonation? So this is. This is one way to get the data back or calling dynamics crm, uh but um recently we had a project. That's uh client asked us to develop an azure function for them instead of using this approach. So, as you can see, application permission is permissions are not available here. So how we can?

A

How can we um pass the delegated permissions from the uh from the sharepoint web part to to the azure function and pass it over to to dynamics crm to get the data back? So the answer is uh using um os2 on behalf of flow.

A

uh That is a diagram for this. I just created for you guys, uh so this flow helps you to authorize access from the gateway that is azure function in our sample to the downstream apis without losing trace of the user.

A

So we know that the user using our web part has already has has been already authenticated and also we know that when we use adhd client to access azure id protected apis like azure functions, it attaches very jwt token to the ongoing request. It means that internally, the aad http line implements the azure adr's flow, using awjs to obtain a valid access token. So here we have the access token to get access to the azure function.

A

So from here we need to authenticate to microsoft, identity platform, token token, insurance endpoint to request another token to get access to dynamics 365 crm.

A

So it validates the credentials along with the azure function and issues the access token for dynamics crm and after obtaining the access token, we can set it in the authorization header of the request. And finally, when we get the result back, we can pass it over to the spf extra part to display to the user.

A

So um if I want to show you the code, so we know how to use the aed http client and in this sample I use a. I use azure function as a middle tier web api to call the uh called it dynamics crm.

A

As you can see here, we are calling that azure function with uh with a parameter which is instance url. It is a dynamic crm instance url, um so it's passing them uh passing the access token to the azure function and it does it uh behind the scene. So we don't need to do anything about the access token, and if we go to the azure function code.

A

First, we get the jw token from the authorization header and also the instance url, which is our dynamic crm, a url.

A

We have a function. We have a function here, I'm using microsoft.com.identity to get the token, but by building a coloring application using client, id client, secret and tenant id, and also uh the default scope, which is a built in scope for every application that uh refers to to the static list of permissions configured on the application.

A

Registration, uh as you saw in is only has one permission, but it can be multiple permissions and it returns all of them and by calling acquire token on behalf of we can pass that jw token, which is a user session and get the access token. We need to get access to dynamics crm, and then we can set that token to the authorization header and then we can call the caller api and get, and if it returns any data back, uh we can return it to the.

B

A

Web part uh and uh the azure function itself is secured with azure active directory. So this is uh this is a secure, azure function and we also added dynamics crm uh in into the permissions uh for the for, for this uh azure function, uh which you you need to do that, otherwise, it's gonna throw you uh through an error uh for uh getting access to that resource.

A

I think I explain everything so I'm gonna pass it or pass it to you, press it to you guys.

C

All right, sorry, sorry, patrick, if you don't mind, can you go back still to the ux just to recap on how it was working and how it behaves? Sorry, patrick for jumping there just for those.

A

uh Yeah, so uh this sample is mix of uh using aad token provider and also aadhtp client for getting the data when you first load the page, it's using adk http client, which is here, get accounts.

A

But after that, if you start searching or if you want to get, the contacts is using the aad, http client sr ad token.

A

C

Cool looking really good, sorry, sorry, patrick I'm messing airflow jumping in now that I'm back, I'm missing your flow in this course. Sorry for that thank.

B

C

Cheers thanks for coming really quick.

B

Really cool stuff, ramen, uh really great stuff, the off the off stuff is, is always interesting to see how that works, uh because I know it can be tricky at times for.

C