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

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

ウチのおとんのWEBサイトを作ることに。
C#が元々好きでBlazorに興味があったのでこれで実装しようと考える。
※WebAssemblyの方(IE11未対応)

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

を解決した時のメモ

ログインページのレイアウト

レイアウトはCodePenから拝借しました。
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で自分でやりましたｗ

画面全体にでない・・
それに左サイドメニューとヘッダが邪魔だぁ

以下の動画を参考
Blazor Tutorial : Layouts | Login Pages - EP13

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

<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

@inherits LayoutComponentBase

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

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

Login.razor

@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/