ASP.NET Core Blazor 6.x(Server-side)-Authentication and Authorization(wjl)-iaspnetcore.com

.Net 6.x

.Net 6.x

step 1: login

\Presentation\WeiXinAdmin\Pages\Login.cshtml.cs

 public async Task<IActionResult> OnGetAsync(string paramUsername, string paramPassword)
        {

           

            string returnUrl = Url.Content("~/");
            try
            {
                // Clear the existing external cookie
                await HttpContext
                    .SignOutAsync(
                    CookieAuthenticationDefaults.AuthenticationScheme);
            }
            catch { }

            if (paramUsername == "[email protected]")
            {

                var claims = new List<Claim>
            {
                new Claim(ClaimTypes.Name, paramUsername),
                new Claim(ClaimTypes.Role, "Administrator"),
            };
                var claimsIdentity = new ClaimsIdentity(
                    claims, CookieAuthenticationDefaults.AuthenticationScheme);
                var authProperties = new AuthenticationProperties
                {
                    IsPersistent = true,
                    RedirectUri = this.Request.Host.Value
                };
                try
                {
                    await HttpContext.SignInAsync(
                    CookieAuthenticationDefaults.AuthenticationScheme,
                    new ClaimsPrincipal(claimsIdentity),
                    authProperties);
                }
                catch (Exception ex)
                {
                    string error = ex.Message;
                }
            }

            return LocalRedirect(returnUrl);
        }

step 2: add Application Authentication cookie

Program.cs

app.UseStaticFiles();

app.UseRouting();

// ******
// BLAZOR COOKIE Auth Code (begin)
app.UseCookiePolicy();
app.UseAuthentication();
app.UseAuthorization();
// BLAZOR COOKIE Auth Code (end)
// ******

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

step 3: add <CascadingAuthenticationState>

you need to wrap a <CascadingAuthenticationState> around some part of your UI tree, in App.razor as follows:

\src\Presentation\WeiXinAdmin\App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h1>Error</h1>
                    <h1>錯誤</h1>
                    <p>尚未登入或者登入的使用者帳號沒有權限使用這個頁面</p>
                </NotAuthorized>
                @*<Authorizing>
                        <h1>Authentication in progress</h1>
                        <p>Only visible while authentication is in progress.</p>
                    </Authorizing>*@
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

step 4:

src\Presentation\WeiXinAdmin\Pages\FetchData.razor

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

src\Presentation\WeiXinAdmin\Pages\Account\Account.razor

@page "/Pages/Account"

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles ="Administrator")]

AuthorizeView

path:\Shared\NavMenu.razor

  <AuthorizeView Roles="Administrator">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="Pages/Account">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Account
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="Pages/User/List">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> User(微信公众号用户)
                </NavLink>
            </li>
        </AuthorizeView>

G:\x\src\Presentation\Admin\Shared\LoginComponent.razor

@using Microsoft.AspNetCore.Components.Authorization
@inject AuthenticationStateProvider AuthenticationStateProvider





<AuthorizeView>
    <Authorized>
        <b>Hello, @context.User.Identity.Name!</b>
        <a class="ml-md-auto btn btn-primary"
           href="/logout?returnUrl=/"
           target="_top">Logout</a>
    </Authorized>
    <NotAuthorized>
        <input type="text"
               placeholder="User Name"
               @bind="@Username" />
        &nbsp;&nbsp;
        <input type="password"
               placeholder="Password"
               @bind="@Password" />
        <a class="ml-md-auto btn btn-primary"
           href="/login?paramUsername=@Username&paramPassword=@Password"
           target="_top">Login</a>
    </NotAuthorized>
</AuthorizeView>
@code {
    string Username = "";
    string Password = "";
}

<AuthorizeView Roles="admin, superuser">
    <p>You can only see this if you're an admin or superuser.</p>
</AuthorizeView>

microsoft ASP.NET Core Blazor authentication and authorization

