【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その3～

前回

【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その1～
【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その2～
の続きです。

前回までは、チャットページでSignalRを使用してブラウザ間で文字のやり取りが見れる所までやりました。
今回はログイン機能の見直しをしたいと思います。

現在のログイン画面の問題点

前にもちらっと書きましたが、今のままだとユーザーIDとパスワードに何かしらの文字さえ入れておけば認証が通る仕組みです。
なので、事前に登録したユーザーID・パスワードを使用してログイン出来るようにしてみましょう。

どのようにログイン情報を保持するか

ぱっと思いつく方法だと、自前のDBにユーザー情報を登録しておき、ログインボタン押下時にユーザーIDとパスワードでレコードが抽出できるか、というのが思い浮かびました。

ただそれだと面白くないというか、この記事を見ている人がパッと試しにくくなりますしそれよりもよい方法があるのではという漠然とした考えがあったので調べてみました。

IDaaS

イマドキの流行りはこのIDaaSを使用しているみたいですね。

IDaaS(Identity as a Service)の略です。読み方は「アイディーアース」または「アイダース」と呼びます。SSO(シングルサインオン)等のID認証をクラウド経由で提供するサービスです。最近はWebサービスやスマートフォン以外の機器が増えてきました。それぞれ、ID認証する必要が出てきており複雑化してきています。

出典：認証サービスiDaaSのFirebaseとAuth0 機能比較

簡単に纏めると、
昔はDBにIDとパスワードを保存してたけどサービスが多くなりすぎてそれを制御する開発者側が辛い、消費者側も覚えとくの辛い。
んじゃ一個どれか覚えておけば全部アクセスできるようにすればいいじゃん！ということを叶えてくれる仕組みなわけですね。

具体例を挙げると、
何かしらのサービスにログインする場合（ex.ニコニコ動画 とか）に、
ツイッター、グーグル、フェイスブック、アップル、それかユーザーIDとパスワード、どれか持ってればログインできるよ？って聞かれた方が使う側としてもログインが楽だよねって事です。

じゃあどういうIDaaSがあるんでしょうか。

Amazon Cognito

Amazon Cognito(コグニート)というIdP(Identity Provider)がAWSで提供されているということを知りました。
しかもなんと、5万回の認証まで無料(!!!)だそうです。これはよい。

でも、Twitter・Instagramなどの認証には対応していないようです。

Auth0

Auth0というのもあるようです。

• OIDC/OAuth2を利用した認証・認可が可能
• 画面はAuth0側で自由に作り込みが可能（アプリ内に画面を自分で作り込んで持つことも可能）
• ソーシャル連携が可能（ボタンをオン・オフすると、標準画面にソーシャルログインボタンが出現します）
• MFA(Multi-Factor Authentication : 多要素認証)が可能
• パイプライン・HOOK機能で、サインアップ・サインイン等、特定のアクションにlambda的なロジックの挟み込むことが出来る

出典：Auth0 導入編

結構、高機能っぽいですね。
特に、画面が作れる所やダッシュボードからサンプルコードを落とせる所が凄くよいなと思いました。

しかし、最低でも月$15…。（開発アカウントだけなら無料）

Firebase Authentication

最後に、Firebase Authenticationを紹介。

Firebase Authenticationには、バックエンドサービス、使いやすいSDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。Firebase Authentication では、パスワード、電話番号、一般的なフェデレーション ID プロバイダ（Google、Facebook、Twitter）などを使用した認証を行うことができます。

出典：Firebase - ドキュメント

こちらも機能が充実してそうですね。
調べたんですがイマイチ料金体系がよくわかりませんでした。
恐らく、Firebase Authentication単体でのサービス提供はしていなさそうです。

選ばれたのはCognitoでした

機能面で言えば、恐らくはAuth0の方がよさげですが今回はお財布に優しいCognitoで実装してみたいと思います。

Cognitoの実装前の準備

まずは チュートリアル: ユーザープールの作成 に沿って、ユーザープールの作成をしてください。
この時に生成されるPoolIDはメモしておいてください。

次に、ドメイン名を適当に登録する必要があるらしいです。

ユーザーを作成する際に面倒なので、ポリシーからパスワードの強度を最大まで下げておくと楽です。

