Как да добавите Saml Authentication към asp.net Web API приложение

Ето нещо, което можете да направите, за да направите вашия angular SPA и asp.net core web api защитен.

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

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

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

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

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

Предпоставка

Регистрирайте Angular приложение

Регистрирайте приложението в Azure Active Directory от https://portal.azure.com Отидете на „Azure Active Directory“ -> „Регистрации на приложения“ и изберете да добавите „Нова регистрация на приложение“.

Регистрирайте уеб API

Регистрирайте услугата Web API в Azure Active Directory от https://portal.azure.com. Процесът на регистрация е подобен на регистрирането на приложението Angular. (виж по-горе)

Конфигурирайте достъпа до уеб API ресурса

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

Изберете уеб API, до който има достъп от приложението Angular:

Разрешаване на достъп с делегирано разрешение

Необходимият достъп до ресурси (Web API) се добавя в регистрирания манифест на приложението Angular:

Предоставяне на достъп до уеб API ресурс

Инсталирайте adal пакет

nstall 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:

a) Конфигурирайте услугата 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 директория.

b) Внедрете защита, която пренасочва към влизане в случай на неудостоверена заявка

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}");
    });
}

Моля, уверете се, че сте инсталирали пакета Microsoft.AspNetCore.Authentication.AzureAD.UI NuGet, споменат в раздела за предварителни условия. Добавете секцията 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

Дано помогне.