Как добавить аутентификацию Saml в приложение веб-API asp.net

Вот что вы можете сделать, чтобы обезопасить свой angular SPA и asp.net core web api.

Техническое решение

1) Реализуйте сценарий проверки подлинности веб-приложения для веб-API.

2) Используйте https://portal.azure.com для настройки процесса аутентификации.

3) Используйте adal-angular4 (версия 3.0.1+) angular пакет для реализации аутентификации в приложении angular.

4) Используйте пакет NuGet Microsoft.AspNetCore.Authentication.AzureAD.UI для реализации аутентификации в базовой службе веб-API Asp.Net.

Необходимое условие

Зарегистрировать приложение Angular

Зарегистрируйте приложение в Azure Active Directory на странице https://portal.azure.com. Перейдите в «Azure Active Directory» -> «Регистрация приложений» и выберите, чтобы добавить «Регистрация нового приложения».

Зарегистрировать веб-API

Зарегистрируйте службу веб-API в Azure Active Directory со страницы https://portal.azure.com. Процесс регистрации аналогичен регистрации приложения Angular. (см. выше)

Настроить доступ к ресурсу веб-API

Клиентское приложение получает доступ к серверу ресурсов, объявляя запросы на разрешение. Перейдите в Azure Active Directory -> Регистрация приложений и выберите Параметры приложения Angular.

Выберите веб-API, к которому обращается приложение Angular:

Разрешить доступ с делегированным разрешением

Доступ к необходимому ресурсу (веб-API) добавляется в зарегистрированный манифест приложения Angular:

Предоставить доступ к ресурсу веб-API

Установить пакет adal

Установите пакет adal adal-angular4 (версия 3.0.1+). Пакет adal-angular4 был обновлен для совместимости с angular6. Выбор правильного пакета сбивает с толку, потому что имя пакета относится к angular 4, а также потому, что есть другой пакет adal-angular5, который несовместим с angular 6.

Техническое решение

Процесс аутентификации

Первый шаг:

В первый раз, когда пользователь обращается к приложению через браузер, приложение angular обнаруживает, что оно не аутентифицировано, и перенаправляет на логин Microsoft для ввода учетных данных.

Шаг 2:

После шага входа в систему служба аутентификации перенаправляет процесс на настроенный обратный вызов приложения angular, где процесс аутентификации завершается.

Шаг 3:

Приложение angular вызывает требуемый веб-API. Токен аутентификации добавляется в заголовки HTTP перед вызовом веб-API.

Шаг 4:

Веб-API проверяет токен аутентификации и в случае успеха возвращает запрошенный ресурс.

Реализация

Шаг 1:

а) Настройте службу ADAL

import { Component } from '@angular/core';
import { AdalService } from 'adal-angular4';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  private adalConfig = {
    tenant: '[TENANT_GUID]',
    clientId: '[CLIENTID_GUID]',
    redirectUri: "[LOGIN_REDIRECT_URL]",
    postLogoutRedirectUri: "[POST_LOGOUT_REDIRECT_URL]",
    endpoints: {
      "[HOME_URL_WEB_API]": "[HOME_WEB_API_GUID]"
    }
  }

  constructor(private adal: AdalService) {
    this.adal.init(this.adalConfig);
  }

  signOut(): void {
    this.adal.logOut();
  }
}

[TENANT_GUID] - это идентификатор каталога Azure AD.

б) Реализовать защиту, которая перенаправляет на вход в случае неаутентифицированного запроса.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AdalService } from 'adal-angular4';

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

  constructor(private adal: AdalService) { }

  canActivate(): boolean {

    if (this.adal.userInfo.authenticated) {
      return true;
    }

    this.adal.login();

    return false;
  }

}

c) Защитите пути приложений в классе маршрутизатора:

const routes: Routes = [
  { path: '', component: MyComponent, canActivate: [AuthGuard] },
  { path: 'auth-callback', component: AuthCallbackComponent },
];

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

Шаг 2: - Завершите процесс входа в систему.

Реализуйте компонент обратного вызова, который будет вызываться как часть процесса входа в систему. Регистрация URL-адреса обратного вызова выполняется на шаге 1 при настройке adal с использованием информации redirectUri.

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { AdalService } from 'adal-angular4';

@Component({
  selector: 'app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styleUrls: ['./auth-callback.component.css']
})
export class AuthCallbackComponent implements OnInit {

  constructor(private router: Router, private adal: AdalService, private _zone: NgZone) { }

  ngOnInit() {
    this.adal.handleWindowCallback();

    setTimeout(() = {
      this._zone.run(
        () = this.router.navigate(['/'])
      );
    }, 200);
  }

}

handleWindowCallback () добавляет токен аутентификации в сеанс.

Шаг 3:

Установка токена аутентификации для HTTP-запроса, отправляемого в веб-API Adal, упрощает задачу. Единственный шаг, который нужно сделать, - это зарегистрировать готовый AdalInterceptor в файле app.module.ts:

импортировать {BrowserModule} из '@ angular / platform-browser'; импортировать {NgModule} из '@ angular / core'; импортировать {HttpClientModule} из '@ angular / common / http'; импортировать {FormsModule} из '@ angular / forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
import { AdalService, AdalInterceptor } from 'adal-angular4';

@NgModule({
  declarations: [
    AppComponent,
    AuthCallbackComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [AdalService, { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 4:

Проверить токен аутентификации в службе веб-API. Настройте службу аутентификации как AzureADBear в файле Startup.cs веб-API:

public void ConfigureServices(IServiceCollection services)
{

    services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
    .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    services.AddCors(options = 
    {
        options.AddPolicy("AllowAllOrigins",
         builder =
         {
             builder.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();
         });
    });
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();

    app.UseCors("AllowAllOrigins");
    app.UseAuthentication();

    app.UseStaticFiles();
    app.UseMvc(routes =
    {
        routes.MapRoute(name: "default", template: "api/{controller}/{id}");
    });
}

Убедитесь, что вы установили пакет NuGet Microsoft.AspNetCore.Authentication.AzureAD.UI, упомянутый в разделе предварительных требований. Добавьте раздел AzureAD в appsettings.json, чтобы предоставить сведения для проверки подлинности для процесса проверки:

"AzureAd": {
  "Instance": "https://login.microsoftonline.com",
  "Domain": "[AD_DOMAIN]",
  "TenantId": "[TENANTID_GUID]",
  "ClientId": "[CLIENTID_GUID]"
}

Замените указанные выше заполнители следующей информацией:

[AD_DOMAIN] - это домен Azure AD.

[TENANT_GUID] - это идентификатор каталога Azure AD. (см. выше)

[CLIENTID_GUID] - это идентификатор приложения веб-API.

Наконец, украсьте свой контроллер атрибутом фильтра, как показано ниже:

[Authorize]
[ApiController]
public class MyController : ControllerBase

Надеюсь, это поможет.