Вот что вы можете сделать, чтобы обеспечить безопасность своего углового SPA и ASP.NET Core Web API.
Техническое решение
1) Реализация сценария аутентификации веб-приложения для веб-API .
2) Используйте https://portal.azure.com для настройки процесса аутентификации.
3) Используйте угловой пакет adal-angular4 (версия 3.0.1+) для реализации аутентификации в угловом приложении.
4) Используйте пакет NuGet Microsoft.AspNetCore.Authentication.AzureAD.UI для реализации аутентификации в основной службе веб-API Asp.Net.
Предпосылка
Регистрация угловой заявки
Зарегистрируйте приложение в Azure Active Directory с https://portal.azure.com
Перейдите в «Azure Active Directory» -> «Регистрация приложений» и выберите добавление «Регистрация нового приложения».
Регистрация веб-API
Зарегистрируйте службу веб-API в Azure Active Directory с https://portal.azure.com.
Процесс регистрации аналогичен регистрации приложения Angular. (см. выше)
Настройка доступа к ресурсу Web API
Клиентское приложение получает доступ к серверу ресурсов путем объявления запросов на разрешение.
Перейдите в Azure Active Directory -> Регистрация приложений и выберите Настройки приложения Angular.
Выберите веб-API, к которому обращается приложение Angular:
Включить доступ с делегированным разрешением
Необходимый доступ к ресурсам (Web API) добавлен в зарегистрированный манифест приложения Angular:
Предоставить доступ к ресурсу Web API
Установить пакет adal
nstall adal package adal-angular4 (версия 3.0.1+). Пакет adal-angular4 был обновлен для совместимости с angular6. Определение правильной упаковки сбивает с толку, потому что название пакета относится к angular 4, а также потому, что есть другой пакет adal-angular5, который не совместим с angular 6.
Техническое решение
Процесс аутентификации
Первый шаг:
При первом обращении пользователя к приложению через браузер угловое приложение обнаруживает, что оно не аутентифицировано, и перенаправляет его на вход в Microsoft для введения учетных данных.
Шаг 2:
После входа в систему служба аутентификации перенаправляет процесс на настроенный обратный вызов приложения, где процесс аутентификации завершается.
Шаг 3:
Угловое приложение вызывает требуемый веб-API. Токен аутентификации добавляется в заголовки HTTP перед вызовом Web API.
Шаг 4:
Web 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.
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';
import {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 в файле веб-API Startup.cs:
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
Надеюсь, это поможет.