Защита SPA сервером авторизации перед первой загрузкой

У меня есть кое-что, что вроде работает.

В своих исследованиях я наткнулся на apon эта почта, предлагающий использовать промежуточное ПО вместо атрибута Authorize.

Теперь метод, использованный в этом посте authService, похоже, не работает в моем случае (не знаю почему, я продолжу расследование и опубликую все, что найду позже).

Поэтому я решил пойти с более простым решением. Вот мой конфиг

        app.Use(async (context, next) =>
        {
            if (!context.User.Identity.IsAuthenticated)
            {
                await context.ChallengeAsync("oidc");
            }
            else
            {
                await next();
            }
        });

В этом случае oidc запускается ДО приложения Spa, и поток работает правильно. Нет необходимости в контроллере.

HTH

Внесите это изменение в свой startup.cs:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    spa.Options.DefaultPage = "/home/index";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

Затем поместите ссылку на приложение angular в index.cshtml:

<app-root></app-root>

и убедитесь, что вы включили все необходимые файлы в файл index.cshtml или в свой макет:

<link href = "~/styles.bundle.css" rel = "stylesheet" />

<script type = "text/javascript" src = "~/inline.bundle.js" asp-append-version = "true"></script>
<script type = "text/javascript" src = "~/polyfills.bundle.js" asp-append-version = "true"></script>
<script type = "text/javascript" src = "~/vendor.bundle.js" asp-append-version = "true"></script>
<script type = "text/javascript" src = "~/main.bundle.js" asp-append-version = "true"></script>

Мы все еще работаем над устранением неполадок со всеми нашими ссылочными пакетами, но это приведет к тому, что базовый SPA будет работать за asp.net auth.

Похоже, что нет НАСТОЯЩЕГО решения, когда речь идет о SPA.

Чтобы выполнить некоторую логику в SPA, SPA должен быть изначально загружен.

Но есть какая-то уловка: в RouterModule вы можете предотвратить начальную навигацию, как показано:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'about',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'about'
  }
];

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

Затем в вашем app.component.ts вы можете позаботиться о своей аутентификации:

@Component({
  selector: 'flight-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private router: Router, private oauthService: OAuthService) {
    if (this.oauthService.isAuthenticated()) {
      this.router.navigate(['/home']);
    } else {
      // login Logic
    }
  }
}

Использование промежуточного программного обеспечения @George потребует аутентификации для всех запросов. Если вы хотите запустить это только для localhost, добавьте его в UseSpa, завернутый в блок env.IsDevelopment ().

Другой вариант, который также хорошо работает для развернутых сред, - это вернуть index.html из резервного маршрута вашего спа.

Запускать:

        if (!env.IsDevelopment())
        {
            builder.UseMvc(routes =>
            {
                routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller = "Home", action = "AuthorizedSpaFallBack" });
            });
        }

HomeController:

[Authorize]
public IActionResult AuthorizedSpaFallBack()
{
    var file = _env.ContentRootFileProvider.GetFileInfo("ClientApp/dist/index.html");
    return PhysicalFile(file.PhysicalPath, "text/html");
}

Если вам нужно, чтобы base.href соответствовал URL-адресу запроса браузера (например, cookie, который имеет значение Path), вы можете шаблонизировать его с помощью регулярного выражения (или использовать представление бритвы, как в других примерах).

    [Authorize]
    public IActionResult SpaFallback()
    {
        var fileInfo = _env.ContentRootFileProvider.GetFileInfo("ClientApp/dist/index.html");
        using (var reader = new StreamReader(fileInfo.CreateReadStream()))
        {
            var fileContent = reader.ReadToEnd();
            var basePath = !string.IsNullOrWhiteSpace(Url.Content("~")) ? Url.Content("~") + "/" : "/";

            //Note: basePath needs to match request path, because cookie.path is case sensitive
            fileContent = Regex.Replace(fileContent, "<base.*", $"<base href=\"{basePath}\">");
            return Content(fileContent, "text/html");
        }
    }

На основе Georges Legros мне удалось заставить это работать для .Net Core 3 с Identity Server 4 (готовый проект VS), так что конвейер app.UseSpa не попадет, если пользователь не аутентифицирован сначала через сервер идентификации. Это намного приятнее, потому что вам не нужно ждать, пока загрузится SPA, только для того, чтобы затем вас перенаправили на логин.

Вы должны убедиться, что у вас есть авторизация / роли, работающие правильно, иначе User.Identity.IsAuthenticated всегда будет ложным.

public void ConfigureServices(IServiceCollection services)
{
    ...

    //Change the following pre-fab lines from

    //services.AddDefaultIdentity<ApplicationUser>()
    //    .AddEntityFrameworkStores<ApplicationDbContext>();

    //To

    services.AddIdentity<ApplicationUser, IdentityRole>()
            .AddRoles<IdentityRole>()
            //You might not need the following two settings
            .AddDefaultUI()
            .AddEntityFrameworkStores<ApplicationDbContext>();

    services.AddIdentityServer()
            .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

    ...
}

Затем добавьте следующую настройку следующего канала:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller}/{action=Index}/{id?}");
    });

    //Added this to redirect to Identity Server auth prior to loading SPA    
    app.Use(async (context, next) =>
    {
        if (!context.User.Identity.IsAuthenticated)
        {
            await context.ChallengeAsync("Identity.Application");
        }
        else
        {
            await next();
        }
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
} 

Для лазурного объявления (Жорж отвечает с karmas edit без корса):

в ConfigureServices (сервисы IServiceCollection):

services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(_configuration.GetSection("AzureAd"));

в Configure (приложение IApplicationBuilder, IWebHostEnvironment env, ILoggerFactory loggerFactory):

app.UseAuthentication();

app.Use(async (context, next) =>
{
    if (!context.User.Identity.IsAuthenticated && context.Request.Path != "/signin-oidc")
    {
        await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme);
    }
    else
    {
        await next();
    }
});

app.UseEndpoints(endpoints =>
{
    var builder = endpoints.MapControllers();
    builder.RequireAuthorization();
});