Day 22 ASP.NET Core Identity(2)

昨天做的验证只针对 Identity 系统，没有包含到我们的日志，如果在未登入状态下於网址列输入https://localhost:44327/Blog，还是可以看到部落格，让我们整合验证。

首先在Blog.razor外层加上<AuthorizeView>，这表示包在其中的内容呈现与否的条件为使用者是否获得验证，接着在Blog内容外加上<Authorized>，顾名思义就是通过验证才能看到内容，另外新增一段未通过验证的<NotAuthorized>程序码。这边要记得加上Context="IdentityContext"，否则会跟Blog的<EditForm>本身的context产生冲突。

再去App.razor用<CascadingAuthenticationState>将原本的<Router>包裹，告诉 Blazor 所有 Component 都必须经过验证。

然後是NavMenu.razor，<Authorized> Component 加上登出连结，登入连结则移到<NotAuthorized>，icon 也改一下。

这时候要重新启动系统，验证机制才会生效，可以看到确实挡住了未验证访问。

在登入前，先打开 Dev Tool 的 Application 页签去看Cookies，目前只有一个 Cookie。

登入後看到新的 Cookie，这就是我们的 Authentication Cookie。

接着来试试看登出，点击左边的 Logout，并没有如想像中登出，而是来到一个 Log out 页面，右上角还是登入状态，Authentication Cookie 也还在。

我们去看Logout.cshtml.cs，里面有OnGet()跟OnPost()分别对应HttpGet及HttpPost，我们从连结点过来的作法是HttpGet，但OnGet()这里什麽事都没做，OnPost()则呼叫 ASP.NET Core Identity API 将使用者登出。

Logout.cshtml也找到了一个<form>元素，asp-page这些asp-开头的程序是 ASP.NET Core 的Tag Helper (标签协助程序)，类似 Angular 的 *ngFor，这边先略过不提，我们看到这里用了method="post"，还有个<button type="submit">，对应了刚才的OnPost()。

通常不会有使用者按了登出後还要再按一次登出，所以我们这边改动一下，先给<form>加上id="logoutFormInLogout"，再加上一段<script>，这里用到 IIFE(Immediately Invoked Functions Expressions)，意即不需要呼叫就会执行的函式，一旦使用者进入这页面就会将<form>送出，如此一来，只要点击NavMenu左边的 Logout 连结，就可以顺利登出了。

如果不想要加上id="logoutFormInLogout"这麽长的 id，也可以用id="logoutForm"就好，根目录下的 Pages/Shared/_LoginPartial.cshtml里面有个登出的<form>已经定义了id="logoutForm"这个 id。

不过现在登出後还停留在 Log out页面似乎没有意义，所以将OnPost()的else区块改成return LocalRedirect("~/Blog");，这样登出後就会回到未验证的 Blog 页面。

这样一来就完成了单一专案的登入验证机制，而且各种功能、页面一应俱全，如果只是小型专案的话可以这麽做，明天就来说明这些 ASP.NET Core 的验证原理。

Ref:立即函式 IIFE

Ref:Blazor cookie authentication Logout page