Autodidact

主にASP.NET Core、C#等関連の独学用メモ

ASP.NET Core Identity 1

前回で何となく構成を把握できた（ということにして）、で、
実際のWebアプリに必要となる事を順にお勉強していきたいと思います。

とりあえずWebアプリには基本的に必須な認証系、
ASP.NET Core Identityを勉強していきます。

ASP.NET Core Identity

MemberShipに成り代わって誕生した新しい仕組み。
と言っても2013年ごろからありますね。

現時点で1.1.0が最新リリースです。
3の次から間にCoreが付いて1から振りなおしたようです。

ASP.NETならWeb FormsだろうとMVCだろうと何でも使えて、
Entity Frameworkを使ってCode Firstでテーブル生成できたり、
使わない場合でもデータストアに融通が利いて、
OWIN準拠なのでFacebookやTwitterの認証が使えたり、
2段階認証を使えたりするイマドキのプロバイダらしいです。

と、適当にググったところで習うより慣れろ、
認証を有効にしたサンプルを見てみます。

認証を使うWebアプリケーションプロジェクトの作成

[新しいプロジェクト]→[ASP.NET Core Webアプリケーション(.NET Core)]
を選択後に表示されるダイアログで、[認証の変更]ボタンを押して、

f:id:autodidact:20170415202506p:plain


個別のユーザーアカウントを選択してOKOKしてプロジェクトを作成します。

f:id:autodidact:20170415202512p:plain

とりあえず実行

前回の認証無しサンプルより色々ファイルが増えています。
とりあえず何も考えずにF5をターンと押して実行します。


f:id:autodidact:20170415202515p:plain

まずユーザー登録したいのでRegisterをクリック。


f:id:autodidact:20170415202519p:plain

ユーザー登録画面が表示されるので、
適当な嘘アドレス、適当なパスワードを入力しRegisterボタンクリック。
パスワードは強度を求められます。大文字小文字英数以外記号を含むくらい。


f:id:autodidact:20170415202528p:plain

DB開けないしってことで、エラーになります。
いきなり実行したのでDBがMigrationによって作成されていないためです。
素直にApply Migrationsボタンをクリック。


f:id:autodidact:20170415202534p:plain

終わったらこんな感じにボタンが変わります。


f:id:autodidact:20170415202538p:plain

もう一度ユーザー登録を試すと今度は登録成功します。
VS2017ならワークロード「データの保存と処理」が未導入の場合は
LocalDBが無いわけだからここで失敗するのかな？ためしてないですが。


因みに私が導入しているワークロードは以下のとおりです。

勝手に作ってくれたDBはどこ？
"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Sample3-略;Trusted_Connection=True;MultipleActiveResultSets=true"
},

appsettings.jsonを確認すると接続文字列があります。
サンプルは既定でLocalDBを使うようになっています。

LocalDBは開発用SQL Serverデータベースみたいなものです。
別に開発用SQL Serverを導入した場合はここを変更すれば良いかと。


f:id:autodidact:20170415202542p:plain

メニューの[ツール]→[データベースへの選択]で、
Microsoft SQL Serverを選択し、データプロバイダーは
.NET Framework SQL Server 用データ プロバイダーを選択して続行をクリック


f:id:autodidact:20170415202546p:plain

LocalDBはサーバー名の候補に自動で挙がらないみたいなので、
接続文字列通り入力します。
入力後、データベース名は選択可能となるので、
これも接続文字列に指定されているDBを選択してOK。


f:id:autodidact:20170415202549p:plain

サーバーエクスプローラーからDB確認できるようになりました。
ASP.NET Core Identityっぽいテーブルが作成されているのがわかります。


f:id:autodidact:20170415202552p:plain

AspNetUsersテーブルをSELECTすると先ほど作成したテストユーザーが
登録されているのが確認できます。

とりあえず続く。

Visual Studio 2017のNugetパッケージマネージャー

Visual Studio NuGet

VS2017のNuGetパッケージマネージャーは既定で導入されますが、
何かしらの理由があって再導入したい場合はVisual Studioインストーラーから行います。

個別のコンポーネントタブのコードツール類にNuGet パッケージ マネージャーは存在します。
f:id:autodidact:20170412201536g:plain

最初VSのツールメニューからCUIのコンソールはあるけど、
GUIの「ソリューションのNuGet パッケージの管理」メニューが、
表示されず、GUIが見れなかったので何でだろう？無くなったのかな？
って思ってたんですが、Visual Studioを更新したら表示されるようになりました。
Visual Studioの更新もVisual Studioインストーラーから行えます。

というメモでした。

ASP.NET Core MVCサンプルの構成

ASP.NET MVC Core

おもむろに始まるお勉強ブログです。
.NET Core周辺、主にASP.NET Core MVCをお勉強する試み。
知識は無く、意識も低く、内容も保障できません。

とりあえずASP.NET Core MVCのサンプルを眺める1回目です。

Webアプリケーションプロジェクトの新規作成

新しいプロジェクト ＞.NET Core ＞ASP.NET Core Webアプリケーション(.NET Core)を選択。
Coreなのにターゲットフレームワーク4.5.2が選択されているのが違和感ですが無視。

ASP.NET Core 1.1を選択し、Webアプリケーションを選択してOKボタン。
サンプルを眺めるのが目的なので「空」ではなく、Webアプリケーションを選択します。

