Azure Question posted in
The official documentation to get you started can be found here.

Azure Function App authentication using Azure B2C

I have a single-page application (SPA) developed with Vue.js and hosted on Azure App Services that is using Azure B2C and MSAL 2.8.0 for authentication. The web APIs called by the SPA are developed with .NET 8.0 and implemented as Azure Functions (Function Apps). I want to use the same B2C tenant to authenticate the Azure Functions using Easy Authentication once the user is logged into the SPA. However, I keep receiving a 403 error code when I pass the CORRECT bearer token to the Functions App after user authentication. I have been following the guidance from this Microsoft documentation (https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-spa-app) but have not had any success. See Picture of the Function App Authentication configurationAzure Function App Authentication

Tags:

2

Answers


  1. 0

    To authenticate Azure Function App using Azure B2C, check the below:

    Create an Azure AD B2C application and expose an API:

    enter image description here

    Grant API permissions for the exposed scope:

    enter image description here

    Create Azure function and for sample I created an HTTP trigger:

    enter image description here

    Adding Identity provider as Microsoft and passed the values of Azure AD B2C application:

    enter image description here

    As you are using SPA authentication, configure the redirect URL as SPA with URL as https://YourfunctionAppName.azurewebsites.net/.auth/login/aad/callback

    enter image description here

    For sample, I generated token via Postman using PKCE:

    client_id:ClientID
grant_type:authorization_code
callback_uri:https://rukfuncapp1.azurewebsites.net/.auth/login/aad/callback
code_challenge_method:SHA-256
scope:https://b2c.onmicrosoft.com/ClientID/API.Call

    ![enter image description here](https://i.imgur.com/xT6Hram.png)

    Generated access token:

    enter image description here

    The 403 error usually occurs if the access token does not contain correct scopes to perform the action.

    To resolve the error, make sure to pass correct scope and correct redirect URL as I did.

    • Check whether you are passing access token or ID token.

    Make sure when decoded the contains scope:

    enter image description here

    When I used the above access token to call the Azure function it is successful like below:

    https://rukfuncapp1.azurewebsites.net/api/HttpTrigger1?code=XXX

    enter image description here

    If the Azure function is not configured as Anonymous, then make sure to pass the header as x-functions-key : FunctionURLCodeValue.

    Login or Signup to reply.
  2. 0

    I banged my head against the wall for hours. So I create an account just to answer this question.

    First of all what Rukmini shown is not the same senario as what user3614070 ask. His accesstoken work because his App authenticate the azure function directly. which is not the same as the ms. tutorial (https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-spa-app).

    user3614070, There is nothing wrong with your token. The thing that screw you up is the Authetication setting of your Azure function. The 403 you saw is from Azure function reject the call from your client app.

    To fix this
    Go to Your-function > Authentication > Edit identity provider

    scroll down and you should see "Client application requirement". Next you change the setting to Allow requests from specific client applications and
    now you should see Allowed client applications. add your clientAppId then hit save.

    This will tell azure function to allow the request from your client app to go through.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search