Code Monkey home page Code Monkey logo

ms-identity-javascript-angular-tutorial's Introduction

ms-identity-javascript-angular-tutorial

This sample has been archived and is no longer being maintained. You can find a more recent version of this sample here

For access to the project files, please visit the branch archive.

Disclaimer

The sample in this repository is no longer maintained and is kept for historical reasons. The sample in the main branch is not guaranteed to work with the latest versions of the libraries it depends on.

ms-identity-javascript-angular-tutorial's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ms-identity-javascript-angular-tutorial's Issues

Maintaining App Roles in both SPA and API

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Follow the tutorial step by step.

It seems like you have to map users/groups to App Roles BOTH for the SPA and and API in the Enterprise Apps.

In our UI, we would like to conditionally render buttons/pages/menues matching the users access to the underlying API. It is possible if we configure the App Roles in both the SPA and the API (like shown in this tutorial). However it seems fragile that the administrator will have to maintain the accesses in two places.

In this tutorial the angular app will look at the idToken's roles, and the api will look at the accessToken's roles.

Is there a way to consolidate these accesses in one place? Or somehow pass the App Roles from the SPA to the API?

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Not browser related

Mention any other details that might be useful

Same question was asked on stackoverflow by another user: https://stackoverflow.com/questions/62214073/azure-role-based-web-and-api-using-same-app-roles

Forget passeword returns with AADB2C error code

When I ran the following sample code, I can login and logout without any issues. However, when I click on "Forgot your password?" link it redirects back with server_error: AADB2C: An exception has occurred. see below.
https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/2-call-api-b2c

image

What is the best way to fix this.

Also, can we initiate rest password flow while the user is logged in (i.e without going to the login page)?

Azure B2C and Angular app (V 11.0)

Issue

Please provide us with the following information:

I used the sample app from "ms-identity-javascript-angular-tutorial-main\3-Authorization-II\2-call-api-b2c" for a sample app. Login works fine and I can see the claims info (username, email account) but when I click on "TodoList" button, the app goes into a continuous loop/ redirect. Tried to create custom component with "handleRedirectObservable()" option but still no luck. Any help is appreciated!

This issue is for the sample

ms-identity-javascript-angular-tutorial-main\ms-identity-javascript-angular-tutorial-main\3-Authorization-II\2-call-api-b2c

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Running the app locally.

Any log messages given by the failure

It logs to console but unable to capture the logs. I can create a video for it , if needed.

Expected/desired behavior

I should be able to view the results from backend api.

Library version

Angular V 11.0 and backend .net 5.0

Browser and version

Chrome, Edge

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Authorization header not getting added to http PUT and DELETE

Issue

Authorization header automatically gets added by HttpInterceptor to GET,POST and OPTIONS but we have to manually add it to PUT and DELETE request. If we don't add "Authorization: 'Bearer ' + token" to PUT and DELETE, then we get 401 Unauthorized error.

Openid-configuration returns Response Headers Allow: OPTIONS,TRACE,GET,HEAD and POST. Will that be an issue? We are using custom policies for this.
image

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

We are using Angular V 11.2.9 and the latest MSAL npm packages (updated few days back)
"@azure/msal-angular": "^2.0.4",
"@azure/msal-browser": "^2.18.0"

Any log messages given by the failure

Expected/desired behavior

Library version

Angular V 11.2.9
"@azure/msal-angular": "^2.0.4",
"@azure/msal-browser": "^2.18.0"

Browser and version

Chrome, Edge, Firefox, Safari?
Chrome Version 96.0.4664.45

Mention any other details that might be useful

Thanks! We'll be in touch soon.

API Issue - 500 Error

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ x] documentation issue or request

Minimal steps to reproduce

So I managed to register a user and log in, but it fails when I am trying to reach the Todo List.(access the API)

Any log messages given by the failure

An unhandled exception occurred while processing the request.
UriFormatException: Invalid URI: The format of the URI could not be determined.
System.Uri.CreateThis(string uri, bool dontEscape, UriKind uriKind)

UriFormatException: Invalid URI: The format of the URI could not be determined.
System.Uri.CreateThis(string uri, bool dontEscape, UriKind uriKind)
System.Uri..ctor(string uriString)
Microsoft.Identity.Web.AuthorityHelpers.BuildAuthority(MicrosoftIdentityOptions options)
Microsoft.Identity.Web.MicrosoftIdentityWebApiAuthenticationBuilderExtensions+<>c__DisplayClass3_0.b__0(JwtBearerOptions options, IServiceProvider serviceProvider, IOptionsMonitor microsoftIdentityOptionsMonitor)
Microsoft.Extensions.Options.ConfigureNamedOptions<TOptions, TDep1, TDep2>.Configure(string name, TOptions options)
Microsoft.Extensions.Options.OptionsFactory.Create(string name)
Microsoft.Extensions.Options.OptionsMonitor+<>c__DisplayClass11_0.b__0()
System.Lazy.ViaFactory(LazyThreadSafetyMode mode)
System.Lazy.CreateValue()
System.Lazy.get_Value()
Microsoft.Extensions.Options.OptionsCache.GetOrAdd(string name, Func createOptions)
Microsoft.Extensions.Options.OptionsMonitor.Get(string name)
Microsoft.AspNetCore.Authentication.AuthenticationHandler.InitializeAsync(AuthenticationScheme scheme, HttpContext context)
Microsoft.AspNetCore.Authentication.AuthenticationHandlerProvider.GetHandlerAsync(HttpContext context, string authenticationScheme)
Microsoft.AspNetCore.Authentication.AuthenticationService.AuthenticateAsync(HttpContext context, string scheme)
Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Hello, regarding the sample: https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/2-call-api-b2c

