Как перейти на нужный URL после входа в Azure AD с использованием MSAL Angular

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации:
Важные моменты:

Вопрос или проблема

Мы используем аутентификацию Azure AD для валидации пользователей с использованием MSAL. После успешной проверки осуществляется переход на настроенный URL для перенаправления.

Например:

URL для перенаправления: http://localhost:4200/ (Настроен в регистрации приложения в Azure Portal как одностраничное приложение) Здесь будет открыта страница входа Azure AD, а после успешного входа будет осуществлен переход на указанный выше URL для перенаправления.

Проблема: Теперь, если пользователь пытается получить доступ к конкретному URL, как указано ниже (если пользователь не аутентифицирован)

http://localhost:4200/data/100

Пользователь должен пройти аутентификацию с использованием Azure AD -> после успешной аутентификации он должен быть перенаправлен на запрашиваемый URL, например, указанный выше URL (http://localhost:4200/data/100), но он всегда переходит на настроенный URL для перенаправления, т.е. http://localhost:4200.

Как обработать такой сценарий, чтобы перенаправить на нужный URL?

`export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.clientId,
      authority: `https://login.microsoftonline.com/tenatId`,
      redirectUri: 'http://localhost:4200',
      postLogoutRedirectUri: 'http://localhost:4200'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.SessionStorage,
      storeAuthStateInCookie: isIE, // установите в true для IE 11
    }
  });
}`

Ответ или решение

Для решения проблемы перенаправления пользователя к его запрашиваемому URL после успешной аутентификации в Azure AD с использованием MSAL в приложении Angular, необходимо реализовать механизм сохранения запрашиваемого URL перед началом процесса аутентификации и перенаправления на этот URL после успешно завершенной аутентификации.

Шаги для реализации:

Создание сервиса для управления аутентификацией:
Вам нужно создать сервис, который будет управлять процессом аутентификации и сохранением запрашиваемых URL.

import { Injectable } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private msalService: MsalService, private router: Router) {}

  login(redirectUrl: string): void {
    sessionStorage.setItem('redirectUrl', redirectUrl); // Сохранение запрашиваемого URL
    this.msalService.loginRedirect();
  }

  handleRedirect(): void {
    this.msalService.handleRedirectObservable().subscribe({
      next: (result) => {
        const redirectUrl = sessionStorage.getItem('redirectUrl') || '/'; // Получение сохраненного URL или переход на главную страницу
        sessionStorage.removeItem('redirectUrl'); // Очистка сохраненного URL
        this.router.navigateByUrl(redirectUrl); // Перенаправление на запрашиваемый URL
      },
      error: (error) => console.error('Error during redirect handling', error),
    });
  }
}

Изменениеguard’а для маршрутов:
Вам нужно настроить охранник (guard), который будет проверять, авторизован ли пользователь. Если нет, то он будет вызывать метод login вашего сервиса с текущим запрашиваемым URL.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    // Проверка, авторизован ли пользователь
    if (this.authService.msalService.getAllAccounts().length > 0) {
      return true; // Если авторизован, разрешаем доступ
    } else {
      this.authService.login(state.url); // Иначе перенаправляем на страницу входа
      return false; // Запретить доступ
    }
  }
}

Обновление маршрутов приложения:
Добавьте охранник на маршруты, где требуется аутентификация пользователя.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DataComponent } from './data/data.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'data/:id', component: DataComponent, canActivate: [AuthGuard] },
  // Другие маршруты
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Обработка перенаправления после аутентификации:
В вашем компоненте, где вы инициируете аутентификацию, убедитесь, что вы вызываете метод handleRedirect.

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.handleRedirect(); // Обработка перенаправления после аутентификации
  }
}

Важные моменты:

Убедитесь, что у вас правильно настроены clientId, authority и другие параметры в MSALInstanceFactory.
Проверьте, чтобы ваши маршруты, требующие аутентификации, использовали AuthGuard.
Не забудьте удалить сохраненный URL из sessionStorage, чтобы избежать повторных перенаправлений после первоначальной аутентификации.

Это решение предоставит пользователю возможность вернуться к запрашиваемому URL после успешной аутентификации через Azure AD.