I am currently exploring Azure AD integration for logging into an Angular 2 application. The Github link provided below demonstrates a simple method to log in without the use of any authentication libraries.
Sign in via Microsoft Graph using Typescript and Angular 2
Although the setup works effectively, I encountered an issue where the redirection after login always returns to the main screen where the login process started. I am attempting to redirect to a different localhost view but have been unsuccessful so far.
While I was able to successfully redirect to https://www.google.com, I faced challenges when trying to customize the redirect URL within the code snippet found at /src/authHelper/authHelper.ts:
login() {
//redirect to get id_token
window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID +
"/oauth2/authorize?response_type=id_token&client_id=" + SvcConsts.CLIENT_ID +
"&redirect_uri=" + encodeURIComponent('HTTPS://WWW.GOOGLE.COM') +
"&state=SomeState&nonce=SomeNonce";
}
Additionally, ensure that the Reply URL is correctly configured in your Azure Active Directory to facilitate successful redirection. This setting can be adjusted by selecting your Azure AD, then navigating to the application under that AD, and configuring the Reply URL on the Configure tab within the old Azure portal.
--HOWEVER--
I have encountered difficulties replicating this behavior with a custom localhost view. Every attempt to replace https://www.google.com with URLs like https://localhost:8080/redirect resulted in browser errors such as "ERR_CONNECTION_CLOSED."
The current Reply URL for my web app in Azure AD is set as:
https://i.sstatic.net/DtLAk.png
Here's my updated login code utilizing local references (this):
login() {
console.log("Logging in!");
//redirect to get id_token
window.location.href = "https://login.microsoftonline.com/" + this.TENTANT_ID +
"/oauth2/authorize?response_type=id_token&client_id=" + this.CLIENT_ID +
"&redirect_uri=" + encodeURIComponent('https://localhost:8080/#/redirect') +
"&state=SomeState&nonce=SomeNonce";
}
Furthermore, I have configured router/routes in my app.component.ts file:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { AuthenticationComponent } from '../authentication/authentication.component';
import { AuthRedirectComponent } from '../authRedirect/authRedirect.component';
import { HomeComponent } from '../home/home.component';
import '../style/styles.less';
@Component({
selector: 'app',
template:
`
<h1>{{title}}</h1>
<em>some content</em>
<app-login></app-login>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES, AuthenticationComponent],
changeDetection: ChangeDetectionStrategy.OnPush
})
@Routes([
{ path: '/', component: HomeComponent },
{ path: '/redirect', component: AuthRedirectComponent }
])
export class AppComponent {
title: string = "App Component Title";
}
Has anyone encountered similar issues or found a workaround? As I require Azure AD for authentication and prefer localhost views due to deployment constraints, alternatives like Auth0 are not viable options at this stage.
Thank you