In the steps asks at some point:
Quote: Find the variable scopeRequiredByApi and replace its value with the name of the API scope that you have just exposed (by default demo.read)
The value is what more exactly, the scope name like access_as_user ?

Also for:
Find the key Instance and replace the existing value with your Azure AD B2C tenant name.
Find the key Domain and replace the existing value with your Azure AD B2C tenant name.
Is the same thing no ?
And it should be tenantname.onmicrosoft.com correct ?

Thanks! We'll be in touch soon.

Documentation is outdated

Issue

Hello,

This is just a request for information regarding the documentation.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

I have been trying to make the project working this afternoon, by following this documentation:

https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

However, the documentation does not seem to be in sync with the repository anymore. I have tried to follow the configuration specified, but instead of this from the documentation:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

I found this code, without the protectedResources part:

/**
 * This file contains authentication parameters. Contents of this file
 * is roughly the same across other MSAL.js libraries. These parameters
 * are used to initialize Angular and MSAL Angular configurations in
 * in app.module.ts file.
 */

import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

/**
 * Enter here the user flows and custom policies for your B2C application,
 * To learn more about user flows, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
 */
export const b2cPolicies = {
    names: {
        signUpSignIn: 'B2C_1_susi_v2',
        resetPassword: 'B2C_1_reset_v3',
        editProfile: 'B2C_1_edit_profile_v2',
    },
    authorities: {
        signUpSignIn: {
            authority: 'https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi_v2',
        },
        resetPassword: {
            authority: 'https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_reset_v3',
        },
        editProfile: {
            authority: 'https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_edit_profile_v2',
        },
    },
    authorityDomain: 'fabrikamb2c.b2clogin.com',
};

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
 */
export const msalConfig: Configuration = {
    auth: {
        clientId: '9067c884-9fa6-414f-9aa4-a565b1cb46be', // This is the ONLY mandatory field that you need to supply.
        authority: b2cPolicies.authorities.signUpSignIn.authority, // Defaults to "https://login.microsoftonline.com/common"
        knownAuthorities: [b2cPolicies.authorityDomain], // Mark your B2C tenant's domain as trusted.
        redirectUri: '/auth', // Points to window.location.origin by default. You must register this URI on Azure portal/App Registration.
        postLogoutRedirectUri: '/', // Points to window.location.origin by default.
    },
    cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: isIE, // Set this to "true" if you are having issues on IE11 or Edge. Remove this line to use Angular Universal
    },
    system: {
        /**
         * Below you can configure MSAL.js logs. For more information, visit:
         * https://docs.microsoft.com/azure/active-directory/develop/msal-logging-js
         */
        loggerOptions: {
            loggerCallback(logLevel: LogLevel, message: string) {
                console.log(message);
            },
            logLevel: LogLevel.Verbose,
            piiLoggingEnabled: false
        }
    }
}

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile) to any login request.
 * For more information about OIDC scopes, visit:
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: []
}

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "loginHint" property (such as a username). For more, visit:
 * https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-sso#sso-between-different-apps
 * If you do not receive the username claim in ID tokens, see also:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md#why-is-getaccountbyusername-returning-null-even-though-im-signed-in
 */
export const silentRequest = {
    scopes: [],
    loginHint: "[email protected]"
};

At least, this is what I found in the folder ms-identity-javascript-angular-tutorial-main\ms-identity-javascript-angular-tutorial-main\1-Authentication\2-sign-in-b2c\SPA\src\app.

In Authorization-II\2-call-api-b2c\ I found an auth-config.ts with protected resources but when running the project and clicking on "Sign In" I get an error:

core.mjs:9171 ERROR Error: Uncaught (in promise): ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://pickspma.onmicrosoft.com.b2clogin.com/pickspma.onmicrosoft.com/b2c_1_susi_v2/v2.0/.well-known/openid-configuration
ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://pickspma.onmicrosoft.com.b2clogin.com/pickspma.onmicrosoft.com/b2c_1_susi_v2/v2.0/.well-known/openid-configuration
    at ClientAuthError.AuthError [as constructor] (AuthError.js:31:24)
    at new ClientAuthError (ClientAuthError.js:216:28)
    at ClientAuthError.createEndpointDiscoveryIncompleteError (ClientAuthError.js:253:16)
    at Function.<anonymous> (AuthorityFactory.js:42:31)
    at step (_tslib.js:75:23)
    at Object.throw (_tslib.js:56:53)
    at rejected (_tslib.js:47:47)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26274:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26274:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26261:33)

Can you please confirm my reasoning is correct and that the documentation and sample source code are not in sync?

Any log messages given by the failure

see in previous answer

Expected/desired behavior

Documentation matching with repository source code

Please note I didn't follow this documentation:

https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/1-Authentication/2-sign-in-b2c/README-incremental.md

Is it the one to follow?

Library version

N/A

Browser and version

Chrome 108.0.5359.124

Best Regards,
Nicolas

When using the MSALGuard and RoleGuard on a route, the Role guard will allow access even if the user does not have the correct role

Issue

