Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@terukazu(Terukazu Inoue)

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

Last updated at Posted at 2021-05-08

この記事は

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

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

hogehoge-auth アプリの設定

API の公開

  1. hogehoge-auth アプリの設定を表示します。
    image.png

  2. API の公開 をクリックして、 Scope の追加 をクリックします。
    image.png

  3. テキストフィールドに uuid が入力されていて、変更可能になっていますが、ここは何でも良いので、そのまま 保存してから続ける をクリックします。
    image.png

  4. スコープ名 を piyopiyo にします。

  5. 管理者の同意の表示名 と 管理者の同意の説明 は適当に入力しておきます。

  6. 状態 は 有効 に設定します。

  7. スコープの追加 をクリックします。

API のアクセス許可

  1. hogehoge-auth アプリの設定を表示します。
    image.png

  2. API のアクセス許可 をクリックして、 アクセス許可の追加 をクリックします。
    image.png

  3. 自分の API をクリックします。
    image.png

  4. hogehoge-auth をクリックします。
    image.png

  5. アクセス許可 に piyopiyo がいるので、チェックを入れます。

  6. アクセス許可の追加 をクリックします。
    image.png

  7. hogehoge campaign に管理者の同意を与えます をクリックします。
    image.png

  8. ダイアログが表示されるので はい をクリックします。
    image.png

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

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

  1. hogehoge-auth アプリの設定を表示します。
    image.png

  2. 認証 をクリックして、 プラットフォームを追加 をクリックします。
    image.png

  3. シングルページアプリケーション をクリックします。
    image.png

  4. 今回 Vue の serve で確認するので、 http://localhost:8080/ と入力します。

  5. 一番下のチェックボックスは２つともオフにします。

  6. 構成 をクリックします。
    image.png

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

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

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

アプリの情報

  1. hogehoge-auth アプリの設定を表示します。
    image.png

  2. アプリケーション (クライアント) ID をメモします。

  3. ディレクトリ (テナント) ID をメモします。
    image.png

  4. エンドポイント をクリックします。
    image.png

  5. 赤で囲った箇所を issuer domain としてメモします。

  6. 緑で囲った箇所を b2c domain としてメモします。
    image.png

  7. APIの公開 をクリックして、スコープの右のボタンをクリックして スコープ URI をメモします。

  8. スコープ名 (ここでは piyopiyo )をメモします。

ユーザーフローの情報

  1. hogehoge campaign の Azure AD B2C を表示します。
    image.png

  2. ユーザーフロー をクリックします。

  3. ユーザーフロー名 （ここでは 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 になっています。
ユーザー登録していただいても構いませんが、気まぐれで インスタンスを落とすかも知れません。

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

API

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

フロントエンド

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

まとめ

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

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

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

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?