asp.net coreでサービス作ったから宣伝兼ねて技術公開する -2_1.セットアップ→プロジェクト作成→Identity認証画面まで-

##開発環境
私の開発環境となります。

- Windows 10 Pro
- Visual Studio 2017 Community
- SQLServer 2017 Express
- asp.net core 2.2
 


##Visual Studio 2017 のセットアップ

色々とインストールしたのですが、必要なコンポーネントは多分これでいけます。

- ASP.Net と Web開発
- データの保存と処理
- .Net Core クロスプラットフォームの開発

![vs2017_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/fc5db133-1ccc-bd5d-7505-0d4aa8d8f02d.png)


##プラグインセットアップ

参考サイトがそれぞれあるので、割愛。

「asp.net core 2.2 インストール」
　VisualStudio2017 .NETCore 2.1から2.2更新しようとしてはまった
　　https://qiita.com/na8esin/items/0ee7b8f362a55c83f3ea


「SQLServerとの接続用プラグイン」
　Visual Studio の NuGet パッケージ マネージャーから、SQLServer系のプラグインをインストール
 [2019/10/22 追記　ここから]
　インストールするバージョンが 3.x系の場合、core2.2との互換性がありません。
　インストールバージョンは、2.2.6を指定してインストールを行ってください。
 [2019/10/22 追記　ここまで]

「AWS SDK(Amazon S3)接続用プラグイン」
　Visual Studio の NuGet パッケージ マネージャーから、AWSSDK系のプラグインをインストール

「Google Vision API接続用プラグイン」
　Visual Studio の NuGet パッケージ マネージャーから、Google Visionのプラグインをインストール

「asp.net coreで画像ファイル編集用」
　Visual Studio の NuGet パッケージ マネージャーから、System.Drawing.Common 4.5のプラグインをインストール

「文字エンコード用」
　Visual Studio の NuGet パッケージ マネージャーから、System.Text.Encoding.CodePagesのプラグインをインストール



結果、以下のモジュールが、依存関係欄に表示されます。

「基本」
Microsoft.AspNetCore.App
Microsoft.AspNetCore.Razor.Design
log4net

「Amazon S3」
AWSSDK.Core
AWSSDK.S3

「Google Vision」
Google.Apis.Vision.v1

「SQLServer」
Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

「画像ファイル編集用」
System.Drawing.Common

「文字コード用」
System.Text.Encoding.CodePages


![TanaToru_ison.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/e2181cc3-4610-9927-671a-44bfe047b279.png)


##プロジェクトの作成
「メニュー」→「新規作成」→「プロジェクト」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/0cf5f363-cc09-be33-337d-87d8b96c93bd.png)

「Web アプリケーション（モデルビューコントローラー）」→「認証の変更」
メールアドレスでの登録にてユーザ登録を行う予定のため、認証を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/4725d1df-8f91-25a7-ef03-ccde0dd309ec.png)

「個別のユーザーアカウント」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/7cf67e8f-8f59-03ae-795a-1a9fdc813b54.png)

プロジェクト作成完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/af0c5fb4-272f-d8d4-3399-7fee661a2c8f.png)

「IIS Express」をクリック
一旦デバッグ実行を行ってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/1551cc82-cd3a-3fa8-f51c-f59fad6a1dc1.png)

そのまま実行した場合、ブラウザが立ち上がり、Welcomeが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/bc34b357-ef4e-9868-a88e-d33e1baba990.png)

「Register」を選択し、ユーザ登録画面へ遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/fe5812be-376c-2b47-4cc1-7eb055326d1e.png)

このようにユーザ登録画面までクリックだけで作ることが出来ます。


##Identityのスキャフォールディング
※Scaffolding（スキャフォールディング）とは、データモデルとなる型を元に、いわゆるCRUD（Create/Read/Upadate/Delete)と呼ばれる追加、読込、変更、削除を行う画面とそのコードを自動で生成する機能のことです

プロジェクトを作成し、ユーザ認証画面を作成しましたが、プロジェクト上にソースコードはありません。
メールアドレス以外にも登録してもらいたい内容があるので、編集できるコードが欲しい。。。日本語化もしたいですしね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/eebdc03b-510f-6c64-a253-b90d01a52eac.png)

「Identity」を右クリック→「追加」→「新規のスキャフォールディングアイテム」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/c30a88a1-9f9e-f6b0-9b96-0f353431c3ab.png)

「ID」を選択　→　「OK」
※初期フォーカスが、共通になっているため、わかりにくくなってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/ef0b6b22-1fa9-eb41-67cf-8d669e759050.png)

「すべてのファイルをオーバーライド」をチェック
「データコンテキスト　クラス」をプルダウンから選択して、「追加」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/e673212c-259d-1bd7-5a0f-4ab9a1d56970.png)

処理中・・・。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/62eeb6f4-7317-e65d-e20a-2f8959fece99.png)

完了！　「Identity」配下に、ユーザ認証画面のソースコードが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/d8677280-a3fb-86e8-c386-64195abfca88.png)


##ログイン画面の修正
生成されたソースコードの「Login.cshtml」を修正した、検証します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/aa4eb67c-2f18-229b-e860-55f182b2daf9.png)

```
<h4>Use a local account to log in.</h4>
```
↓

```
 <h4>登録したメールアドレスを入力してログインしてください。</h4>
```


再度、デバッグ実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/64ccd73f-f7ca-18c3-1117-bbbe00e17979.png)


編集出来ていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/d2798f42-6324-361b-8d5b-66c8beac15a1.png)


これでWeb側は、一旦OKです。
次に、DB設定、及び接続部を説明します。


##参考サイト
How to Add, Customize Identity in ASP.NET CORE 2.1:
https://www.youtube.com/watch?v=tW5QwWPKXaY

ASP.NET identityの実装 ログイン機能:
https://qiita.com/Sa_Ru/items/0e11413f994cc4108560

ASP.NET Core 2.x Identityについて:
https://www.slideshare.net/YutaMatsumura/aspnet-core-2x-identity

---

【是非お試しください】※完全無料です
TanaToru -本棚管理サービス-
　https://app.zero-one-system.co.jp/TanaToru/