When using the MSALGuard and RoleGuard on a route, the Role guard will allow access even if the user does not have the correct role!
This is due to the fact that there is no guard sequence in Angular.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Change the sample so that the root of the app also needs the MSALGuard, this will trigger the login sequence as soon as someone uses the website. In other words no need for the LOGIN button.
Open a new InPrivate windows and navigate straight to an URL that has both guards active.
If there was no previous login, the user is redirected to the Azure AD login flow, BUT the RoleGuard already finished it's check and returned TRUE ( https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/5-AccessControl/1-call-api-roles/SPA/src/app/role-guard.service.ts#L34 ).
Due to the fact that there were no accounts available yet.

After the login flow of Azure AD the Role guard is no longer checked and the user is presented with the URL he typed in, although he should not be able to see it.

Expected/desired behavior

Role checks can only be done after an account has been acquired AND should be done each time!

Library version

msal-angular: ^2.1.2
angular 13 & 14

Browser and version

Edge

Mention any other details that might be useful

I know this is a limitation of Angular ( there is no guard replay or guard order ), but this Role check example should compensate for this somehow. Because if we want to use role guarding, it should always be checked when we have the user roles available.

Use Angular's own router when handling redirect response

Issue

Currently when handling the redirect response, MsalRedirectComponent does not take advantage of Angular router, which is causing page reloads when redirecting, causing assets to load more than necessary. See the original issue: The application is reloaded after signing in, the files are downloaded again.

This issue is for the sample

    - [ x ] 1-1) Sign-in with Azure AD
    - [ x ] 1-2) Sign-in with Azure AD B2C
    - [ x ] 2-1) Acquire a Token and call Microsoft Graph
    - [ x ] 3-1) Protect and call a web API on Azure AD
    - [ x ] 3-2) Protect and call a web API on Azure AD B2C
    - [ x ]   4) Deploy to Azure Storage and App Service
    - [ x ] 5-1) Call a web API using App Roles
    - [ x ] 5-2) Call a web API using Security Groups
    - [ x ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ x ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Question - multiple consents needed

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

follow the documentation for the scenario

Hello,

I went through the scenario 3-1 and i was wondering why do I have to consent 2 times ?

I had one popup after the Login
010-consent

And one when I first clicked the TodoList button

012-todolist

I was expecting to get only one consent

Error in Protect and call a web API on Azure AD 'invalid client id'

Error "invalid_client: 70002 - [2021-07-29 11:26:28Z]: AADSTS70002: The provided request must include a 'client_secret' input parameter"

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [X ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

-login button
-after I redirect in microsoft login and successfully authenticated , it redirects me again in the homepage

Any log messages given by the failure

invalid_client: 70002 - [2021-07-29 11:26:28Z]: AADSTS70002: The provided request must include a 'client_secret' input parameter Trace ID: cb197be3-0850-4322-82b1-c18a4b480f00
Correlation ID: be4946fd-1a44-46b6-ad2e-345a1b09bdfa
Timestamp: 2021-07-29 11:26:28Z - Correlation ID: be4946fd-1a44-46b6-ad2e-345a1b09bdfa - Trace ID: cb197be3-0850-4322-82b1-c18a4b480f00

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Error when starting application: Unsupported digital envelope routines: [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.

- [x] 1-1) Sign-in with Azure AD
- [ ] 1-2) Sign-in with Azure AD B2C
- [ ] 2-1) Acquire a Token and call Microsoft Graph
- [ ] 3-1) Protect and call a web API on Azure AD
- [ ] 3-2) Protect and call a web API on Azure AD B2C
- [ ]   4) Deploy to Azure Storage and App Service
- [ ] 5-1) Call a web API using App Roles
- [ ] 5-2) Call a web API using Security Groups
- [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
- [ ] 6-2) Call a multi-tenant web API
  • bug report

Minimal steps to reproduce

  1. Run npm start in the project directory. like ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA
  2. Observe the error message.

Any log messages given by the failure