https://docs.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.0&tabs=visual-studio

https://gist.github.com/SteveSandersonMS/175a08dcdccb384a52ba760122cd2eda

Authentication

https://github.com/dotnet-presentations/blazor-workshop/blob/master/docs/06-authentication-and-authorization.md

Getting Started with Authentication and Authorization using Blazor Server Side

https://www.codeproject.com/Articles/5136014/Getting-Started-with-Authentication-and-Authorizat

Oceanware
Blazor Security Docs and Blog Posts
Karl
3 months ago
Introduction
I’m coming to Blazor with a WPF, Xamarin, and Angular background. I’ve done a good bit of full .NET Framework Web API and .NET Core Web API. But, I’ve not done any MVC or Razor page development.

As a result, many concepts in Blazor are new to me, especially the security model, having never used any of it.

An additional twist is that Blazor apps can be either server-side or client-side, each has different requirements.

I put this list of resources for myself, so I can get up to speed and for others who need to master these APIs.

Thoughts
If I was writing a public app, I would use Google, OAuth, Twitter, etc. authentication so that I didn’t have to have any forms or code to create an account, change password, forgot my password, etc.

For blog posts apps with multiple logins, internal authentication is easier so those blog readers don’t have to create multiple 3rd party accounts to use your app. Moo2U is such an app as I have an admin, drivers 1 – 4, and many pubic e-commerce user logins.

Blazor Authentication and Authorization Resources
Blazor Docs

https://docs.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.0&tabs=visual-studio

Steve Sanderson Authentication and Authorization

https://gist.github.com/SteveSandersonMS/175a08dcdccb384a52ba760122cd2eda

Shaun Walker Oqtane blog post Authentication in Blazor

https://www.oqtane.org/Resources/Blog/PostId/527/exploring-authentication-in-blazor

Shaun Walker Oqtane Framework demonstration of a login form that works server or client-side.

https://github.com/oqtane/oqtane.framework/blob/master/Oqtane.Client/Modules/Admin/Login/Index.razor

Chris Sanity Security Series

https://chrissainty.com/securing-your-blazor-apps-introduction-to-authentication-with-blazor/

Michael Washington server-side cookie authentication

http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4316/A-Demonstration-of-Simple-Server-side-Blazor-Cookie-Authentication.aspx

Michael Washington server-side Google authentication

http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4356/Google-Authentication-in-Server-Side-Blazor.aspx

Ed Charbeneau Authentication and Authorization

https://edcharbeneau.com/blazor-authentication-authorization/

Visual Studio Magazine

https://visualstudiomagazine.com/articles/2019/06/13/aspnet-core-preview-6.aspx

Heather Downing Build an Authenticated Web App in C# with Blazor + ASP.NET Core 3.0 (App uses 3rd party auth with https://www.okta.com/)

https://scotch.io/tutorials/goodbye-javascript-build-an-authenticated-web-app-in-c-with-blazor-aspnet-core-30

Mike Brind Simple Authentication In Razor Pages Without A Database

https://www.mikesdotnetting.com/article/335/simple-authentication-in-razor-pages-without-a-database

Close
If you know of more resources, please post a comment or hit me up on Twitter and I’ll add them.

Thank you and have a great day,

Just a grain of sand on the world’s beaches.
Categories: blazor, security
Leave a Comment
Oceanware
Blog at WordPress.com.

https://www.c-sharpcorner.com/article/getting-started-with-authentication-and-authorization-using-blazor-server-side/

Introduction to Authentication with server-side Blazor

https://chrissainty.com/securing-your-blazor-apps-introduction-to-authentication-with-blazor/

Authentication And Authorization With Google In Server-Side Blazor

https://www.c-sharpcorner.com/article/authentication-and-authorization-with-google-in-server-side-blazor/

https://www.google.com/amp/s/oceanware.wordpress.com/2019/10/06/blazor-security-docs-and-blog-posts/amp/

Table of Contents

.Net 6.x