ことの発端

案件が入る度に、毎度の認証関連を何にしようか悩んだりする。
昔は ASP.NET だったら Entity Framework でお手軽に認証作れたけど、最近ウチの開発では node.js + Typescript が主流になってきて、更に Azure Functions を使っていると、何だか定番的なものが見つからなかった。

でも、よくよく考えたら Azure に Active Directory があるから、「これで良くね？」という説もあったのだけど、その昔、自治体の認証周りで Active Directory 使っていて、とにかく規模が大きい認証エコシステムで、お手軽感がゼロだったので、手を出さずにいたのですが、ここ数年 Azure Active Directory B2C なるものが登場して、SNS認証がお手軽にできるっぽいので、採用してみようと思ったのでした。

どうしよう？

Azure Active Directory B2C （以降 Azure AD B2C ）を採用しようと思ったのは良いけど、どうやって認証と認可を実装するか悩む訳です。
で、やりたいことを整理すると、話は簡単で、これだけ。

JAMスタックでフロントエンドで認証してトークンを取得
API は Azure Functions
API はトークンを検証

と、この構成なら Azure Functions なら Azure API Management という素晴らしいソリューションがあります。これを使えば、 API の実装で認証や認可のロジックを実装する必要が無いので、すげ～楽チンです。
しかし、お値段はそれなりに高額でして、2021/05/08現在で、エントリである Basicプランで 16,482.82円/月、開発用の Developerプランでも 5,379.81円/月ということで、案件の規模が大きくなっってからの採用で良いかな～と。
そして、Azure API Management はローカルインスタンスで確認ができない（なので Developerプランがある）のでウチらみたいな ~~行き当たらりばったりの開発~~ アジャイル開発だと厳しい。

ということで、なるべくお金と手間を省いて、お手軽に認証できる環境を作ろうと模索したのですが、 Azure AD B2C は進化過程で、更に Azure Portal も依然として進化しているので、先人方の記事は残念ながら参考にならず、本家の microsoft のサイトでも機械翻訳で意味不明なので、現状でまとめてみようかと。

やることリスト

やり方を探していると時間がかかりますが、整理すると、そんなに手数が多くないように思います。

リソースグループの作成をお忘れなく

Azure AD B2C のテナント作成時に新規で リソースグループ を作成できる筈なのですが、どうにもエラーになってしまいます。（2021/05/08 現在）
なので、 Azure AD B2C のテナント作成前に リソースグループ を作成してください。
（まぁ、大概は最初に リソースグループ を作るので、 Azure AD B2C を作るついでに リソースグループ を作ろうなんて稀じゃないかな）

Azure Active Directory B2C のテナント作成

実は、Azure のサブスクリプションを作成すると、何もしなくても Azure AD B2C のテナントが作成されています。しかし、案件ベースでユーザ管理することが殆どでしょうから、今回は新たに、テナントを追加するところから始めます。

ホーム画面から リソースの作成 をクリックします。
検索ボックスに Azure Active Directory B2C と入力します。（ Azure AD B2C では表示されない。。。）
検索ボックスの下に候補が出てきたら Enter キーを押下します。
作成 をクリックします。
新しい Azure AD B2C テナントを作成する をクリックします。
全ての項目を入力して 確認および作成 をクリックします。
確認および作成 画面で 作成 をクリックします。

２～３分でテナントが作成されます。

`ディレクトリの切り替え` を簡単にするための準備

今回作成した hogehoge campaign という テナント を作成しましたが、同時に hogehoge campaign という同名の ディレクトリ も作成されます。
そして、Azure の機能は サブスクリプション や ディレクトリ に紐づいています。
更に、 Azure Portal では、現在の ディレクトリ を切り替えて作業をすることになります。
やっていると分かるのですが、ホーム画面が ディレクトリ 毎に異なるので、結構混乱するポイントだったりします。
現在の ディレクトリ は画面右上に表示されているので、確認してくださいね。

と云うことで、その ディレクトリの切り替え を楽にするための設定を行います。