Generating browser application bundles...(node:34444) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
\ Generating browser application bundles (phase: building)...node:internal/crypto/hash:80
this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:80:19)
at Object.createHash (node:crypto:139:10)
at module.exports (C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\webpack\lib\NormalModule.js:452:10
at C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\webpack\lib\NormalModule.js:323:13
at C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\onedrive\skripte\git\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA\node_modules\babel-loader\lib\index.js:59:103
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
opensslErrorStack: [
'error:03000086:digital envelope routines::initialization error',
'error:0308010C:digital envelope routines::unsupported'
],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Expected/desired behavior

The application should start without errors.

Library version

Node.js v20.12.2

Mention any other details that might be useful

The error seems to be related to unsupported digital envelope routines.

After login, need another layer of Admin approval when trying to access API

Issue

https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/3-Authorization-II/1-call-api/README.md#run-the-sample

After following the sample readme, encouter the issue similar with #44, saying admin approval is needed.

I am using the tenant account and registered all the service and api as readme requires.

This issue is for a

- [* ] bug report -> please search issues before submitting
- [ ] question
- [ ] feature request
- [ ] documentation issue or request

How to maintain multiple ClientID's in Multitenant scenario with Vendor, Customers and a Microsft Tenant

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [X ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

We have an Multi-tenant angular 14 SPA app connecting to our own vendor tenant, our customers will use this scenario to login on our SPA app with their own Microsoft Indentity. Sofar so good, the SPA app also needs to connect to the D365 Business Central API wich is a Microsoft tenant where each customer has an app-registration to access their D365 Business Central API. How to enable this scenario providing the correct client-id for each customer when connecting to the protected route tps://api.businesscentral.dynamics.com/v2.0/{{tenantId}}, it needs to use an different ClientId for each customer tenantId, to acquire the proper token.

Any log messages given by the failure

ERROR ServerError: invalid_client: AADSTS650057: Invalid resource. The client has requested access to a resource which is not listed in the requested permissions in the client's application registration. Client app ID: {clientId}} (ES2 Portal Login). Resource value from request: https://api.businesscentral.dynamics.com. Resource app ID: xxxxxxxx. List of valid resources from app registration: 00000003-0000-0000-c000-000000000000.

Expected/desired behavior

Library version

"@azure/msal-angular": "^2.5.2",

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.

Issue

Please provide us with the following information:

This issue is for the sample ms-identity-javascript-angular-tutorial. After following the instructions explicitly I am getting the following error when attempting to login.

ERROR ServerError: invalid_request: 9002326 - [2021-09-03 14:20:13Z]: AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
Trace ID: 40e5a04a-6016-42c3-b32f-0b9f20b61500
Correlation ID: b5a1a372-ed08-48a7-95e6-f7ab55489f03
Timestamp: 2021-09-03 14:20:13Z - Correlation ID: b5a1a372-ed08-48a7-95e6-f7ab55489f03 - Trace ID: 40e5a04a-6016-42c3-b32f-0b9f20b61500
at ServerError.AuthError [as constructor] (AuthError.ts:40)
at new ServerError (ServerError.ts:14)
at ResponseHandler.validateTokenResponse (ResponseHandler.ts:99)
at AuthorizationCodeClient. (AuthorizationCodeClient.ts:82)
at step (vendor.js:124872)
at Object.next (vendor.js:124802)
at fulfilled (vendor.js:124756)
at ZoneDelegate.invoke (zone.js:386)
at Object.onInvoke (core.js:28301)

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [X ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ X] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Simply follow the instructions (btw you should check over the documentation b/c there are clear copy pasta errors there as well, you reference a "ToDoList" controller which does not exist, I believe you mean the ProfileController.

Any log messages given by the failure

ERROR ServerError: invalid_request: 9002326 - [2021-09-03 14:20:13Z]: AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
Trace ID: 40e5a04a-6016-42c3-b32f-0b9f20b61500
Correlation ID: b5a1a372-ed08-48a7-95e6-f7ab55489f03
Timestamp: 2021-09-03 14:20:13Z - Correlation ID: b5a1a372-ed08-48a7-95e6-f7ab55489f03 - Trace ID: 40e5a04a-6016-42c3-b32f-0b9f20b61500
at ServerError.AuthError [as constructor] (AuthError.ts:40)
at new ServerError (ServerError.ts:14)
at ResponseHandler.validateTokenResponse (ResponseHandler.ts:99)
at AuthorizationCodeClient. (AuthorizationCodeClient.ts:82)
at step (vendor.js:124872)
at Object.next (vendor.js:124802)
at fulfilled (vendor.js:124756)
at ZoneDelegate.invoke (zone.js:386)
at Object.onInvoke (core.js:28301)

Expected/desired behavior

To be able to log in.

Library version

latest

Browser and version

Chrome

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Angular router.navigate not working inside a subscribe of acquireTokenSilent or loginPopup

Issue

Please provide us with the following information:

This issue is for the sample

    - [x ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

In the angular project I´m working I´m migrating to use the MsalService. I have already working and the pop up appears, and it gives back a successful response. I have the below code:

      this.msalService.loginPopup().subscribe(
        (response: AuthenticationResult)=>{
          console.log(response);
          this.isLoginInProcess=false;
          this.msalService.instance.setActiveAccount(response.account);
           this.router.navigate(['/theRouteIWantToOpen']);
        }
      );

At the end of the login I want to open the route: theRouteIWantToOpen however that it is not happening, the route keeps being the http://localhost:4200/
I tried to check if an error was happening by adding a "then" after the call of navigate, and added a console.log on the sucess response, and it indeed goes to the flow of expected successful response, but the router does goes to the theRouteIWantToOpen.

The same happened when there is an active account, and I try to call the acquireTokenSilent to validate the access.

this.msalService.acquireTokenSilent(request).toPromise().then(
      (result)=>{
        console.log("Success acquiring token");
        this.router.navigate(['/theRouteIWantToOpen']);
      }
    ).catch((error)=>{
      console.log("ERROR aquiring token");
      this.router.navigateByUrl('/login');
    });

Nothing happens on success.

A msalGuard is not configured, a custom guard is configured.

Any log messages given by the failure

There are no error messages, the last messages are:

[Wed, 01 Mar 2023 20:52:42 GMT] : @azure/[email protected] : Info - Emitting event: msal:acquireTokenSuccess
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : @azure/[email protected] : Verbose - Emitting event to callback e4bee3fb-5b51-4c92-a061-5de8b50f84e6: msal:acquireTokenSuccess
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/[email protected] : Verbose - PerformanceClient: Measurement found for acquireTokenSilent
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/[email protected] : Verbose - PerformanceClient: Submeasurement for acquireTokenSilent already exists for standardInteractionClientGetDiscoveredAuthority, ignoring
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/[email protected] : Verbose - PerformanceClient: Emitting performance events

Expected/desired behavior

navigate to other route once the popup login is finished or when the token was acquired silently in the first login

Library version

"@angular/core": "~10.1.0",
"@azure/msal-angular": "^2.0.2",
"@azure/msal-browser": "^2.16.0",

Browser and version

Chrome Version 109.0.5414.120 (Official Build) (64-bit)

how to enables CAE in Azure

..\ms-identity-javascript-angular-tutorial\2-Authorization-I\1-call-graph\SPA

  1. I have logged in user1 and clicked on profile getting and showing in Page correctly
  2. Now I have reset the user password in Active directory User.
  3. The Angular application if click on Profile or contacts it is showing profile data instead of asking the username of re-login due to CAE. From Profile GraphAPI i am always getting the 200 status instead of 401. Please let me know any configuration is missed.

Sample application is working every time 200 status even I resetpassword/revoke session.
Expected: It should ask re-login when change password or revoke session of user in AD.

Please help me we need to implement in our project.

cd ../ cd API dotnet run

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Error invalid_token - The audience is invalid

Issue

The front authentication is well but when I request the backend I have a 401 response with :

www-authenticate Bearer error="invalid_token", error_description="The audience 'xxxxxxx' is invalid"

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I just followed the steps. The only modification is that I updated azure/msal-angular (2.0.0-beta.6) and @azure/msal-browser (2.14.2)

Any log messages given by the failure

Here is my token
{
"aud": "xxxxxxxxx",
"iss": "https://login.microsoftonline.com/98731832-xxxxxxxx-f68390800051/v2.0",
"iat": 1622482003,
"nbf": 1622482003,
"exp": 1622485903,
"aio": "AVQAq/8TAAAApcE99DC5d8+fiGXeX+4YQiGQk2LRAkoW0/2ef6TjiO9eFSxeWuF4+GL4awP6FUtCGFN89WltByAUrmjhuOASSNT9TXUU+wzhGN0siQXU5pc=",
"azp": "c8919a3e-aaaa-42c0-b573-533e717bacb8",
"azpacr": "0",
"name": "LOUANDRE Gwenael",
"oid": "d7bbb0e4-2dd3-4c76-9160-uuuuuu",
"preferred_username": "[email protected]",
"rh": "0.AQUAMhhzmNpARkWSA_aDkIAAUT6akciqqsBCtXNTPnF7rLgFAHY.",
"scp": "access_as_user",
"sub": "BomEbk_RNwYiVRKpjPfANmUhtFzkj3kCef1qMH0iatU",
"tid": "98731832-40da-4546-9203-f68390800051",
"uti": "MqVE0aYsTEautUNWTdMhAQ",
"ver": "2.0"
}

Browser and version

Chrome, Firefox

I found several posts on stackoverflow about that problem but no one corrects the problem. What am I doing wrong?
Thanks! We'll be in touch soon.

untrusted_authority issue when testing the sample with private B2C tenant

Issue

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [X] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [X] bug report -> please search issues before submitting
    - [X] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Clone the repo, install all dependencies, add B2C tenant information and policies in auth-config.ts

Any log messages given by the failure

Dev Tools console error:

ERROR Error: Uncaught (in promise): ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientConfigurationError: untrusted_authority: The provided authority is not a trusted authority. Please include this authority in the knownAuthorities config parameter.
ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientConfigurationError: untrusted_authority: The provided authority is not a trusted authority. Please include this authority in the knownAuthorities config parameter.

Expected/desired behavior

Library version

"@azure/msal-angular": "^2.0.2",
"@azure/msal-browser": "^2.16.0"

Browser and version

Chrome and Edge

Mention any other details that might be useful

I was following the tutorial steps and ran into this issue
2021-09-16_15h20_08

Help with Error : IDX10503: Signature validation failed. The token's kid is: 'MYKEYID', but did not match any keys in TokenValidationParameters or Configuration. Keys tried

Issue

ms-identity-javascript-angular-tutorial-main\3-Authorization-II\1-call-api

I've followed several of the samples here, but this one was the main one. I am having issues with both my code and this sample. I've either done something wrong, or a configuration in azure is missing.

After following all the steps provided, setuping up the App Registration and the API Registration and adding the required TOKEN/ID's to both the sample and my own app, I get the following error when my app tries to access an "Authorize" protected API in the controller layer.

Microsoft.IdentityModel.LoggingExtensions.IdentityLoggerAdapter: Error: IDX10503: Signature validation failed. The token's kid is: 'MYKEYID', but did not match any keys in TokenValidationParameters or Configuration. Keys tried: 'Microsoft.IdentityModel.Tokens.X509SecurityKey, KeyId: 'SomeKeyid', InternalId: 'SomeKeyid'. , KeyId: SomeKeyid
Microsoft.IdentityModel.Tokens.RsaSecurityKey, KeyId: 'SomeKeyid', InternalId: 'SomeKeyid'. , KeyId: SomeKeyid
Microsoft.IdentityModel.Tokens.X509SecurityKey, KeyId: 'q-SomeKeyid', InternalId: 'SomeKeyid'. , KeyId: SomeKeyid
Microsoft.IdentityModel.Tokens.RsaSecurityKey, KeyId: 'SomeKeyid', InternalId: 'SomeKeyid'. , KeyId: q-23falevZhhD3hm9CQbkP5MQyU
Microsoft.IdentityModel.Tokens.X509SecurityKey, KeyId: 'SomeKeyid-zY', InternalId: 'SomeKeyid-zY'. , KeyId: SomeKeyid-zY
Microsoft.IdentityModel.Tokens.SomeKeyid, KeyId: 'SomeKeyid-zY', InternalId: 'SomeKeyid'. , KeyId: SomeKeyid-zY
'. Number of keys in TokenValidationParameters: '0'.
Number of keys in Configuration: '6'.
Exceptions caught:
''.
token: '[Security Artifact of type 'Microsoft.IdentityModel.JsonWebTokens.JsonWebToken' is hidden. For more details, see https://aka.ms/IdentityModel/SecurityArtifactLogging.]'. See https://aka.ms/IDX10503 for details.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [X] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

N/A

Any log messages given by the failure

see above.

Expected/desired behavior

that it would work

Library version

"@angular/cdk": "^17.1.2",

Browser and version

Chrome & Edge

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Group claims not added

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ X] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ X] question
    - [ ] feature request
    - [ X] documentation issue or request

Minimal steps to reproduce

After following the instructions the group claims are not added.
We are using ApplicationGroups, so there should only be one group in the claim.
I saw some missmatches within the documentation and the file names.

Any log messages given by the failure

No group claims added

Expected/desired behavior

Deliver all group claims in the token

Library version

Browser and version

Chrome, Edge, Firefox, Safari?
Group Token is missing in all browsers

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Refactor component to handle claims challenge

Issue

Please provide us with the following information:

Refactor profile.component.ts to handle claims challenge in a hook, interceptor or utility function etc.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [  x ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ x ] feature request
    - [ ] documentation issue or request

What is the purpose of AzureAd:Roles in appsettings.json?

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "Enter the domain of your Azure AD tenant, e.g. 'contoso.onmicrosoft.com'",
"TenantId": "Enter the ID of your Azure AD tenant copied from the Azure portal",
"ClientId": "Enter the application ID (clientId) of the 'TodoListAPI' application copied from the Azure portal",
"Roles": {
"TaskAdmin": "TaskAdmin",
"TaskUser": "TaskUser"
}

In the API configuration files (appsettings.json / appsettings.Development.json), does the Roles section within AzureAd in as shown above serve any purpose?

The sample app looks to be using the AppRole static class to get role names so I'm wondering if this section is needed in the .json files, and if so where/how is it used?

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

npm start not working, generating browser application bundles digital envelope routines::unsupported

Issue

When running npm start, the application does not start because it encounters an issue when "generating browser application bundles".

This issue is for the sample

    - [x] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Clone the repository, npm install, fill in the client id and tenant id, then run npm start

Any log messages given by the failure

> [email protected] start
> ng serve

- Generating browser application bundles...(node:12048) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
| Generating browser application bundles (phase: building)...node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\webpack\lib\NormalModule.js:417:16)
    at C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\webpack\lib\NormalModule.js:452:10
    at C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\webpack\lib\NormalModule.js:323:13
    at C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\loader-runner\lib\LoaderRunner.js:111:13)    
    at C:\Users\mm02890\source\repos\angular-ms-identity\node_modules\babel-loader\lib\index.js:59:103
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.2.0

