お疲れ様です。NBAで1962年にとあるバスケ選手が1試合で100点を取り、2024年の同日に通算40000得点を達成した選手が生まれて運命を感じた宮﨑です。
今回はB2Cを使用してユーザーフローを作成します。B2Cの内容についてはこちらを参考にしてみてください。
B2Cの構成
Azure Active Directory B2Cを作成する
Azureポータルよりリソースの作成を選択し、検索窓にAzure Active Directory B2Cを入力します。検索結果よりB2Cを選択します。
作成を選択します。
新しいAzure AD B2C テナントを作成するを選択します。
必要事項を埋めていきます。地域によってはデータを自動的に格納してくれる機能を追加出来ますが、今回は使用しません。
確認が完了したら作成を選択します。
作成が完了しました。移動してみます。
概要を確認するとやるべき手順が表示されているので、やってみましょう。
アプリケーションの登録
※チュートリアルがあるのでそちらを参考にしつつ作成してみます。
チュートリアル:Azure Active Directory B2C に Web アプリケーションを登録する
管理メニューからアプリの登録、新規登録を選択します。
必要事項を入力し、最後に登録を選択します。名前やURLについてはチュートリアルの表記をそのまま使用します。
アプリが作成されました。
ユーザーフローの作成
メニューからユーザーフロー、新しいユーザーフローを選択します。
サインアップとサインイン、推奨を選択して作成します。
名前を入力、ロールアカウントのEメールサインアップにチェックします。多要素認証は今回はオフにします。
ユーザー属性とトークン要求の詳細を表示を選択して、サインアップ時の要求と属性を選択します。今回は国/地域、表示名、郵便番号にします。最後に作成を選択します。
作成が完了しました。動作を確認してみましょう。
ユーザーフローの動作確認
ユーザーフローを実行しますを選択します。
画面右側にポップアップ画面が出るので、ユーザーフローを実行しますを選択します。
認証画面が表示されるのでSign up nowを選択します。
必要な情報を入力して、Createを選択します。
jwt.msにリダイレクトされて、サインアップ時に入力したトークンをテキスト形式に戻した情報が表示されて…いないですね。
どうやらアプリの認証メニューでアクセストークン、IDトークンの設定にチェックを入れないといけないみたいです（バージョンで仕様が変わったらしい）。
再度サインアップしてみると…無事に成功しました。
まとめ
ユーザーフローを使用することでユーザーがサインインなどする際、アプリとどのように対話するかを決めることが出来ます。今後は他のSNSでサインイン出来るよう自主学習を進めます。最後まで読んでいただきありがとうございました。