LoginSignup
1
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-10-21

開発環境

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

  • 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

プラグインセットアップ

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

「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

プロジェクトの作成

「メニュー」→「新規作成」→「プロジェクト」
image.png

「Web アプリケーション(モデルビューコントローラー)」→「認証の変更」
メールアドレスでの登録にてユーザ登録を行う予定のため、認証を変更します。
image.png

「個別のユーザーアカウント」
image.png

プロジェクト作成完了!
image.png

「IIS Express」をクリック
一旦デバッグ実行を行ってみます。
image.png

そのまま実行した場合、ブラウザが立ち上がり、Welcomeが表示されます。
image.png

「Register」を選択し、ユーザ登録画面へ遷移します。
image.png

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

Identityのスキャフォールディング

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

プロジェクトを作成し、ユーザ認証画面を作成しましたが、プロジェクト上にソースコードはありません。
メールアドレス以外にも登録してもらいたい内容があるので、編集できるコードが欲しい。。。日本語化もしたいですしね。
image.png

「Identity」を右クリック→「追加」→「新規のスキャフォールディングアイテム」
image.png

「ID」を選択 → 「OK」
※初期フォーカスが、共通になっているため、わかりにくくなってます。
image.png

「すべてのファイルをオーバーライド」をチェック
「データコンテキスト クラス」をプルダウンから選択して、「追加」
image.png

処理中・・・。
image.png

完了! 「Identity」配下に、ユーザ認証画面のソースコードが生成されます。
image.png

ログイン画面の修正

生成されたソースコードの「Login.cshtml」を修正した、検証します。
image.png

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

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

再度、デバッグ実行
image.png

編集出来ていることを確認。
image.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/

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2