cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
alandres2628
Frequent Visitor

Configure external API Rest in power pages

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.

1 ACCEPTED SOLUTION

Accepted Solutions
eugenevanstaden
Resolver III
Resolver III

@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 ...

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>









View solution in original post

3 REPLIES 3
Fubar
Solution Sage
Solution Sage

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.

alandres2628
Frequent Visitor

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.

eugenevanstaden
Resolver III
Resolver III

@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 ...

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>









Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Users online (4,152)