そしてこれが最重要かつ壮大な罠。
アプリクライアント作成時に「クライアントシークレットを生成」のチェックを外して登録してください。シークレットを生成すると認証が上手くいきません。

これはやらなくてもよいですが、ユーザーの作成をしておくと後々の説明が頭に入ってきやすくなるとおもいます。このユーザーはCognitoの認証を許可されたユーザーとなります。

ここまで出来たら準備完了です。

Cognitoの実装

ブログやQiitaで実装している記事がちらほらあったので余裕じゃん！と思ったら案外上手くいきませんでした。半ば心折れそうになってましたが無事に実装出来たので安心してください。

一番参考になったのは以下の動画です。
AWS Cognito C# example

NuGetから以下二つのライブラリをインストールしてください。

• Amazon.AspNetCore.Identity.Cognito
• Amazon.Extensions.CognitoAuthentication

Index.razor.csを以下の様にします。これで認証が通るようになります。

Index.razor.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Amazon;
using Amazon.CognitoIdentityProvider;
using Amazon.CognitoIdentityProvider.Model;
using Amazon.Extensions.CognitoAuthentication;
using Amazon.Runtime;
using LoginTest.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace LoginTest.Pages
{
    public partial class Index
    {
        #region 定数
        private const string PoolID = "us-east-1_hogehoge";
        private const string ClientID = "hogehogehogehoge";
        private RegionEndpoint Region = RegionEndpoint.USEast1;
        #endregion

        #region フィールド
        private string _loginErrorMessage;
        #endregion

        #region プロパティ
        /// <summary>
        /// Inject属性を指定することで、NavigationManagerのサービスの依存関係を挿入します。
        /// </summary>
        [Inject]
        public NavigationManager Navigation { get; set; }
        /// <summary>
        /// ログイン情報を保持
        /// </summary>
        public LoginData LoginData { get; set; }
        #endregion

        #region コンストラクタ
        public Index()
        {
            //Index.razorから参照するのでインスタンス生成をしておかないとエラーとなる
            LoginData = new LoginData();
        }
        #endregion

        #region メソッド
        /// <summary>
        /// Validate処理成功時に処理
        /// </summary>
        /// <param name="context"></param>
        public async Task OnValidSubmit(EditContext context)
        {
            Console.WriteLine($"OnValidSubmit()");

            var errorMessage = await SignInUserAsync();
            if (string.IsNullOrEmpty(errorMessage))
            {
                Navigation.NavigateTo("Chat", false);
            }
            else
            {
                _loginErrorMessage = errorMessage;
            }
        }
        /// <summary>
        /// Validate処理失敗時に処理
        /// </summary>
        /// <param name="context"></param>
        public void OnInvalidSubmit(EditContext context)
        {
            Console.WriteLine($"OnInvalidSubmit()");
        }
        /// <summary>
        /// Cognitoで使用できるユーザーを作成する
        /// </summary>
        /// <returns></returns>
        public async Task<string> SignUpUserAsync()
        {
            //Regionが「USEast1」なのは作成したPoolIDのプレフィックスと同じにしている為
            using var provider = new AmazonCognitoIdentityProviderClient(new AnonymousAWSCredentials(), Region);
            var signUpRequest = new SignUpRequest
            {
                ClientId = ClientID,
                Username = LoginData.UserID,
                Password = LoginData.Password,

                UserAttributes = new List<AttributeType>
                {
                    new AttributeType{Name = "email", Value="[e-mail]"},
                },
            };

            try
            {
                var result = await provider.SignUpAsync(signUpRequest).ConfigureAwait(false);
                return string.Empty;
            }
            catch (Exception e)
            {
                return e.Message;
            }
        }
        /// <summary>
        /// Cognitoで登録したユーザかを判別する
        /// </summary>
        /// <returns></returns>
        private async Task<string> SignInUserAsync()
        {
            using var provider = new AmazonCognitoIdentityProviderClient(new AnonymousAWSCredentials(), RegionEndpoint.USEast1);

            var userPool = new CognitoUserPool(PoolID, ClientID, provider);
            var cognitoUser = new CognitoUser(LoginData.UserID, ClientID, userPool, provider);
            var authRequest = new InitiateSrpAuthRequest
            {
                Password = LoginData.Password,
            };

            try
            {
                var authResponse = await cognitoUser.StartWithSrpAuthAsync(authRequest).ConfigureAwait(false);
                var userRequest = new GetUserRequest
                {
                    AccessToken = authResponse.AuthenticationResult.AccessToken,
                };

                await provider.GetUserAsync(userRequest).ConfigureAwait(false);
                return string.Empty;
            }
            catch (Exception e)
            {
                return e.Message;
            }
        }
        #endregion
    }
}

