Skip to content

Latest commit

 

History

History
157 lines (90 loc) · 12.1 KB

File metadata and controls

157 lines (90 loc) · 12.1 KB

認証付きプロジェクトの始め方

ログイン(認証)付きのアプリを作るときのプロジェクトの立ち上げ方を説明します。

Codeer.LowCode.Blazor では、Visual Studio テンプレートで作るソリューションも、デザイナのテンプレートも、すべてログインを前提に作られています。「認証付きにするために何かを選ぶ」必要はなく、作ったらそのままログイン画面から始まります。 認証・認可の仕組みそのものは 認証 / 認可の概要 を、認可設定の手順は チュートリアル: 認証を有効にする を参照してください。

全体の流れ

手順 やること
1 Visual Studio で Codeer.LowCode.Blazor テンプレートからソリューションを作成
2 ビルドしてデザイナと Web アプリ(Server)を起動
3 デザイナの新規プロジェクトでテンプレートを選択(どれもログイン付き)
4 デプロイしてブラウザから admin / admin でログイン

手順 1〜2 を Claude Code に任せることもできます。クイックスタート を参照してください。


Step 1. Visual Studio でソリューションを作成

Visual Studio の「新しいプロジェクトの作成」で Codeer.LowCode.Blazor を検索し、Codeer.LowCode.Blazor を選んでソリューションを作成します。

作成したソリューションには、認証まわりのユーザーコードが最初から含まれています。

  • ログイン / ログアウト画面
  • Cookie 認証(ASP.NET の標準機能)によるログイン処理
  • app_users テーブルとパスワード(ハッシュ)を照合するログインチェック

Visual Studio 拡張のインストールやソリューション作成の基本手順は クイックスタート と同じです。

ログイン画面が不要な構成(前段のリバースプロキシで認証済み等)にしたい場合は、作成後にログイン部分を外します。手順は Starter リポジトリCLAUDE.md「認証を外す」にあります。Azure Entra ID など別の認証を使う場合も、この Cookie 認証を土台にログインの発行部分を差し替える形になります。


Step 2. デザイナでテンプレートを選ぶ

ビルドしてデザイナを起動したら、「ファイル」→「新規プロジェクト」でテンプレートを選びます。

新規プロジェクト作成ダイアログのテンプレート選択

