1. 前回のあらすじ
Identity のパスワード制約を Startup.cs から変更しました。また、新規登録にユーザ名の入力フォームを作成しました。
2. 前回のつづき
この状態では、ログインした後の表示名がメールアドレスのままになっているので今回はここの表示を変更します。加えてユーザ名を用いてログインできるようにします。目標としては次の通りです。
- データベースの UserName カラムに View で取得した ユーザ名 (Username) を反映させる
- ログイン後の表示名を Username にする
- ユーザ名を用いたログイン
3. 新規登録にてユーザ名を登録する
Register.cshtml.cs を開き、以下のコードを探します。
var user = new IdentityUser { UserName = Input.Email, Email = Input.Email };
見てみると、 UserName に Input.Email が反映するような設定になっています。これが原因でメールアドレスがユーザ名に反映されてしまうので、 Input.Username に修正します。
var user = new IdentityUser { UserName = Input.Username, Email = Input.Email };
これで実行して、新規登録してみます。
エラーが表示されました。実はデフォルトの入力フォームの設定では英数字と一部の記号しか認識されないため、日本語を入れるとはじかれます。なので、日本語を入力できるように設定していきます。設定といえばおなじみの Startup.cs の Configure メソッドですね。前回のパスワードと同様に、このメソッドを探して追記します。パスワード設定の次の行に追記してみます。
options.User.AllowedUserNameCharacters = ""; //文字列の制限をなくす options.User.RequireUniqueEmail = false;
こんな感じです。
デフォルトでは英数字と一部の記号しか扱えませんが、="" にすれば文字列の制限をなくすことができます。逆に " " の間に文字をいれると、その文字しか使用できなくなります。また、二行目はメールアドレスを登録している必要があるかどうかの設定です。デフォルトでは false になっていますが、Require 属性がついているのでどちらにせよ必須になっています。
これで日本語が扱えるようになっていると思いますので確認してみましょう。再び新規登録してみてください。(ユーザ名は確認のために日本語にしてみてください。)
無事に日本語で表示されました。これで新規登録に関する部分は OK です！
4. ユーザ名を用いたログイン
新規登録画面はこれでいいですが、ログイン画面はメールアドレスを使った認証のままになっています。メールアドレスでもいいのですが、ここは練習がてらユーザ名を用いてログインする設定を行います。Identity のView にあるLogin.cshtml.cs のメールアドレス入力フォーム部分を次のように変更します。
このままではデータベースと照合できないので、もう一箇所変更します。
Input.Username に変えた事によって、入力データ (ユーザ名 と パスワード) が登録されたデータベースにて照合されるようになりました。あとは View 部分 (Login.cshtml) が Input.Email のままなので、Input.Username に変更します。
これで一度ログインしてみましょう。
ログインすると、右上にユーザ名が表示されています。
これでログイン関係のカスタマイズは終了です。
5. まとめ
データベースのあるカラムと照合するには データベースのカラム名 = Imput.変数名 のところを修正します。自分で設定した入力フォームの変数を用いた場合、そのデータベースのカラム名に対応するように変更すれば照合できます。カラム名を決めているのは IdentityUser クラスで、Migration ディレクトリの中の ApplicationDbContext に継承され、その先の示すデータベースのカラムに対応しています。ちょっと複雑ですが、カラム名を参照するにはここを確認すると良いと思います。
今回でログインページの制作は終了です。次回からは文献管理のためのデータベースを作成し、その View を制作していきます。ようやく本番に入ります。
