Angular 2 Azure Active Directory authentication via ADAL

Question

I'm trying to authenticate an Angular 2 client app (that also uses the Ionic framework) against an Azure Active Directory, and then talk to a .NET Web API.

However I am getting the following error after login:

Login error: AADSTS65001: The user or administrator has not consented to use the application with ID '1cdd3510-c720-44b8-9531-b880f51aa3dd'. Send an interactive authorization request for this user and resource.

When I logged in for the first time I was asked for permission, which I accepted. I can see most of the application, except for the parts reliant on the API. The issue can be resolved by removing the [Authorize] attribute on the API controllers, but this would leave it completely open.

The client application is set up in the Azure Portal as so:

Client application permissions

I enabled all permissions in a last-ditch attempt to get it to work, I have also enabled access to the API application.

My auth service is configured as follows:

private version: string = "-dev";
private config: any = { // web browser
    tenant: "***.onmicrosoft.com",
    clientId: "********-****-****-****-************", // Client ID
    postLogoutRedirectUri: window.location.origin,
    endpoints: {
        ["https://***" + this.version + ".azurewebsites.net/api"]: "https://***.onmicrosoft.com/api"
    },
    cacheLocation: "localStorage"
};
private base: string = "https://***.onmicrosoft.com";
private appId: string = this.base + "/interface";
private apiId: string = this.base + "/api";
private appUri: string = "https://***" + this.version + ".azurewebsites.net"
private apiUri: string = this.appUri + "/api";
private authority = "https://login.windows.net/***.onmicrosoft.com"; // Authority from azure
private nativeClientId = "********-****-****-****-************";     // Ionic app ID
private redirectUri = "http://***app";                               // Ionic app URI
private currentUser: any;                                            // Object representing the current user
private authContext: any;                                            // Auth context from adal.js

And the part of the service that is throwing the error above is:

this.authContext.acquireToken(endpoint, (error, token) => {
    if (error || !token) {
        console.log("Login error: " + error);
        return;
    } else {
        resolve(token);
    }
});

This issue has been going on for quite a while so any help would be much appreciated.

Answer 1

Did you register native application with Web API and vice versa, as shown in https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-app-registration#register-a-web-api . Also add Scope in your .Net web api call with OpenID