Blazor（服务器端）和Okta

问题描述 投票：0回答：1

我目前正在通过这篇文章将okta集成到Blazor Server Side App中

https://developer.okta.com/blog/2019/10/16/csharp-blazor-authentication

我当前收到“抱歉，此地址没有任何信息”。

我希望有人可以为我的问题提供建议。

或者没有人知道将okta集成到Blazor Server Side App中的示例吗？

请让我知道。

任何帮助将不胜感激。我完全在转动轮子。

这是我的okta常规设置：

enter image description here下面是我的解决方案中的代码（我多次审查了该帖子以确保它是正确的。但是我想我可能会漏掉一些内容。）

Startup ConfigureServices

       services.AddAuthorizationCore();
        services.AddAuthentication(sharedOptions =>
            {
                sharedOptions.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                sharedOptions.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                sharedOptions.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
            })
            .AddCookie()
            .AddOpenIdConnect(options =>
            {
                options.ClientId = Configuration["Okta:ClientId"];
                options.ClientSecret = Configuration["Okta:ClientSecret"];
                options.Authority = Configuration["Okta:Issuer"];
                options.CallbackPath = "/authorization-code/callback";
                options.ResponseType = "code";
                options.SaveTokens = true;
                options.UseTokenLifetime = false;
                options.GetClaimsFromUserInfoEndpoint = true;
                options.Scope.Add("openid");
                options.Scope.Add("profile");
                options.TokenValidationParameters = new TokenValidationParameters
                {
                    NameClaimType = "name"
                };
            });
    }

启动配置

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthentication();
        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }

MainLayout.razor

<div class="top-row px-4">

    <AuthorizeView>
        <Authorized>
            <a href="Identity/Account/Manage">Hello, @context.User.Identity.Name!</a>
            <a href="Identity/Account/LogOut">Log out</a>
        </Authorized>
        <NotAuthorized>
            <a href="Identity/Account/Register">Register</a>
            <a href="Identity/Account/Login">Log in</a>
        </NotAuthorized>
    </AuthorizeView>

    <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
</div>

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState> ```
blazor okta blazor-server-side
1个回答
0
投票

当您单击“登录”锚元素时，路由器无法找到“身份/帐户/登录”路径，其结果显示为

对不起，此地址没有任何内容。

当然，您不会直接进入okta网站，并且不会进行身份验证，对吗？

了解她为何如此设置AuthorizeView组件是我的事。不过，在我看来，她的整个文章是由市政府设计的，并由备用代码段组成。但是，这超出了此答案的范围。

解决方案

  1. 创建一个名为LoginDisplay（LoginDisplay.razor）的组件，并将其放置在Shared文件夹中。此组件用于MainLayout组件

    <AuthorizeView> <Authorized> <a href="logout">Hello, @context.User.Identity.Name!</a> <form method="get" action="logout"> <button type="submit" class="nav-link btn btn-link">Log out</button> </form> </Authorized> <NotAuthorized> <a href="login?redirectUri=/">Log in</a> </NotAuthorized> </AuthorizeView>

    将LoginDisplay组件添加到MainLayout组件中，关于锚元素，像这样 <div class="top-row px-4"> <LoginDisplay /> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div>

注意：为了将登录和注销请求重定向到okta，我们必须创建两个Razor页面，如下所示：1.创建一个“登录剃刀”页面Login.cshtml（Login.cshtml.cs），并将其放置在Pages文件夹中，如下所示：

Login.cshtml.cs

 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.IdentityModel.Tokens;

public class LoginModel : PageModel
{
    public async Task OnGet(string redirectUri)
    {
        await 
    HttpContext.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, 
    new AuthenticationProperties
    {
            RedirectUri = redirectUri
    });
  }
}

此代码对您在Startup类中定义的Open Id Connect身份验证方案提出了挑战。

  1. [创建注销剃刀页面Logout.cshtml（Logout.cshtml.cs）并将它们也放置在Pages文件夹中：

    Logout.cshtml.cs

using Microsoft.AspNetCore.Authentication; public class LogoutModel : PageModel { public async Task<IActionResult> OnGetAsync() { await HttpContext.SignOutAsync(); return Redirect("/"); } } 此代码将您注销，将您重定向到Blazor应用程序的主页。

用以下代码替换App.razor中的代码：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>


            </NotAuthorized>
            <Authorizing>
                Wait...
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>

            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>

    </NotFound>

</Router>

运行您的应用程序，单击登录按钮进行身份验证

注意：我还没有完成我的回答...我还有很多要补充，但现在不能做。我会尽快做。如有疑问，请随时提出。如果可以的话，我会回答他们；;）

注意：此示例非常适合我。

[请不要忘记您的appsettings.json文件。应该是这样的：

{
  "Okta": {
    "Issuer": "https://dev-621531.okta.com",
    "ClientId": "0o1a5bsivg6wFDw6Jr347",
    "ClientSecret": "ffolkG3sd2NgQ_E909etXRU3cXX3wBpgE0XxcmF5"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

请勿尝试使用我的设置，因为我已经更改了它们...Startup类中的代码是正确的，但是您可能需要添加一些名称空间引用，也许是我添加的nuget包等。

注意：在尝试应用程序时，如果要重定向到okta的登录页面，则应清除浏览数据，否则，浏览器可能会使用缓存的数据。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.