最初にログイン画面を作った記事から追加しているのはSignUpUserAsyncメソッド・SignInUserAsyncメソッドです。

SignUpUserAsyncメソッドに関しては、先ほどの手順で示したCognitoへのユーザー追加をコード上から行っているだけです。ただ一つ注意点として、SignUpUserAsyncメソッドからユーザーを作成した場合、ユーザーの確認をしてやる必要があります。これをしないと認証が通りませんでした。

コード上からアカウントのステータスを更新できる方法も恐らくあるんでしょうけど、ぱっとは分かりませんでした。知っていれば教えて欲しいです。

また、SignInUserAsyncメソッドではCognitoに登録したユーザーが存在するかを取得しています。いずれのメソッドも、エラーメッセージを返すようにしており、問題がなければ空文字が返ってきます。

Cognitoでハマった所

①謎のRegion
AmazonCognitoIdentityProviderClientクラスの第二引数にRegionという謎のパラメーターを渡さないといけません。よくわかりませんが、発行されたPoolIDの接頭辞に付いているものと同じRegionEndpointを渡せば良いようです。

②謎のエラー
認証時に、以下のエラーメッセージが返ってきていました。

「Unable to verify secret hash for client」
クライアントの秘密ハッシュを確認できません

これを読んで、確かにシークレットハッシュ渡してないなと思って渡すようにしたんですが、それでも解消されませんでした。調べてみたところ
AWS Cognito User Pools のサインアップ時に NotAuthorizedException が出る (JavaScript)という記事の中で言及されていますが、上記の手順で示した通り「クライアントシークレットを生成」のチェックを外す必要があったようです。

この記事が無ければ、無限にハマるところでした。

③パスワードのエラー
認証時に「validation errors detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6; Value at 'password' failed to satisfy constraint: Member must satisfy regular expression pattern: ^[\S]+.*[\S]+$"}」というエラーが出て何事かと思ったんですが、ユーザー登録時のパスワードは6桁以上にしようね、と怒られていました。

これも上記で設定した通りのポリシーに沿ってユーザー登録時にエラーを出してくれているみたいです。すごい。

あとはログイン認証失敗時のエラーを出す場所を追加で用意してあげます。
なんか他にいい書き方があれば教えてください。

Index.razor

@if (!string.IsNullOrEmpty(_loginErrorMessage))
{
    <div class="form-group">
        <p style="color: red; font-weight: bold;">@_loginErrorMessage</p>
    </div>
}                                                          

これで実行してみます。

最初はパスワードをわざと間違え、エラーを表示させる。
次に、Cognitoに登録しているユーザーID・パスワードであれば認証が通り、晴れてチャット画面へ遷移できることが確認できました。

しかし、これでもまだ不完全です。
それはどこでしょうか？次回の記事をお楽しみに！

まとめ

実装量としては全然大したことありませんでしたが、ドキュメントが少なさ過ぎてかなりてこずってしまいました。Cognitoを使ってみたことがなかったので一つ使える知識が増えたのかなと思います。

参考にさせて頂いたページ

• 認証サービスiDaaSのFirebaseとAuth0 機能比較
• Amazon Cognito(コグニート)
• Auth0
• Firebase Authentication
• AWS Cognito C# example
• C#でCognitoを利用し、ユーザー登録→認証を実装する。
• Windowsフォームアプリの認証にCognitoを使ってみた
• Amazon CognitoAuthentication 拡張ライブラリの例
• プログラミングせずにCognitoで新規ユーザー登録＆サインインを試してみる
• AWS Cognito User Pools のサインアップ時に NotAuthorizedException が出る (JavaScript)
• UnityでCognito UserPoolsを使ってサインアップ・サインインを実現する
• チュートリアル: ユーザープールの作成