Angular Перенаправление MSAL на вход в Microsoft после выхода из системы

В настоящее время я начинаю с Angular и MSAL и не могу понять, как добиться следующего:

  1. Когда пользователь получает доступ к веб-приложению, должен появиться логин Microsoft (через Azure AD).
  2. После успешной аутентификации появляется веб-приложение
  3. Когда пользователь нажимает кнопку "Выйти", он должен выйти из системы
  4. После выхода он должен вернуться к шагу 1. и снова увидеть вход в Microsoft.

Вот что у меня есть в app.module.ts:

    MsalModule.forRoot({
      auth: {
        clientId: '...', // This is your client ID
        authority: '...',
        // redirectUri: 'https://localhost:5001',
        postLogoutRedirectUri: '**<--THIS MAYBE? BUT WHAT URL DO I PUT HERE TO COME BACK TO THE MICROSOFT LOGIN PAGE??**'
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    }, {
      popUp: false,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        // ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],...

А вот и мой app-routing.module.ts:

const routes: Routes = [
  {
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
  }
];

Проблема с решением, которое у меня есть сейчас: когда я выхожу из системы, он снова переходит в WebApp, а затем перенаправляется на страницу входа в MS. Но я хочу, чтобы он перешел прямо на страницу входа в MS, чтобы пользователь больше не видел ничего из веб-приложения (после выхода из системы).

Что мне действительно нужно предотвратить, так это то, что пользователь может видеть все, что есть в веб-приложении, если он не вошел в систему. Поэтому я не хочу перенаправлять его на компонент (потому что тогда он снова видит контент).


angular .net asp.net-core single-page-application msal
person bbrinck    schedule 01.07.2020    source источник
comment
У меня возникла именно эта проблема, вы когда-нибудь заставляли ее работать?   -  person nilsi    schedule 21.01.2021

Ответы (2)


arrow_upward
1
arrow_downward

Я борюсь с той же проблемой. Что вам нужно сделать, так это сделать одну страницу не защищенной MsalGuard и после выхода из системы перенаправлять на эту страницу. Вы должны определить весь URL-адрес, например http: // localhost: 4200 / logout-page. Когда вы выйдете из системы, вы будете перенаправлены на страницу MS, где вы можете выйти из своей учетной записи, а затем вы будете перенаправлены на свою незащищенную страницу выхода. Другие защищенные страницы снова перенаправят вас на страницу входа в MS.

MsalModule.forRoot({
  auth: {
    clientId: '...', // This is your client ID
    authority: '...',
    // redirectUri: 'https://localhost:5001',
    postLogoutRedirectUri: window.location.protocol + '//' + window.location.host + '/logout-page'
  },
... rest of your configuration
}

... и это ваш новый маршрут ...

const routes: Routes = [
{
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
}, {
    path: 'lougout-page',
    component: LogoutPageComponent // This is your new component
}
];

Фактически, вы должны сделать вашу домашнюю страницу незащищенной и после выхода из системы вы должны перенаправить на нее. Но вы потеряете автоматическое перенаправление для входа в систему при загрузке приложения. Но это должно быть прикрыто простым Guard, где вы будете проверять учетные записи MsalService и в зависимости от результата, который вы должны перенаправить или нет.

person CamelD    schedule 01.07.2021

arrow_upward
0
arrow_downward

Вы должны вызвать метод выхода из системы (MsalService из '@ azure / msal-angular') через компонент или службу. См. Приведенный ниже код.

import { MsalService  } from '@azure/msal-angular';

constructor(
    private msalService: MsalService
) { }

onLogout(){
    this.msalService.logout();
}

person rockey91    schedule 30.09.2020