Yesterday's verification only targeted the Identity system and did not cover our logs. If you enter https://localhost:5018/Blog in the address bar while not logged in, you can still see the blog. Let's integrate the authentication.
First, wrap <AuthorizeView> around the Blog.razor component. This means the content inside it will only be displayed based on whether the user is authenticated. Then add <Authorized> around the Blog content—as the name implies, only authenticated users can see it. Additionally, add a <NotAuthorized> block for when authentication fails. Remember to include Context="IdentityContext", otherwise it will conflict with the context of the <EditForm> in Blog.
Next, go to App.razor and wrap the existing <Router> with <CascadingAuthenticationState>. This tells Blazor that all components must undergo authentication.
Then, in NavMenu.razor, add a logout link inside the <Authorized> component, and move the login link to <NotAuthorized>, also update the icons.
At this point, you need to restart the system for the authentication mechanism to take effect. You can see that unauthenticated access is now blocked.
Before logging in, open the Application tab in Developer Tools and check Cookies. There is currently only one cookie.
After logging in, a new cookie appears—this is our authentication cookie.
Now let's test the logout. Click the Logout link on the left. It does not log out as expected; instead, it navigates to a Log out page, the top right still shows the login state, and the authentication cookie remains.
Let's look at Logout.cshtml.cs. It contains OnGet() (Editor's note: This method is not present in .NET 6 Blazor Server; please compare) and OnPost(), corresponding to HttpGet and HttpPost respectively. Clicking a link uses HttpGet, but OnGet() does nothing; OnPost() calls the ASP.NET Core Identity API to log out the user.
Original image from the article: An extra OnGet() method is shown
Editor's .NET 6 project screenshot: Compared to the above, the OnGet() method is missing
In Logout.cshtml, we also find a <form> element. The attributes starting with asp- (like asp-page) are ASP.NET Core Tag Helpers, similar to Angular's *ngFor. We'll skip that for now. Notice it uses method="post" and has a <button type="submit">, which corresponds to the OnPost() method.
Typically, users wouldn't expect to click logout and then have to click logout again. So let's modify it. First, add id="LogoutFormInLogout" to the <form>, then add a <script> block using an IIFE (Immediately Invoked Function Expression)—meaning the function executes immediately without being called. Once the user enters this page, the form is submitted automatically. This way, clicking the Logout link on the left in NavMenu will log the user out successfully.
If you don't want such a long id like id="LogoutFormInLogout", you can use id="logoutForm" instead. In the root's Pages/Shared/_LoginPartial.cshtml, there is already a logout <form> with that id.
However, staying on the Log out page after logging out doesn't make sense. So change the else block in OnPost() to return LocalRedirect("~/Blog");. This way, after logout, the user will be redirected to the unauthenticated Blog page.
This completes the login authentication mechanism in a single project, with a full set of features and pages. This approach is suitable for small projects. Tomorrow we'll explain the authentication principles in ASP.NET Core.
References:
Note: The code in this article has been refactored using .NET 6 + Visual Studio 2022. You can compare it with the code in the original link. Thanks for reading and supporting the original author.