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

Ответ 1

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

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

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

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

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

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

НТН

Ответ 2

Использование middlware @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");
        }
    }

Ответ 3

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

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

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

Затем поместите ссылку на угловое приложение в 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.

Ответ 4

Похоже, что нет РЕАЛЬНОГО решения, когда речь идет о 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
    }
  }
}

Ответ 5

Основываясь на Жорже Легро, мне удалось заставить это работать для .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");
        }
    });
}