Expected/desired behavior

The tooling should serve an instance of the application.

Library version

Angular: 11.0.9

Browser and version

Chrome

Mention any other details that might be useful

C:\Users\mm02890\source\repos\angular-ms-identity>ng version
Your global Angular CLI version (13.3.6) is greater than your local version (11.0.7). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.7
Node: 18.2.0
OS: win32 x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cdk                    11.2.3
@angular/cli                    11.0.7
@angular/material               11.2.3
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.6
typescript                      4.0.7

"Call a web API using App Roles" does not use separate App Registrations for API and SPA

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I'm wondering why, in this one example, the same App Registration is used for both the SPA and the API? The other examples all separate these out. It seems very counterintuitive.

There is this section in particular (emphasis mine):

###Configure the client app (msal-angular-app) to use your app registration

Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

Open the API\TodoListAPI\appsettings.json file.

The guide says to configure the client app, but then immediately gives directions for setting the config on the API.

Is it expected that both the front and backend applications will share an app registration in this scenario?

Any log messages given by the failure

n/a

Expected/desired behavior

n/a

Library version

n/a

Browser and version

n/a

Mention any other details that might be useful

n/a

Angular app needs admin approval when trying to access API

Issue

Please provide us with the following information:

This issue is for the sample

    - [X] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [X] question
    - [ ] feature request
    - [ ] documentation issue or request

