Table of Contents
.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" />
<input type="password"
placeholder="Password"
@bind="@Password" />
<a class="ml-md-auto btn btn-primary"
href="/login?paramUsername=@Username¶mPassword=@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.
Back to top
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.google.com/amp/s/oceanware.wordpress.com/2019/10/06/blazor-security-docs-and-blog-posts/amp/