Short Summary:
I have an Angular 7.0 front-end client using MSAL-angular.js library to authenticate with a .NET CORE API application. Both are hosted on Azure using B2C.
The call below returns a valid ID token in the URL, but then the following errors (minor difference in each browser):
A. Chrome:
This site can’t provide a secure connection localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR
B. Firefox
Secure Connection Failed
An error occurred during a connection to localhost:4200. SSL received a record that exceeded the maximum permissible length. Error code: SSL_ERROR_RX_RECORD_TOO_LONG
C. IE
Can’t connect securely to this page This might be because the site uses outdated or unsafe TLS security settings.
Detailed steps:
- Client authenticates in MyAuth.service.ts
import { MsalService, BroadcastService } from '@azure/msal-angular';
// unrelated code...
export class MyAuthService{
constructor(private http: HttpClient,
private authService : MsalService,
private broadcastService: BroadcastService,
private httpService: HttpServiceHelper) { }
public loginMSAL() {
this.authService.loginPopup(["openid", "offline_access",
"https://myBusinessName.onmicrosoft.com/api-dev/user_impersonation"]).
then(function (idToken: any) {
console.log("token: "+idToken); //This never gets hit.
});
console.log("...exit loginMSAL()..."); //
}
- The popup comes up to login a user, with this URL (the "04d8c97b" ID is my Azure B2C tenant ID, mybusinessname.onmicrosoft.com) :
https://login.microsoftonline.com/04d8c97b-23df-4533-b5fe-197f0117556c/oauth2/v2.0/authorize
?response_type=id_token
&scope=offline_access
%20https%3A%2F%2Fmybusinessname.onmicrosoft.com
%2Fapi-dev
%2Fuser_impersonation
%20openid
%20profile
&client_id=0af5e22c-1233-470f-b2a8-e47038c69524 //This is my angular web client's ID on Azure.
&redirect_uri=https%3A%2F%2Flocalhost%3A4200%2F
&state=c5a0006a-80f0-4d25-9eeb-49ddd0bc292b
&nonce=2699ca31-52f3-455b-9906-137772f2f0a8
&client_info=1&x-client-SKU=MSAL.JS
&x-client-Ver=0.2.1
&client-request-id=d9eed293-c1bd-4f75-a824-dc0bfe956c17
&prompt=select_account
&response_mode=fragment
&sso_reload=true
2.a) The login pop-up seems to work fine. It shows the account name I've logged in previously, [email protected].
2.b) Entering the password works fine, THEN pain starts.
- The popup window gives the errors above, but the URL changes to the following, showing a valid ID token has been obtained. URL is:
https://localhost:4200/#id_token=eyJ0e ...long token here...
&state=26deef89-94db-49ec-94a6-fbb6e7f93f13
&session_state=ca5489a4-842a-48f2-9fa5-7b85a1582d55
- Putting the token into jwt.ms, it looks valid:
{
"typ": "JWT",
"alg": "RS256",
"kid": "nbCwW11w3XkB-xUaXwKRjLjMHGQ"
}.{
"aud": "0af5e22c-1233-470f-b2a8-e47038c69524",
"iss": "https://login.microsoftonline.com/04d8c97b-25df-4533-b5fe-197f0117556c/v2.0", *//This is the ID for my Azure B2C Tenant, 'mybusinessname.onmicrosoft.com'*
"iat": 1545600536,
"nbf": 1545600536,
"exp": 1545604436,
"aio": "ATQAy/8JAAAARe1ST0VN1rzLio14LI4Y6B6VcY1nPurvB2G+FOWLjs/3QtkQdiHfRVnpgw6Ohm/2",
"name": "TestUser1",
"nonce": "ee43f038-bb35-438f-a9ca-2ca8b649dea4",
"oid": "2755d0c4-19ab-495e-9441-4ae6fe87e17a",
"preferred_username": "[email protected]",
"sub": "WcB02vJDa7vzfgWbJTY8m604eYhGosphCmr569Wc7Yc",
"tid": "04d8c97b-25df-4533-b5fe-197f0117556c",
"uti": "mC5BVa6fukuEXIVB5jJYAA",
"ver": "2.0"
}.[Signature]
- Not sure if it's relevant, but here's my MSAL config:
@NgModule({
imports: [
CommonModule,
MsalModule.forRoot({
clientID: '0af5e22c-1233-470f-b2a8-e47038c69524', // Azure B2C ID for my angular web client, 'mybusinessname-web-dev'.
authority: "https://login.microsoftonline.com/mybusinessname.onmicrosoft.com",
redirectUri: "https://localhost:4200/",
cacheLocation : "sessionStorage",
postLogoutRedirectUri: "https://localhost:4200/",
navigateToLoginRequestUrl: false,
unprotectedResources: ["https://localhost:4200/"],
popUp: true,
validateAuthority: false
})
Appreciate any help possible!
