Unanswered

Configure external API Rest in power pages

(1) Share

Report

Posted on by Feder

Hello everyone.

We are designing a portal for a client using power pages. We have some external APIs by the client (they return PDF). We have done tests with js and everything goes well, we can visualize those pdf.

Using the help of Postman we use Javascript fetch. We do not know how to implement the authentication and the URL in power page, for security we must configure that part.

Also comment that the URL of the queries there are values that we concatenate with code liquid, I explain:

On one page we display the details of a record from our CRM using:

{% if request.params.id %}
{% assign invoice = entities['dev_invoice'][request.params.id] %}

This way I can use invoice.dev_numberInvoice inside a variable:

var number = '{{dev_numberInvoice}}'; //dev_numberInvoice is a column of my table

And in the API URL it would be something like this:

var myHeaders = new Headers();
 myHeaders.append(
 "Authorization",
 "tokentokentokentokenslkjdlskdjlsakdj"
 );

 var requestOptions = {
 method: "GET",
 headers: myHeaders,
 redirect: "follow",
 };
var urlAPI = "https://customercompany.com/api/v1/customer/22/invoice/" + number;

fetch(urlAPI, requestOptions)
.then........

You can see that the 22 of the URL can be another field, a lookup

I have been able to do all this within the editor at the bottom of the power page, but of course it would not be correct.

How can I configure the token that this external API gives us in power pages? I have seen Nodejs being used, but I don't know if I can use all of that within the microsoft environment.

I would appreciate help or knowing where I can start.

Thank you very much.

Best Regards.

Categories:

Customize & extend

I have the same question (0)

All responses (3)

Answers (1)

Fubar 8,338 Super User 2025 Season 2 on at

Like (0)

Report

If the info for your API is private (e.g. username/password) then you would need to use the Portals Implicit Grant Flow (https://docs.microsoft.com/en-us/power-apps/maker/portals/oauth-implicit-grant-flow), where you can keep the secret stuff where it is not exposed. If it is just a public value and a key, you can create another Table in Dataverse and hold the value in there and then query that Table from liquid.

Was this reply helpful? Yes No
Feder 42 on at

Like (0)

Report

Hello @fubak

I see that the custom certificate configuration has been deprecated. On the other hand, I have seen that from Azure Active Directory there is a configuration that is made of the server, I am not sure if this is correct, an example like this.
example implicit flow oauth
I don't know if anyone has done something like that.

Thank you very much.

Was this reply helpful? Yes No
Verified answer

eugenevanstaden 441 on at

Like (1)

Report
@alandres2628

You need to enable implicit grant flow and then with your custom api validate the token that you receive from the portal - this is if you want to offload to the API. The Portal is the issuer of the token and the JWT will represent the logged in user.

Here is an example of a Portal API that

GitHub - eugenevanstaden/d365-portal-companion-api: Sample API demonstrating how to configure OAuth to authenticate against D365 portal

Note the D365PortalAuthenticationExtensions class - as this is how you validate the token.

If you want to call the 3rd party directly then your code above would be fine, the only issue is that you will be exposing the keys in Javascript, whereas the above Companion App example you don't expose any keys.

I use this implicit grant flow approach in all my portal projects where we need 3rd party integration.

Example of getting the token and calling an endpoint on the Companion App

<script> $("#checkout-btn").click(function () { $.ajax({ method: "POST", cache:false, url: "{{authUrl}}", }) .done(function (token) { $.ajax({ method: "GET", headers: { 'Authorization': "Bearer " + token }, url: '{{companionAppUrl}}/payment/request?id={{id}}' }).done(function (data) { window.location.href = data.paymentUrl; }).fail(function (error) { $("#payment-service-alert").show(); }); }); }); </script>

Was this reply helpful? Yes No