Azure Active Directory B2C でテナントを作る

## ことの発端

案件が入る度に、毎度の認証関連を何にしようか悩んだりする。
昔は ```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プランがある）のでウチらみたいな <strike>行き当たらりばったりの開発</strike> アジャイル開発だと厳しい。

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

## やることリスト

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

1. [リソースグループ作成（既にあれば作成不要）](#リソースグループの作成をお忘れなく)
1. [テナント作成](#azure-active-directory-b2c-のテナント作成)
1. [アプリの登録](#アプリの登録)
1. [ユーザーフローの作成](#ユーザーフローの作成)
1. [API の公開](https://qiita.com/terukazu/items/698abe21c699ac36112f#api-%E3%81%AE%E5%85%AC%E9%96%8B)
1. [API のアクセス許可](https://qiita.com/terukazu/items/698abe21c699ac36112f#api-%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E8%A8%B1%E5%8F%AF)
1. [認証後のリダイレクト URI を設定](https://qiita.com/terukazu/items/698abe21c699ac36112f#%E8%AA%8D%E8%A8%BC%E5%BE%8C%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88-uri-%E3%82%92%E8%A8%AD%E5%AE%9A)
1. [情報収集](https://qiita.com/terukazu/items/698abe21c699ac36112f#%E3%81%95%E3%81%81%E6%83%85%E5%A0%B1%E3%82%92%E9%9B%86%E3%82%81%E3%81%BE%E3%81%97%E3%82%87%E3%81%86)
1. [実装しましょう](https://qiita.com/terukazu/items/698abe21c699ac36112f#%E5%AE%9F%E8%A3%85%E4%BE%8B)

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

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


## Azure Active Directory B2C のテナント作成

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

1. ホーム画面から ```リソースの作成``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/6efcfa63-282f-ad37-9f77-1a7080f69c25.png)

1. 検索ボックスに ```Azure Active Directory B2C``` と入力します。（ ```Azure AD B2C``` では表示されない。。。）
1. 検索ボックスの下に候補が出てきたら ```Enter``` キーを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/a50c47ae-28ec-2305-19cd-dcf7fd06d6b7.png)

1. ```作成``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/92f3e3b2-eb34-b6f8-353c-ab01a9719645.png)

1. ```新しい Azure AD B2C テナントを作成する``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/e20fc863-944b-50fc-cfd9-9207412adaf3.png)

1. 全ての項目を入力して ```確認および作成``` をクリックします。
1. ```確認および作成``` 画面で ```作成``` をクリックします。

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/4f750a6f-0549-0fd4-318f-786503941855.png)

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

1. 画面の上部にある ```ディレクトリ + サブスクリプション``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/c4023c5a-c5c4-44ea-1919-fb37022a583d.png)

1. ポップアップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/b6d78794-9151-93ad-3fd0-341f821b67c5.png)

1. ```すべてのディレクトリ``` をクリックして、先ほど作ったテナントの ```★``` をクリックします。

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

## Azure AD B2C の画面を表示

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


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

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


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

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

1. ```すべてのサービス``` 画面を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/38e8d0d0-c3d1-b095-6d0a-aa2ae0766112.png)

1. 検索ボックスに ```Azure AD B2C``` と入力します。（ ```B2C``` でも良いかも。ちなみに、ここは ```AD``` でして、 ```Active Directory``` では検索で出てきません。この文言ブレは何とかならんかのぉ。。。）
1. 検索に表示された ```Azure AD B2C``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/297b43c6-431f-ac78-dbe0-951bda7d9a0b.png)

1. はれて ```Azure AD B2C``` とご対面できましたので、ダッシュボードにピン留めした方が良いです。

#### ちなみに、失敗ケース

1. ホーム画面を表示します。（ ```すべてのリソース``` を表示しても同様です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/6caf96ec-1a76-a1e0-90b7-c68dd37149e6.png)
1. 赤丸の ```表示``` をクリックします。
1. 表示されるものは ```Azure Active Directory``` で ```Azure AD B2C``` ではありません。（苦笑）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/678c0692-7b30-cd54-b315-11840f8283c7.png)

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

## アプリの登録

1. ```hogehoge campaign``` の ```Azure AD B2C``` の画面を頑張って表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/7e32de3e-18eb-a336-9691-192f44c55b1d.png)

1. ```アプリの登録``` をクリックして、 ```新規登録``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/f2928d72-6d7b-77d2-8831-bc3ab7fc6ba5.png)

1. ```名前``` は任意でOKです。
1. ```サポートされているアカウントの種類``` は ```任意の ID プロバイダーまたは組織ディレクトリ内のアカウント (ユーザー フローを使用したユーザーの認証用)``` を選択します。
1. ```リダイレクト URI (推奨)``` は ```シングルアプリケーション(SPA)``` を選択します。 その隣の URI の入力はせず、空白のままでOKです。
1. ```アクセス許可``` は ```openid と offline_access アクセス許可に対して管理者の同意を付与します``` にチェックしてください。
1. ```登録ボタン``` をクリックします。
1. アプリの概要が表示されますので ```統合アシスタント``` をクリックします 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/48cd9c9d-bb2c-1723-c982-d1f84ca2eaac.png)
1. ```お客様がビルドしているアプリケーションの種類``` は ```単一ページのアプリ(SPA)``` を選択します。
1. ```このアプリケーションが API を呼び出すかどうか``` は ```はい``` を選択します。
1. ```アプリの登録を評価する``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/1ca4ff7c-8016-055a-79df-56474a7e78bb.png)

1. １件「操作が必要」という表示になっていますが、先ほどの ```リダイレクト URI (推奨)``` で URI の入力を空白のままにしているからなので、他が「完了」であればOKです。

## ユーザーフローの作成

1. 再び、 ```hogehoge campaign``` の ```Azure AD B2C``` の画面を頑張って表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/652bb243-396b-e93f-242c-411b5da2bcd1.png)

1. ```ユーザーフロー``` をクリックして、 ```新しいユーザーフロー``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/6172adc3-0fba-09b8-eafb-11469f724621.png)

1. ```サインアップとサインイン``` をクリックすると、下に ```バージョン``` が表示されるので ```推奨``` をクリックして選択します。
1. ```作成``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/3d5cc928-7630-b330-c82e-11d28a928c6f.png)

1. ```名前``` は ```SIGNUP_SIGNIN``` とします。（何でも良いですが、分かりやすい名称にしておきましょう）
1. ラジオボタンは赤丸のとおりです。
1. ```詳細を表示...``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/6a8f3fcc-974e-293d-2b18-d33dc85fc7a3.png)

1. 「作成」画面が表示されるので、```IDプロバイダー``` はチェックが必須ですが、それ以外は任意ですが今回は赤丸の箇所にチェックをしてみます。
1. ```OK``` をクリックします。
1. 最後に ```作成``` をクリックします。

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

## お疲れさまでした

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

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

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

https://qiita.com/terukazu/items/698abe21c699ac36112f