How to gain access to web app(that serves also as api) from SPA application?

Question

How to gain access to web app(that serves also as api) from SPA application?

Max R 0

Hi,
I have a question regarding the solution of using one web app and other spa which needs to call web app to get some data. How to manage the authentication between them? Do you have any suggestions?

I know that for web app I could use sessions and login the user by setting confidential client application. However I also need to be able to silently sign on to the app within the iframe. So the requirements are:

Be able to request data from web app - on the SPA pages.
Be able to authorize in an iframe in a web app (no redirection).
Be able to authorize in a web app (outside of iframe).

I tried few ideas like using msal for silent sign on - but then there are few more questions on how to access to graph api. Usually spa has to request the token for the resource not to a web app. This is confusing. Could someone clarify it to me? What's the best option to set it up?

ajkuma 28,071 Reputation points Microsoft Employee Moderator

2023-12-12T08:30:38.5566667+00:00

Thanks for posting this question.

To better assist you on this, just to clarify, are you leveraging Azure App Service WebApp or Azure Static WebApp? Please provide some more details about your use-case/of your requirement.

Just to highlight, Azure Static Web Apps provides managed authentication that uses provider registrations managed by Azure. Custom authentication also allows you to configure custom providers that support OpenID Connect. This configuration allows the registration of multiple external providers: Custom authentication in Azure Static Web Apps

Ref: How to setup Built-in Authentication for Azure Static Web Apps with Azure Active Directory

To receive insights from the targetted audience/SMEs, I'll have added additional tags.
Max R 0 Reputation points

2023-12-12T16:03:37.9966667+00:00

It's just app registrations. I am not levarging on those you mentioned.

I want to be able to fetch the graph api on the server side. How can I do it? I recall two options - using on user behalf flow or set graph api permissions and fetch it somehow on the server.
ajkuma 28,071 Reputation points Microsoft Employee Moderator

2023-12-14T19:16:08.54+00:00

Thanks for the follow-up and update. You may checkout the suggestions/approaches shared by Bruce.
JamesTran-MSFT 37,211 Reputation points Microsoft Employee Moderator

2023-12-20T23:37:40.7233333+00:00

@Max R

I wanted to check in and see if you had any other questions or if you were able to resolve this issue?

If you have any other questions, please let me know. Thank you for your time and patience throughout this issue.

If the information helped address your question, please Accept the answer. This will help us and also improve searchability for others in the community who might be researching similar information.

1 answer

Your answer

ajkuma 28,071 Reputation points Microsoft Employee Moderator

2023-12-12T08:30:38.5566667+00:00

Thanks for posting this question.

To better assist you on this, just to clarify, are you leveraging Azure App Service WebApp or Azure Static WebApp? Please provide some more details about your use-case/of your requirement.

Just to highlight, Azure Static Web Apps provides managed authentication that uses provider registrations managed by Azure. Custom authentication also allows you to configure custom providers that support OpenID Connect. This configuration allows the registration of multiple external providers: Custom authentication in Azure Static Web Apps

Ref: How to setup Built-in Authentication for Azure Static Web Apps with Azure Active Directory

To receive insights from the targetted audience/SMEs, I'll have added additional tags.
Max R 0 Reputation points

2023-12-12T16:03:37.9966667+00:00

It's just app registrations. I am not levarging on those you mentioned.

I want to be able to fetch the graph api on the server side. How can I do it? I recall two options - using on user behalf flow or set graph api permissions and fetch it somehow on the server.
ajkuma 28,071 Reputation points Microsoft Employee Moderator

2023-12-14T19:16:08.54+00:00

Thanks for the follow-up and update. You may checkout the suggestions/approaches shared by Bruce.
JamesTran-MSFT 37,211 Reputation points Microsoft Employee Moderator

2023-12-20T23:37:40.7233333+00:00

@Max R

I wanted to check in and see if you had any other questions or if you were able to resolve this issue?

If you have any other questions, please let me know. Thank you for your time and patience throughout this issue.

If the information helped address your question, please Accept the answer. This will help us and also improve searchability for others in the community who might be researching similar information.

Answer 1

if I understand, you have a webapi, and a spa application (if spa hosted by seperate website, the webapi need to enable CORS)

typically you would use JWT tokens for the SPA to authenticate with the server. msal will use oauth to get the token, but azure ad (like many oauth providers) does not support authenication via an iframe.

to call the graphapi using SPA token, the app must be register with azure ad and configured to have graphapi access. typically the user will need to authorize the access during login (must admin my prevent this).

so the site hosting the spa, is the app registered site. when authentication is required, the spa redirects to azure login. after login azure redirects back to the hosting site, the hosting reloads the spa passing the token on the url, which msal will parse and make available via get token silently. as typically a refresh token is returned, the msal library can use the refresh to get a new access token. if the refresh token is expired, the the msal library will redirect to login server.

Share via

How to gain access to web app(that serves also as api) from SPA application?

1 answer

Your answer