今回は、ドキュメントをちゃんと読まなかった自戒を込めてブログの作成を行いました。公式ドキュメントは舐めるように読む必要があります。だって公式のドキュメントには大体記載があるんですもん。認証・認可をフロントで実装した場合は、フロントからアクセストークンを付与して上げねばならない！！
ご挨拶
ども！最近はフロントだけでなく、バックエンドの勉強もやっている龍ちゃんです。今年はフロントエンドの年でした。来年はうまくいっていればバックエンドの年になる予定です。
ちなみに今回は、「Azure AD B2C 」を用いてReact（SPA）で認証・認可を実装したいときに起きた問題なので、がっつりフロントエンドの話題になります。それでは本題に入っていきます。
「msal-react」を利用してアクセストークンを取得した際に、アクセストークンで空文字が返答されるときの対処法について話していきます。Azure AD B2C を利用してOpen ID Connectによるサインインをすると仮定します。
対応としては、以下の二点になります。
- 認証・認可の際にスコープとして「クライアントID」を渡す
- 「アプリケーションの登録」で「APIの公開」と「APIのアクセス許可」でスコープを作成する
それでは対応について書いていきます。
認証・認可の際にスコープとして「クライアントID」を渡す
こちらは、すぐ効果を確認することができます。設定方法としては、コードレベルでの修正であるためすぐ動きます。ちゃんと公式のリファレンスに書いてありました。Open ID Connectの場合は、クライアントIDをスコープとして渡すことでアクセストークンの取得を行うことができます。
自前のスコープを作成する
こちらは、設定の反映まで若干の時間を要します。設定方法としては、「Azure Portal」側での設定後、コードレベルでの修正が必要になります。設定したがアクセストークンが取得できない場合は、設定が間違っているか反映中なので落ち着いて対処しましょう。公式ページにもしっかりと記載があります。それでは、解説を始めていきましょう。
まずはアプリの登録画面から「APIの公開」をクリックしましょう。
スコープの追加というボタンをクリックしましょう。
適当に埋めたら「スコープの追加」です。ここで付けたスコープ名は後で検索に用いるので、わかりやすい名前が良いと思います。テキトーに埋めたら恥ずかしいので、適当にお願いします。
次に「APIのアクセス許可」という部分に飛びましょう。ここで「アクセス許可の追加」という部分をクリックしてください。
先ほど追加したスコープを検索して追加しましょう。「所属する組織で使用しているAPI」から検索すると大変楽です。
追加したら、下記の部分の「管理者の同意を与えます」をクリックします。右側の状態にチェックマークがついていれば成功です。
実際には、プロジェクトの要件によってスコープを正しくとる必要があります。この辺はご注意ください。これでスコープの設定は終了になります。
追加したスコープをクリックすると、スコープのURLが発行されています。こちらを認証・認可時に送信すると、アクセストークンが払い出されていると思います。
以降は、僕がミスした点です。
設定直後は、アクセストークンが発行されていませんでした。キャッシュが悪さをしていたのか、反映に時間がかかるのかはわかりませんが、設定後もうまく取れない場合は一度アプリを落としたりしてみると良いかもしれません。
あとは思い切って待機ですね。
終わりに
今回は、ドキュメントをちゃんと読んでいなかったせいで起きた問題なので、全面的に僕が悪い問題となっています。
というか認証としては使っていたのですが、認可として使用するとなって初めてアクセストークンを欲した話になります。その辺は、「フロントとバックエンドの接続時にアクセストークンを使用してセキュアに運用する」こちらで触れています。
ミスを発見して、勉強して、新しいミスを見つけるの繰り返しです。
頑張りましょう….. ではまた～
