Passing username to an external rest-service from SPFx WebPart

[Rickard Nilsson]

Quite often, we need to call external services from client side code. If it is a public API and you know your way around CORS, this is easy. But how do you implement a good authentication flow?

Let’s say you want to build a weather WebPart that pulls data from a WebAPI hosted in Azure. Because it is very secret weather data, the WebApi wants to know who is calling the service.

To do this, you need to send an access token to the WebAPI and you need an endpoint so that the WebAPI can verify this access token.

SharePoint add-ins handle all this for you, but I can’t find any documentation on how to do this without leaving the page you are in. And it doesn’t look like there are any access tokens available in the SharePoint context.

Advice much appreciated.

Please note that this is just a matter of authenticating the user and passing the username to the service, not accessing SharePoint data or services in the name of the user.

[#2]

Hi,
Is this sample not covering your scenario?
Call custom Web API secured with AAD from SharePoint Framework client-side web part
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-aad-webapi

Basically, you need to secure your custom web api using Azure AD, and then, from client side, you can use ADAL.js to get the Access token and call the API.

Let us know if it helps.

[#3]

Hi,

I am sorry that I missed this one. I will try it out and document the result here. 

Cheers,

Rickard

[#4]

Any pointers to solve this when Azure is not in the picture ?

A user on a SharePoint 2013 on premise page calls an external  REST api. How can the REST api authenticate the caller or verify that proof of identify is the resquest (token ?) is genuine ?

Bon, I just realized I'm in an spfx thread 😞 So not the best place to put this question. 

[#5]

It depends on How the external rest API authentication is configured, and also depends if the call inside an SP 2013 page is using server side code (custom webpart/page using Farm solutions), or just JavaScript.

[#6]

Hi Luis, thanks for responding to this

The external REST API is under my control, I can configure it's authentication any way I want.
It is Node.js implemented and runs on windows server 2016

The call from the SP2013 page is via JavaScript.
I would like to keep it that way if at all possible. 
But if a farm solution, in a supporting role, is necessary to make this work, it is possible too.

In my simple world the client side js would be able to obtain a 'token', send it to the REST API and the API would be capable of verifying the token is genuine.
But I might see things too simple 🙂 

Thanks again for your feedback on this

[#7]

I guess the most standard way here is to enable oAuth 2 with OpenID Connect support in your API. No idea about how to do that with NodeJS, but I guess is possible (quick search in google give me this library: https://github.com/agmoyano/OpenIDConnect). If your API was asp.net, then you could use IdentityServer, to configure the oAuth server for the API.

Once oAuth 2 / OpenID Connect is configured, you have to get a Bearer Token to call your API. From JavaScript is a bit complex, first because the server has to allow the Implicit flow, and second cos the libraries to deal with oAuth2 are not easy. You can take a look to Hello.JS or ADAL.JS (that's the one from MS, so I'm not sure if only works fine with Azure AD). There's another JS library from the same guys that created IdentityServer (https://github.com/IdentityModel/oidc-client-js)

If you use server side code in the "client" (SP page), then it could be a bit easier, as you can use other oAuth flows to get the Token.

It's not easy stuff, and I'm far from being an expert 🙂

Hope it helps.

[#8]

"It's not easy stuff" ... eactly 

Looked into what you wrote, and think I understand it (more or less)

I think my problem remains that the user is already logged in into SharePoint (on-premise) and don't want him to have an account somewhere else (google, facebook) and/or ask him (the user) to re-submit his username/password (so that my API could verify it) .....

Still some research to do .....

[#9]

if your NodeJS API is also in your On Premises infrastructure, maybe you could do some SSO between SP and your API (this is possible with WCF services hosted on IIS using Windows Authentication, but no idea when the API is in Nodejs). Perhaps start searching by Nodejs Windows Auth + SSO + SharePoint
Please, keep us posted if you find a solution, as is a very interesting scenario.
Good luck!

[#10]

Any update on this?  I am also looking to implement using Sharepoint authentication against an external API without having any input from the user.

The closes I've found is using HttpClient to pass credentials as described in this tutorial.  I've hit a blocker unfortunately.  The Authorisation header is there - but its empty!

[#11]

Recently the SharePoint spfx team has released a new Azure AD Http Client that helps to call Azure AD Secured APIs from spfx. Have a look here:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-api-secured-with-...
https://www.youtube.com/watch?v=_9fGXZ4ocp4&index=3&t=0s&list=PLR9nK3mnD-OUnJytlXlO84fQnYt50iTmS

Luis.

[#12]

@Butch Marshall

Hi butch, have you ever found an answer to the question (user already logged in to SharePoint.....) ? 

[#13]

@Danny Foncke Yep!

I use a Microsoft Graph JWT.

I verify the JWT is genuine using the keys microsoft publishes and thus can trust that is the logged in user.

[#14]

May be someone could help me there : https://social.msdn.microsoft.com/Forums/en-US/a5bb4435-ff29-447a-b5dc-86d3d75c7ca4/best-way-to-conn...