画面の上部にある ディレクトリ + サブスクリプション をクリックします。
ポップアップが表示されます。
すべてのディレクトリ をクリックして、先ほど作ったテナントの ★ をクリックします。

これで、ディレクトリ間の移動が楽になります。

Azure AD B2C の画面を表示

簡単にできそうで、ハマると訳が分からなくなるので、敢えて説明しておきます。

現在、 `hogehoge campaign` 以外のディレクトリで作業している場合

先ほどの画面上部の ディレクトリ + サブスクリプション から hogehoge campaign を選択します。
すると、いきなり Azure AD B2C が表示されます。

現在、 `hogehoge campaign` ディレクトリで作業している場合

たまに、ホーム画面を表示すると「 Azure AD B2C はどこだ？」ってなるんですよね。（苦笑）

すべてのサービス 画面を表示します。
検索ボックスに Azure AD B2C と入力します。（ B2C でも良いかも。ちなみに、ここは AD でして、 Active Directory では検索で出てきません。この文言ブレは何とかならんかのぉ。。。）
検索に表示された Azure AD B2C をクリックします。
はれて Azure AD B2C とご対面できましたので、ダッシュボードにピン留めした方が良いです。

ちなみに、失敗ケース

ホーム画面を表示します。（ すべてのリソース を表示しても同様です）
赤丸の 表示 をクリックします。
表示されるものは Azure Active Directory で Azure AD B2C ではありません。（苦笑）

ここから Azure AD B2C を表示する方法がどうにも見つからない。
これ、他のインスタンスと調整していると、かなりイライラポイントなんですよね

アプリの登録

hogehoge campaign の Azure AD B2C の画面を頑張って表示させます。
アプリの登録 をクリックして、 新規登録 をクリックします。
名前 は任意でOKです。
サポートされているアカウントの種類 は 任意の ID プロバイダーまたは組織ディレクトリ内のアカウント (ユーザーフローを使用したユーザーの認証用) を選択します。
リダイレクト URI (推奨) は シングルアプリケーション(SPA) を選択します。その隣の URI の入力はせず、空白のままでOKです。
アクセス許可 は openid と offline_access アクセス許可に対して管理者の同意を付与します にチェックしてください。
登録ボタン をクリックします。
アプリの概要が表示されますので 統合アシスタント をクリックします。
お客様がビルドしているアプリケーションの種類 は 単一ページのアプリ(SPA) を選択します。
このアプリケーションが API を呼び出すかどうか は はい を選択します。
アプリの登録を評価する をクリックします。
１件「操作が必要」という表示になっていますが、先ほどの リダイレクト URI (推奨) で URI の入力を空白のままにしているからなので、他が「完了」であればOKです。

ユーザーフローの作成

再び、 hogehoge campaign の Azure AD B2C の画面を頑張って表示させます。
ユーザーフロー をクリックして、 新しいユーザーフロー をクリックします。
サインアップとサインイン をクリックすると、下に バージョン が表示されるので 推奨 をクリックして選択します。
作成 をクリックします。
名前 は SIGNUP_SIGNIN とします。（何でも良いですが、分かりやすい名称にしておきましょう）
ラジオボタンは赤丸のとおりです。
詳細を表示... をクリックします。
「作成」画面が表示されるので、IDプロバイダー はチェックが必須ですが、それ以外は任意ですが今回は赤丸の箇所にチェックをしてみます。
OK をクリックします。
最後に 作成 をクリックします。

ちなみに、今作成した B2C_1_SIGNUP_SIGNIN で ユーザーフローを実行します というテスト機能がありますが、 SPA の場合動作しませんが気にしないで大丈夫です。

お疲れさまでした

今回は、ここまでとします。
最後のユーザーフローがテストができなくて残念ですが、コードを書けば動きますので、もう少しの我慢です。

あとは API の設定を済ませれば、ローカルで色々と実装したり、検証したりできます。

次回は、APIの設定、フロントエンド側でユーザ登録、サインイン、トークンを含めた API の呼び出しの説明します。