勝手に色々含まれたサンプルサイトが作成されます。
実行すると普通にWebサイトが表示されます。

習うより慣れろということでファイルを上から順に見てみます。

Connected Services

接続済みサービスが表示されるようです。
デフォではApplication Insightsが表示されています。
とりあえずスルー。

Properties\launchSettings.json

開発サーバ環境情報が記載されたjson設定ファイル。

Webアプリケーションプロジェクトのプロパティページで、
プロパティや起動、SSLや認証等を変更すると反映されます。

wwwroot

css, image, js, lib, faviconと静的コンテンツ置き場。
アクセスパスとしてはwwwrootフォルダ配下ではなく、
root階層で参照されます。

例えば、
\samplesite\wwwroot\css\site.css
ならば、
http://localhost:777/css/site.css
となります。

Startup.csのConfigureメソッド内で、

app.UseStaticFiles();

っと呼び出してるところでその辺設定されているようです。
wwwrootが未指定時既定値となります。

物理階層とリクエストパスが一致しない場合のアサインや、
静的コンテンツのキャッシュ保持期間等ヘッダ情報の追加が必要な場合に
思い出せればいいようです。

Working with static files in ASP.NET Core | Microsoft Docs

続いてwwwroot配下の各フォルダを見てみます。

wwwroot\css\site.css

CSSです。後述するbundleconfig.jsonでBundle（圧縮みたいなの）指定されています。
ビルド時はBundleによってsite.min.cssと小さく読みにくい形になります。

元から圧縮されてる場合もあるし必要なのかな？って気がしますが、

wwwroot\images\banner1.svg～4.svg

.svg??何？って感じですが、
開いてみるとよくわからないXMLで何か指定されています。

Wikipedia先生によれば、画像のVectorデータのようです。
Scalable Vector Graphics - Wikipedia

画面のサイズに関わらずキレーに画像を表示したりするみたいです。
とりあえずそういうものだと理解しておきます。

wwwroot\js\site.js

javascriptです。サンプルでは何も記述はありません。
cssと同様にBundleによって圧縮されます。

wwwroot\lib

bootstrap、jquery3つが入ってます。

bootstrapはレスポンシブデザインのCSSフレームワークです。
他bootstrapが必要とするものが色々格納されています。

jqueryは知る人ぞ知るjQueryです。

これも後述\Views\Shared\_Layout.cshtmlで参照されてますね。

あまり深く考えずに次々眺めていきます。
favicon.icoはアドレスバーやタブに表示されるサイトアイコンです。

Controllers

MVCのCです。
サンプルではHomeControllerしかありません。
またMVCのM、Modelも特にCRUDが無いためか作られていません。
（認証設定した場合は作られるかもしれません）

Views

MVCのVです。
HomeControllerに対応するHomeは以下のView達と、
共通部分のShared配下のView達があります。

Shared配下のViewだけ何となく名前で意味がわかりますが、
一応中身をみてみます。

Views\Shared\_Layout.cshtml

共通レイアウトとなるViewです。Webフォームで言うMaster。
Views\_ViewStart.cshtmlでLayout指定されています。

Views\Shared\_ValidationScriptsPartial.cshtml

開発環境、ステージング/リリース環境で検証用jQueryを分けてる部分Viewですが、
どこから指定されてるんだろう？
ってサンプルには指定が無いみたいですね。入力するページが無いし。
検証が必要な時は読み込めばよろしいのでしょう。

Views\Shared\Error.cshtml

Startup.csで指定されてるステージング/リリース環境用エラーViewです。

View\_ViewImports.cshtml

そういう名前で決まってるView用インポート的な共通Viewです。
サンプルでは自身の名前空間と、
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
でTag Helperを指定しています。

Tag Helperってのはタグに指定されている謎の属性たちです。
_Layout.cshtmlのタグ内にasp-なんとかっていうHTMLっぽくない
謎の属性がたくさん指定されていますがそいつらの事です。

<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>

のasp-controller,asp-action等のことです。
HomeControllerのIndexアクションへの遷移って
何となくわかりますね。

View\_ViewStart.cshtml

View開始時によみこまれる約束なViewです。
サンプルでは上述の共通レイアウトView、_Layout.cshtmlを指定しています。

appsettings.json

設定ファイル的jsonファイルです。
Web.configはさようならなのでしょう。

bower.json

弓とは関係なく東屋、木陰、休息所という和訳です。
ググってみるとフロントエンド用のパッケージマネージャとのこと。
クライアントサイド向けNuGet的なものみたい。

ソリューションエクスプローラーの依存関係配下に指定があります。
Bower配下でbootstrap、jQueryが管理されていて、
NuGet配下でAspNetCoreやMVCに必要な参照が管理されているみたい。

bundleconfig.json

いつの間にか追加された機能Bundleの設定。
cssやjsをまとめて小さくしてくれます。

Program.cs

メソッドチェーンで色々呼ばれてますが一旦は気にしません。

Startup.cs

開始時に実行されるお約束クラスです。
さようならGlobal.asaxなのでしょう。

設定とかサービスとかエラーハンドリングとか。
MVCで大切なroutingもここですね。


これで一通り目を通したつもりになっておきます。
深く考えずにスルーしてる部分も多く、勘違いもあると思うのですが、
細かいことはこれから勉強できたらいいなって感じです。つづく。