How to link Angular web app with Azure function app via Azure Active Directory?

Question

I'm currently working on a project where I have to extract data from an Azure function app endpoint through an angular 7 client application. This endpoint is protected with Azure Active Directory, and has been setup through the App registration (preview) UI.

This works very well, as I cannot seem to gain access to these endpoints what so ever now. I've tried with a token bearer through postman, and through the generated code from get url under the function app section. It's completely locked down. I get unauthorized every time.

Steps I've followed

I've setup my angular client as described here in the documentation with the MSAL library. I've used the v2 endpoint to setup my client app connection. I've then connected my function app endpoint via the App registration (preview). I've setup permissions and preauthorized my webapp using its client id - added redirect url to http://localhost:4200 - added the msal module to angular like this:

  MsalModule.forRoot({
      clientID: 'my-client-id',
      redirectUri: 'http://localhost:4200',
      consentScopes: [
        'user.read',
        'https://myapp.azurewebsites.net/user_impersonation'
      ]
    }),

I've tried every possible combination of security setup through the Azure UI, though i'm quite new to Azure, (been working with it for 1 week), i'm close to saying i've been everywhere, not coming any closer.

Every single time i query my endpoint, i get a 401 Unauthorized with the message:

You do not have permission to view this directory or page.

I should add I run my angular website locally.

I do not get redirected to an authorization page even though I've set this up to be the case in the Azure UI - under Azure active directory protection.

I've tried several guides including this one which gives a good idea of what I've done in terms of steps.

I'm running out of ideas, anyone of you have had trouble with this?

EDITS

Server code that has to do with authorization:

public static async Task<HttpResponseMessage> RunGraphQLService([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, ILogger log)

As mentioned in the comments, I send the request to the service just fine, with Authorization: Bearer ey......something which is fine, except the api call is rejected still.

Screenshot of postman, minus sensitive information:

This was all I could think of to provide. As for more information.

Kind regards Chris

Can you share your function code (which is your server effectively) ? — Mavi Domates
– Mavi Domates, Commented Dec 17, 2018 at 14:09
Also - when you're attempting to connect to your server through localhost / does it work? (Do you receive the token is what I'm asking, you might not get re-prompted unless you specified) — Mavi Domates
– Mavi Domates, Commented Dec 17, 2018 at 14:09
I receive an access token upon login, which is sent in the header, as Authorization: Bearer ey....... Sorry, i forgot to add the most obvious part.. — ChrisEenberg
– ChrisEenberg, Commented Dec 17, 2018 at 14:16
I haven't wrote the server, but as i am told, it does not handle any form of authentication. I merely takes a POST request, and returns data.. Nothing with handling tokens. — ChrisEenberg
– ChrisEenberg, Commented Dec 17, 2018 at 14:16

Mavi Domates · Accepted Answer · 2018-12-17 15:49:34Z

2

Aha! Your function is using AuthorizationLevel.Function - which per this documentation you should be passing a specifically generated function key when calling into it.

From the article:

A key can be passed to an Azure Function HTTP request in the URL as the code query string. Alternatively, it can be included in the x-functions-key HTTP header. Only the key value, not its name, is passed.

Function authorization level requires a key for authorization. Both function and host key will work. In that sense it is the less restrictive of key-based authorization level.

So - get your colleague to either generate this key / or give the generated key to you - which you then pass through your angular app in either the x-functions-key header / or pass it in the query string like described :)

Edit and Update

The problem was confirmed to be related to the AuthorizationLevel.Function part of the code. I can't repro this behaviour with Azure functions template (using 2.0 runtime) - I've created a function from the boilerplate template with the classic Run function serving the request and it's working for me. In the chat section Chris mentioned, to mitigate the issue AuthorizationLevel.Function protection was disabled now - pending further examination.

Just another FYI - Azure is not recommending to use the function keys for production protection anyways - those keys can be sniffed out from your front-end requests.

From Functions Documentation:

While keys may help obfuscate your HTTP endpoints during development, they are not intended as a way to secure an HTTP trigger in production. To learn more, see Secure an HTTP endpoint in production.

edited Dec 17, 2018 at 15:49

answered Dec 17, 2018 at 14:33

Mavi Domates

4,5812 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChrisEenberg Over a year ago

I've tried creating a post request in postman with x-functions-key and Authorization: Bearer... and i still get you do not have permissions.. I'll update my question with a screenshot without sensitive data in it.

Mavi Domates Over a year ago

Can you remove the auth bearer token and just send a request with the x-functions-key. Given that you only need to transfer the bearer token to function to not authenticate, but call graph with it, you can send it in any other non-reserved way. Try putting it into the POST request, like {graph_token: '<your token value>'} - then the server side should read that from the post request.

ChrisEenberg Over a year ago

i tried with and without auth bearer in the request, same result. I'm not sure i understand graph_token part. Do you mean in the post body?

Collectives™ on Stack Overflow

How to link Angular web app with Azure function app via Azure Active Directory?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related