Azure Active Directory B2C のフロントエンドとAPIの実装

## この記事は

前の記事からの続きになります。

https://qiita.com/terukazu/items/7bd8cc27827c35d6c0b4

ここでは、Azure側残りの設定を実施した後、実装まで進めたいと思います。

## ```hogehoge-auth``` アプリの設定

### API の公開

1. ```hogehoge-auth``` アプリの設定を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/951c9027-86a8-0206-e090-a968646e8114.png)

1. ```API の公開``` をクリックして、 ```Scope の追加``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/ffb454e9-70fd-4b07-d6e1-a78e8b773009.png)

1. テキストフィールドに uuid が入力されていて、変更可能になっていますが、ここは何でも良いので、そのまま ```保存してから続ける``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/1cc8c127-2104-428c-24e3-4b5e856ad06c.png)

1. ```スコープ名``` を ```piyopiyo``` にします。
1. ```管理者の同意の表示名``` と ```管理者の同意の説明``` は適当に入力しておきます。
1. ```状態``` は ```有効``` に設定します。
1. ```スコープの追加``` をクリックします。

### API のアクセス許可

1. ```hogehoge-auth``` アプリの設定を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/6c96915f-d4b9-fef1-82be-cf65ff05aea0.png)

1. ```API のアクセス許可``` をクリックして、 ```アクセス許可の追加``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/7ccd0bad-5b21-dcec-1f9b-504bfeb33e49.png)

1. ```自分の API``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/8e476fe6-e7ca-5488-76de-88a325eea695.png)

1. ```hogehoge-auth``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/1ac47495-2004-e6a2-b3e8-8d895a47e058.png)

1. ```アクセス許可``` に ```piyopiyo``` がいるので、チェックを入れます。
1. ```アクセス許可の追加``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/2a0619c4-bf2f-cbb6-eadc-b0d61e068dcb.png)
1. ```hogehoge campaign に管理者の同意を与えます``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/808cd62d-5ea8-eaa5-bcc8-c248b69f127f.png)

1. ダイアログが表示されるので ```はい``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/c4aef74d-941e-5ff8-c186-79c5cb5fa65f.png)

1. これで、状態がグリーンになりました。

## 認証後のリダイレクト URI を設定

1. ```hogehoge-auth``` アプリの設定を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/93c92989-714a-d106-964a-aba6ac385d43.png)

1. ```認証``` をクリックして、 ```プラットフォームを追加``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/22ec7f36-c2f7-20ab-e76f-8cd8b8bbc39f.png)

1. ```シングルページアプリケーション``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/fa4e4cb9-50db-b0fd-1ba3-a0905423d26c.png)

1. 今回 Vue の serve で確認するので、 ```http://localhost:8080/``` と入力します。
1. 一番下のチェックボックスは２つともオフにします。
1. ```構成``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/eabef7b3-e799-9451-e918-a8e445e4af1d.png)

1. あとで、Storage などにデプロイしたら、この画面でリダイレクト URI を追加することができます。

## さぁ、情報を集めましょう！

設定はこれで終わりです。
これから、フロントエンドや API で必要な情報を収集します。

### アプリの情報

1. ```hogehoge-auth``` アプリの設定を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/dab7ea82-e627-ebcf-48e4-2ccf69b0fb33.png)

1. ```アプリケーション (クライアント) ID``` をメモします。
1. ```ディレクトリ (テナント) ID``` をメモします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/78c6cabc-2f8b-f9fa-fa1d-db468448254f.png)

1. ```エンドポイント``` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/385c5550-bc6f-06f0-d506-eb8dd118a1de.png)

1. 赤で囲った箇所を ```issuer domain``` としてメモします。
1. 緑で囲った箇所を ```b2c domain``` としてメモします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/517db140-f8b5-9074-b831-d4bd13654252.png)

1. ```APIの公開``` をクリックして、スコープの右のボタンをクリックして ```スコープ URI``` をメモします。
1. ```スコープ名``` (ここでは ```piyopiyo``` )をメモします。

### ユーザーフローの情報

1. ```hogehoge campaign``` の ```Azure AD B2C``` を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/a2c5a933-ff62-265c-ecfd-1d6bf96a29de.png)

1. ```ユーザーフロー``` をクリックします。
1. ```ユーザーフロー名``` （ここでは ```B2C_1_SIGNUP_SININ``` ）をメモします。

### 収集したもの一覧

|名称  |プログラムでの定義名  |今回設定した値  |
|---|---|---|
|アプリケーション (クライアント) ID | clientId |e3870b94-11e9-4d78-bdc3-9e822dc10a84  |
|ディレクトリ (テナント) ID | tenantId| 14c34ae7-a677-4c96-8475-5398ce5ef230　|
|issuer domain | issuerDomain| hogehogecampaign.b2clogin.com　|
|b2c domain | b2cDomain| hogehogecampaign.onmicrosoft.com　|
|スコープ URI| apiScopeUri| https://hogehogecampaign.onmicrosoft.com/e3870b94-11e9-4d78-bdc3-9e822dc10a84/piyopiyo |
|スコープ名| apiScopeName| piyopiyo |
|ユーザーフロー名| flowName| B2C_1_SIGNUP_SIGNIN　|


## 実装例

実際に動作するサンプルアプリを github で公開しました。
クローンすれば、そのまま動きます。

なお、認証は今回用意した ```hogehoge campaign``` になっています。
ユーザー登録していただいても構いませんが、気まぐれで インスタンスを落とすかも知れません。

その際は下記の記事でテナント作成からお試しくださいませ。

https://qiita.com/terukazu/items/7bd8cc27827c35d6c0b4

### API

https://github.com/CODIANZ/sample.azureadb2c.api

```passport``` を使用していますが、今回は ```Azure Functions``` を想定しているので、 ```express``` は使わずに実装をしています。
認証に失敗するとサーバエラー500を返却します。

### フロントエンド

https://github.com/CODIANZ/sample.azureadb2c.spa

サインイン、サインアウトを行い、どの状態でも API を呼び出すことができるので、トークン有無での API の挙動を確認できます。


## まとめ

手数が多いですが、覚えてしまえば大した量ではないと思います。
実際に運用するとなると

* ユーザに入力させる情報の精査
* ユーザ情報の編集のための flow 作成
* scope の精査
* 日本語化（設定でできます）
* ユーザ権限

くらいは面倒みないとダメですが、まずは認証が動くのを実感していただけたらなぁ～ということで記事にしてみました。
まぁ、偉そうに言ってますが、投稿者本人が忘れちゃうから記事にまとめただけですけどね。

認証は OAuth や OpenID が登場し、その後ユーザの利便性と安全性を向上させるために日々進化しているので、あっという間に浦島太郎状態になりまする。。。