I am having an issue with a Angular 12 app using MSALv2 based on the example at this location:
https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/1-call-api

The Azure App Registration for the SPA asks for the following permissions:
Our API, access_as_user
Graph permissions:
User.read
User.read.All
User.ReadBasic.All
User.ReadWrite
User.ReadWrite.All

2 of the above permissions were needing admin consent required. When I run the angular 12 locally and navigate to http://localhost:4200 I can think click on the profile tab and fetch the Azure AD information. Once I see that working, I have added a tab that makes a post request to a API that we host internally. It's on a guarded (MsalGuard) route so it should be passing over the token.

I can't see if it completes because it prompts me and tells that the app needs admin approval. Well the app has admin approval so why is it asking me for this?

I have provided the angular code, however trying to provide the API code would be difficult as this is production code that I cannot share.

Thanks! We'll be in touch soon.
Archive.zip

Bearer error="invalid_token", error_description="The signature key was not found"

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I followed the steps, running the api in two diferent ways: from visual studio using IIS express and from the console as described in the steps.

Any log messages given by the failure

I'm able to open the page, gets a bearer token, but when accessing the todolist page I get the following errors, two different errors, according to how I run the api:

  1. If running from Visual Studio:
    401 - Bearer error="invalid_token", error_description="The signature key was not found"

  2. If running from a console with "dotnet run":
    Err_Cert_Authority_Invalid

