Best way to consume External Rest API in PCF Control

(0) Share

Report

Posted on by Dynamics 365 Sumit ...

Hi All,

I have built one sub grid control using Typescript and React JS in Powerapp Control Framework.

Now i want to add some action in this subgrid control . On click of these action , it will rather fetch data from external Rest API or update or create data in external web api too.

So kindly suggest me what's best way to do these Rest API operations in Typescript. Also should i consume Rest API operations in Typescript or its better to consume it in DotNet Plugin and call register that plugin on click of these action buttons or is there any better approach ?

My Concern here is that as Typescript is deployed finally on client side . So if i consume Rest API in Typescript and deploy this control on Powerapp environment then it will reside on Client side application not on server side like we consume rest api in DotNet class file and hence client side deployment might create security risks too.

Any help or suggestion would be appreciated.

Thanks

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (11)

Answers (1)

ScottDurow 1,039 on at

Like (1)

Report

Hi!
It is very common to wrap external API calls inside a Custom Action Plugin - this way your client scripts do not need to have the security information to call the external service.

Information on custom actions - https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/custom-actions
Here are the best practices when calling external services in a plugin - https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/access-web-services

Hope this helps!

Was this reply helpful? Yes No
Dynamics 365 Sumit ... 36 on at

Like (0)

Report

Hi Scott,

Thanks for your comment.

Yes , i am aware about building custom plugins and then registering those plugins against action in CRM.
This plugin can be triggered on ribbon buttons created using Ribbon workbench tool or any other tool.
But i want to create action buttons inside PCF control not by Ribbon workbench , then would i be able to call or trigger custom plugin from action button in PCF.

Also does Typescript not provide any way to hide these external API details not to expose on client side.

Thanks

Was this reply helpful? Yes No
Verified answer

ScottDurow 1,039 on at

Like (1)

Report

Hi,
TypeScript is basically just JavaScript so there is no way of hiding security details once it is running on the client. Any authentication you use on the client will be discoverable if someone wanted to find it.

Calling a custom action via a PCF control is the same way as it would be via a Custom Ribbon Button JavaScript - the only cavate is that Xrm.WebApi.online.execute is not yet documented (and therefore supported) via PCF - but it is there to use if you use just case the Xrm.WebApi to any in Typescript and don't use the PCF provided typings. The alternative supported approach would be to call the WebApi manually using fetch or XMLHttpRequest- see a related discussion here - https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/How-to-call-custom-actions-using-PCF/td-p/360030

Hope this helps!

Was this reply helpful? Yes No
Dynamics 365 Sumit ... 36 on at

Like (0)

Report

Hi Scott,

Thanks for your comment.

About hiding keys in Typescript ,I searched and found below URL which says about creating .env file in project to hide keys. Is it useful
https://medium.com/better-programming/how-to-hide-your-api-keys-c2b952bc07e6/

Also thanks for mentioning approach for custom Action , i will try to follow on that.

Thanks

Was this reply helpful? Yes No
Dynamics 365 Sumit ... 36 on at

Like (0)

Report

Hi Scott,

One More thing, i tried consuming external web api using Fetch in Typescript but its throwing me "Origin blocked by CORS Policy" error.
How can i overcome such type of error .

Thanks

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

Is this in a model driven app or a canvas app?
Can you post the webapi call code you are using?

Was this reply helpful? Yes No
Dynamics 365 Sumit ... 36 on at

Like (0)

Report

Hi Scott,

I am building a control and using it in Model Driven apps. On click of control , its hitting external web api and showing its result too.
So Below is line of code i have written for fetching data from external web api in typescript.

const FetchResult = await fetch("https://xxxxxxxx").then(.....................

Its throwing error CORS Policy error while fetching . I have tried to add mode as "no-cors" but still error is coming.

Thanks

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (1)

Report

Hi - I think the issue is actually to do with the CORS policy of the service you are calling - it must be configured to accept calls from the domain that you are coming from. What is the external service - check if it supports JSONP - https://medium.com/developers-arena/understanding-json-jsonp-cors-and-bypassing-cors-with-jsonp-fa5f0cc4edd4

Was this reply helpful? Yes No
Dynamics 365 Sumit ... 36 on at

Like (0)

Report

Hi Scott,

But my external web service is returning result in XML format not in json.

Thanks

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (3)

Report

JSONP is a mechanism that returns code that includes a callback function to get around CORS - if you can't implement JSONP - then you'll need to set the server up to allow CORS requests from the domain that you are calling it from.
CORS needs to be addressed on the service you are calling, rather than on the client calling it.
https://stackoverflow.com/questions/14221429/how-can-i-produce-jsonp-from-an-asp-net-web-service-for-cross-domain-calls

Hope this helps,

Was this reply helpful? Yes No