Blazorでログインページを実装する

**この記事は２か月くらい前のものでずっと下書きにいれていたものです**
**続きに何を書くか忘れたので投下します。**


ウチのおとんのWEBサイトを作ることに。
C#が元々好きで[Blazor](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1)に興味があったのでこれで実装しようと考える。
※WebAssemblyの方(IE11未対応)

適当なかっちょいいレイアウトを[CodePen](https://codepen.io/)から拝借して、ログインページを作ることにしたが
BlazorのサンプルプロジェクトはSPAを前提としているからか、左サイドバーメニュー、ヘッダが表示されてしまいなんかヤダ
ログインページを全画面に出したいのに・・・

を解決した時のメモ


#ログインページのレイアウト
レイアウトは[CodePen](https://codepen.io/)から拝借しました。
https://codepen.io/Lewitje/pen/BNNJjo

ライセンス表記はcss、razorと個別に行うのは面倒だったので、プロジェクト直下に`License.txt`を作成してそこに記述しました。

```Lisence.txt
Copyright (c) 2020 by Lewi Hussey (https://codepen.io/Lewitje/pen/BNNJjo)
Released under the MIT license
https://opensource.org/licenses/mit-license.php
```

MITライセンスはライセンスが表記されているURLを記述すれば良いみたい。

でも唐突にライセンスの記載が始まる上記の書き方でいいのだろうか・・・。
「このアプリケーションはどこどこのコードで以下のライセンスに乗っ取ったコードを使用しています」や、「このアプリケーションは以下のOSSを含む。XXXは何々ライセンス～」みたいな感じで記載しなくてもよいのだろうか。

いまだにライセンス表記を何処にどういった記載をすれば良いか完全に理解できていない。



.net用のgitignoreを自動で作ってくれる
`dotnet new gitignore`

でも私はTortoiseGitでGUIで自分でやりましたｗ

画面全体にでない・・
それに左サイドメニューとヘッダが邪魔だぁ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526982/f3906fac-4741-9665-af43-b3f1df682f45.png)

以下の動画を参考
[Blazor Tutorial : Layouts | Login Pages - EP13](https://www.youtube.com/watch?v=PgDEpkWbsew)


理由はDefaultLayoutが`@typeof(MainLayout)`になっているからと思われ

```html
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
```

そこで、別途ログイン用のレイアウトを用意する `LoginLayout.razor`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526982/b24287c7-1c42-6cbd-2686-e50c80b6da44.png)


```html
@inherits LayoutComponentBase

<div class="col-12">
    <br /><br />
    @Body
</div>
```

`Login.razor`側で使用する`Layout`を指定する　→　`@layout LoginLayout`

**Login.razor**


```html

@page "/login"
@layout LoginLayout
@inject IJSRuntime JSRuntime

<div class="wrapper">
    <div class="container">
        <h1 class="text-white">Welcome</h1>

        <form class="form">
            <input type="text" placeholder="Username" @bind="@UserId">
            <input type="password" placeholder="Password" @bind="@Password">
            <button type="button" id="login-button" @onclick="this.Logon">Login</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

@code {
    /// <summary>
    /// ユーザーID
    /// </summary>
    [Parameter]
    public string UserId { get; set; }

    /// <summary>
    /// パスワード
    /// </summary>
    [Parameter]
    public string Password { get; set; }

    /// <summary>
    /// ログイン処理
    /// </summary>
    private void Logon()
    {
        JSRuntime.InvokeAsync<string>("console.log", this.UserId + this.Password);
    }
}
```
`razor`のシンタックスハイライトないんすか汗


**この記事は２か月くらい前のものでずっと下書きにいれていたものです**
今はログイン画面以外にも機能追加して、AWS EC2上(Amazon Linux 2)に乗っけてます。~~セキュアではありませんが・・・(http)~~

~~**すんません。https化しようとして失敗して今アクセスできません**~~
**なおりましたー！**
http://godphwng.net/