Expected/desired behavior

Expected to get access to the todolist page.

Browser and version

Chrome, Edge, Firefox, Safari?
Chrome, newest (92)

Can't call MS Graph using Azure B2C app id

Issue

When trying to follow https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/2-Authorization-I/1-call-graph or use it's code, acquiring token returns no access token. Because of that, all subsequent logic fails.

I found many resources talking about Azure and Azure B2C and now i'm completely lost on what should i do. I just want to somehow invite users to use a platform manually and allow them to sign in my plataform (and retrieve their info, for this i'm trying to use User.Read permissions for MS Graph).

The sample doesn't works and it also says that AADB2C90117: The scope 'user.read' provided in the request is not supported.. I have solved this by using https://graph.microsoft.com/User.Read instead, who solved the error (but may be the reason behind not being able to retrieve the token).

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [x] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

  1. Clone the sample
  2. Change the app id for one created from Azure B2C
  3. Try running the sample (It fails to acquire token)

Any log messages given by the failure

It shows no error

[Thu, 19 Oct 2023 14:01:24 GMT] : [] : @azure/[email protected] : Info - Emitting event: msal:popupOpened
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning id token
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - Emitting event: msal:acquireTokenSuccess
app.component.ts:73 {eventType: 'msal:acquireTokenSuccess', interactionType: 'popup', payload: {…}, error: null, timestamp: 1697724085280}error: nulleventType: "msal:acquireTokenSuccess"interactionType: "popup"payload: accessToken: ""account: {homeAccountId: 'd666c0e7-1697-41e5-8319-ef03d4764fad-b2c_1_thinkdub_signin.f4449dcb-2508-4ada-83ed-0ba2f5b48fa7', environment: 'thinkdub.b2clogin.com', tenantId: '', username: '[email protected]', localAccountId: 'd666c0e7-1697-41e5-8319-ef03d4764fad', …}authority: "https://thinkdub.b2clogin.com/thinkdub.onmicrosoft.com/b2c_1_thinkdub_signin/"cloudGraphHostName: ""code: undefinedcorrelationId: "5387012a-f66c-409c-a9ea-a0410ec91406"expiresOn: nullextExpiresOn: undefinedfamilyId: ""fromCache: falsefromNativeBroker: falseidToken: "eyJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsiLCJ0eXAiOiJKV1QifQ.eyJ2ZXIiOiIxLjAiLCJpc3MiOiJodHRwczovL3RoaW5rZHViLmIyY2xvZ2luLmNvbS9mNDQ0OWRjYi0yNTA4LTRhZGEtODNlZC0wYmEyZjViNDhmYTcvdjIuMC8iLCJzdWIiOiJkNjY2YzBlNy0xNjk3LTQxZTUtODMxOS1lZjAzZDQ3NjRmYWQiLCJhdWQiOiJjYzYzZjI5YS01OWFjLTQ2NTMtODZiNS1mMWUyNjFjOTA2MTQiLCJleHAiOjE2OTc3Mjc2ODUsIm5vbmNlIjoiOGUxMTJiNDYtOTFlNS00ZDYwLTg2NjItZDE4NDYzM2IxZWQyIiwiaWF0IjoxNjk3NzI0MDg1LCJhdXRoX3RpbWUiOjE2OTc3MjQwODQsIm9pZCI6ImQ2NjZjMGU3LTE2OTctNDFlNS04MzE5LWVmMDNkNDc2NGZhZCIsIm5hbWUiOiJBbGV4YW5kZXIgRGluaXoiLCJnaXZlbl9uYW1lIjoiQWxleGFuZGVyIiwiZmFtaWx5X25hbWUiOiJEaW5peiIsImVtYWlscyI6WyJhbGV4YW5kZXIuZGluaXpAdGhpbmthaWdyb3VwLmNvbSJdLCJ0ZnAiOiJCMkNfMV90aGlua2R1Yl9zaWduaW4iLCJuYmYiOjE2OTc3MjQwODV9.TWdtvfyddkFaqNzM-yQwVqrZldNZiIhHEZvrBmaxita97SQ-FzjQ5CEocA2rOdQNXYoW_9vykETk-woQ2QdHMqNi2KcnQ9GhQcYNJnAceu978fMnpjaNQrOdrt60_BqYuD1dbnaW_j_HebIZGGcojYF8R8TNIWt0CJ8FofupReQSKOKprhYV8gWY8FkU3-eaVNw1ev02UmKbpnUxfSj3NSYOomuPB7dJbZuA2OVYcWw6J95d7Brdc1jNJxUNJQaUHNJd_00gjok1XjDbZjAl1Iy-tMV0CFbJImN8F2rakHmFNvF5PpXEc-R21g1K2Z0U8Jf-PPk_Gv4Nio8EmdjUGA"idTokenClaims: {ver: '1.0', iss: 'https://thinkdub.b2clogin.com/f4449dcb-2508-4ada-83ed-0ba2f5b48fa7/v2.0/', sub: 'd666c0e7-1697-41e5-8319-ef03d4764fad', aud: 'cc63f29a-59ac-4653-86b5-f1e261c90614', exp: 1697727685, …}msGraphHost: ""refreshOn: undefinedrequestId: ""scopes: []state: ""tenantId: ""tokenType: ""uniqueId: "d666c0e7-1697-41e5-8319-ef03d4764fad"[[Prototype]]: Objecttimestamp: 1697724085280[[Prototype]]: Object
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning id token
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning id token
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning id token
auth-config.ts:65 [Thu, 19 Oct 2023 14:01:25 GMT] : [] : @azure/[email protected] : Info - CacheManager:getIdToken - Returning id token