テンプレート 向いている場面 初期ユーザー
空のプロジェクト ログインまわりだけ用意された状態から自分のアプリを作り始めたい admin / admin
入門サンプル デザイナの基本操作を小さな業務画面で覚えたい admin / admin
標準パターン集 検索・一覧・レイアウトなどの実装パターンに加えて、認証・権限・承認のパターンを実際に動かして学びたい admin / admin、alice / bob / carol / dave(パスワード: test)
在庫管理 / 営業支援 (SFA) / プロジェクト管理 そのまま業務で使える完成形のアプリから始めたい(業務テンプレート admin / admin

どのテンプレートにもユーザーマスタの AppUser モジュールが入っており、app.clprj の Current User Module に設定済みです。対応する app_users テーブルは同時に配置されるサンプル DB に含まれています。

デザイナのデプロイボタンで Web アプリへ送信すると、起動中の Web アプリにそのまま反映されます。 ブラウザでアクセスすると、まずログイン画面が表示されます。

ログイン画面


「空のプロジェクト」の中身

ログインできる最小構成のプロジェクトです。admin / admin でログインできます。

空のプロジェクトのホーム画面

含まれているのは次の 2 モジュールだけです。

モジュール 役割
Home ホーム画面(表示のみ)
AppUser ユーザーマスタ。ユーザー識別名・表示名・パスワードを管理

AppUser は app.clprj の Current User Module に設定済みで、ログインしたユーザーと app_users テーブルの行が結びついた状態になっています。つまり、デザイナでの認可設定(PageFrame / Module / データ単位のアクセス制御)をすぐに使い始められます。

AppUser モジュールのユーザー一覧

パスワードはそのままの文字列では保存されません。PasswordHash フィールドによってハッシュ化され、app_users テーブルの hash / salt 列に保存されます。ユーザーを増やすには、この画面の「新規作成」でユーザー識別名・表示名・パスワードを登録するだけです。

ここから先は通常のプロジェクトと同じように、モジュールを追加してアプリを作っていきます。認可設定の進め方は チュートリアル: 認証を有効にする を参照してください。


「標準パターン集」の認証・権限・承認サンプル

標準パターン集のサイドバーには「認証・権限」「承認」のグループがあり、ログインがあって初めて成り立つパターンを動かして確認できます。 admin / admin(管理者)と alice / bob / carol / dave(一般ユーザー、パスワード: test)の 5 ユーザーが登録済みです。

標準パターン集のホーム画面 (admin でログイン)

各パターンの作り方の詳細は 認証・権限・承認のパターン に個別記事があります。ここでは画面を動かしたときの様子を紹介します。

ログイン中ユーザーの表示とパスワード変更

「マイプロフィール」はログイン中のユーザー(CurrentUser)の情報を表示する画面です。サイドバー下部にもログイン中ユーザーの表示名が出ています。

マイプロフィール画面

「パスワード変更」ボタンでダイアログを開き、自分のパスワードを変更できます。変更後のパスワードもハッシュ化されて保存されます。

パスワード変更ダイアログ

→ 詳細: ユーザーモジュールと認証連動

自分のデータだけ見せる(行レベルセキュリティ)

「個人メモ」はデータ単位の読み取り条件(DataRead)で「自分が作成した行」だけに絞り込んでいます。 alice でログインすると alice のメモだけが見えます。

alice でログインしたときの個人メモ一覧

同じ画面を bob で開くと、alice のメモは存在しないかのように扱われ、bob のメモだけが表示されます。

bob でログインしたときの個人メモ一覧

作成者・更新者・作成日時・更新日時は、Field の Name を予約名(Creator / Updater / CreatedAt / UpdatedAt)にしておくことで登録時に自動でセットされます。スクリプトは不要です。

→ 詳細: 個人データのフィルタと権限

一般画面と管理画面の分離(PageFrame 権限)

このサンプルは一般ユーザー向けの Main と管理者向けの AdminFrame の 2 つの PageFrame で構成されています。AdminFrame には「CurrentUser のロールが admin であること」という表示条件が設定されています。

admin でログインすると、サイドバーに「管理画面へ」リンクが表示され、ユーザー管理・削除監査・承認経路マスタの管理画面に入れます。

管理画面のユーザー管理 (admin でログイン)

一般ユーザー(alice)でログインすると、サイドバーから「管理画面へ」リンク自体が消えます。

alice でログインしたときのホーム。サイドバーに管理画面へのリンクがない

URL を直接入力して管理画面にアクセスしようとしても拒否されます。

alice が管理画面の URL に直接アクセスしたときのエラー

管理画面のユーザー管理では、ユーザーの追加のほか「有効」フラグの切り替えができます。無効にされたユーザーはアプリ全体のアクセス条件(app.clprj の条件設定)を満たさなくなり、再ログイン時にアプリに入れなくなります。

→ 詳細: 一般画面と管理画面の分離 (複数 PageFrame)

申請 → 承認のワークフロー

「経費精算」「休暇申請」は申請書モジュールのサンプルです。alice で内容を入力して「申請」を押すと、承認経路マスタに登録された経路(経費は上長 bob → 経理 carol、10 万円以上は部長 dave を挟む高額経費ルート、休暇は上長 bob)に沿って承認者が決まり、詳細画面にステッパー形式の進捗・コメント・履歴が表示されます。

経費精算の申請詳細。承認の進捗と履歴が表示されている

承認者(bob)でログインして「承認待ち」を開くと、自分の番になっている申請だけが一覧されます。「開く」から申請内容を確認し、コメントを付けて承認・却下・差し戻しができます。「承認状況」では申請全体の状態と現在の担当者を一覧できます。

bob でログインしたときの承認待ち一覧

→ 詳細: 承認フローのワークフロー


関連ドキュメント