Expected/desired behavior

It should return an access token

Library version

The same for the sample

Browser and version

Chrome Version118.0.5993.70 (Official) 64 bits

Need different scopes based on which page is being accessed

Issue

The point of scopes is to "lock away" various features of an application for only those with permissions. Using the guard approach taken by these examples, there doesn't seem to be an obvious way to associate different routes with different scopes. There is just a simple static loginRequest object in auth.service.ts which has the desired set of scopes. I guess the most straight forward approach would be to not use the MsalGuard and instead: 1) use a routing hook to watch navigation; 2) introduce a scope <-> route mapping structure. This hook would check that the scopes needed for a given route are already allowed, and if not attempt login with escalated scopes. Is this a good approach, or am I missing something simpler?

Please provide us with the following information:

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API
    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [x] feature request
    - [ ] documentation issue or request

Library version

msal-angular 2.5.7

MSAL redirect Login When click public action Controller

Hi,
I have an Angular 14 project and a WEB API .Net Core 6.
I have successfully configured Azure Ad B2C.
I have a problem when I need to access a public controller action.
I have 2 controllers:
AzurrController, private.
PublicController, public

When I call a Public controller action and I am not logged in, the system asks me to login.
I have entered the scope to null for public urls in the protectresurseMap. But it does not work.

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array | null>();

protectedResourceMap.set(publicResources.todoListApi.endpoint, null);
protectedResourceMap.set(protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap
};
}

Regards
Carmine

Anonymous Authentication for a web page via Angular/Azure B2C app

Issue

When the "anonymousGarud" is applied to the lazy loading module and path, it is still requires the user be logged in. Only then, I see that anonymous web page & its working then only.

{ path: 'anon', loadChildren: () => import('./.../.../anon.module').then(m => m.anonModule), canLoad: [AnonymousGaurd] },

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from "@angular/router";
import { Observable } from "rxjs";

@Injectable()
export class AnonymousGaurd implements CanActivate, CanLoad {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return true;
    }

    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
        return true;
    }
}

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ x] bug report -> please search issues before submitting
    - [ x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

We are using Angular V 12.2+ and the latest MSAL npm packages (updated few days back)
"@azure/msal-angular": "^2.0.4",
"@azure/msal-browser": "^2.18.0",
"@azure/msal-common": "^5.0.1",

Any log messages given by the failure

No errors

Expected/desired behavior

It should be able to access that web page without user login

Library version

Angular V 12.2+
"@azure/msal-angular": "^2.0.4",
"@azure/msal-browser": "^2.18.0",
"@azure/msal-common": "^5.0.1",

Browser and version

Chrome, Edge, Firefox, Safari?
Chrome, Edge

Mention any other details that might be useful

Haven't enabled "MSALGaurd" on all the paths yet. Not sure if that is useful.

Thanks! We'll be in touch soon.

Document recommend approach for calling web API using PoP tokens

Issue

Please document recommended approach for calling an API with an access token acquired via proof of possession using server nonce:

https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/7-AdvancedScenarios/2-call-api-pop

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [x] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

scenario 3 - protect and call web api on azure ad b2c - infinite loop

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Follow the sample tutorial step by step

Any log messages given by the failure

Expected/desired behavior

I should be able to access the web-api / edit my profile

Library version

Browser and version

Safari?

Mention any other details that might be useful

I can login fine (I had to go to the portal first and configure the sign in policy to allow the user to self reset his password) but then when i click the TodoList button it goes to an infinite loop (looks like login/logout)

Screen.Recording.2021-05-31.at.19.31.03.mov

here is my repo https://github.com/jeromechrist/repro-step-b2c

Thanks! We'll be in touch soon.

Upgrade to latest msal/browser library breaks this sample

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Upgrade current sample to latest version of msal-browser
npm install @azure/msal-browser @azure/msal-angular@latest

Click Login In Button and log in - F12 and look at console window - it has an error when trying to get the claims.

Any log messages given by the failure

core.js:6210 ERROR ClientAuthError: access_token_entity_null: Access token entity is null, please check logs and cache to ensure a valid access token is present.
at ClientAuthError.AuthError [as constructor] (http://localhost:4200/vendor.js:130540:20)
at new ClientAuthError (http://localhost:4200/vendor.js:130792:24)
at Function.ClientAuthError.createAccessTokenEntityNullError (http://localhost:4200/vendor.js:131129:12)
at Function. (http://localhost:4200/vendor.js:135387:35)
at step (http://localhost:4200/vendor.js:130119:19)
at Object.next (http://localhost:4200/vendor.js:130049:14)
at http://localhost:4200/vendor.js:130021:67
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:2387:23)
at __awaiter$1 (http://localhost:4200/vendor.js:130000:10)
at Function.ResponseHandler.generateAuthenticationResult (http://localhost:4200/vendor.js:135349:12)

Expected/desired behavior

Shows table with claims detail in the home.component.html file

Browser and version?

Google Chrome Version 90.0.4430.93

Versions

This is in the project - "ms-identity-javascript-angular-tutorial/1-Authentication/2-sign-in-b2c/"

Mention any other details that might be useful


Thanks! We'll be in touch soon.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.