リダイレクトでAzureAD B2C認証ページに移行する【React】

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

今回は、ReactでAzure AD B2Cを用いた認証ルーティングを行いたいときのサンプルを用意していきます。ライブラリを使用することで簡素なコードで高機能な認証ルーティングを作ることができます。Reactで使いたいときは、「msal-react」一択ですね。皆さんAzure AD B2Cを用いた認証をやってみよう

どもども！今週は、バグ対応に追われている龍ちゃんです。大半のバグは自分の確認ミスであるというところが痛いところです。先週は、メンタルがやられていたことが原因のバグだったのですが、今週見つけたところはイケイケな時に書いたコードであるので言い訳ができません。反省です。

さて、上司のありがたいお言葉を戒めを込めておいておこうと思います。

今日のチームの定例でも、別の上司から似たような言葉をいただきました。同じ失敗を繰り返し起こさなければOKとのことでしたので、これからも小さなミスをしれっとしてばれないうちに直すという小技を繰り出していきたいと思います。

さて、本題のほうに入っていきます。今回は「Azure AD B2C」で認証を行いたいときのお話になります。想定するシナリオとしては「認証済みのページにアクセスしたら、自動で認証ページを開きたい」というものになります。「Azure AD B2C」の構築に関しては前回記事の取り扱いになります。

Azure AD B2C 認証ページを作ってみる【React】

ちなみにライブラリを使わずに自力で実装しようとした例がありますので、併せて読んでもらえると処理の流れが追いやすいかもしれません。

今回取り扱う内容としては「MsalAuthenticationTemplate」の内容となります。ぬるっと本題に入っていきましょう。といいつつ、公式ドキュメントにしっかりと書いてある内容なので、ちゃんと読んだ人からすれば「何を言っているんだ」という焼き増し内容になりますので優しい目で見てください。

1 実装したい形
2 コード
3 おわりに

実装したい形

先に実現したい形を図で表現していきます。今回実現したい形は、「認証ページにアクセスしたら自動でログインページにリダイレクトして認証したら認証ページに入ってくる」というのものになります。

事前準備は以下の記事を読んで用意をしてみてください。

準備は済んでいる前提でコードの使い方のみを紹介していきます。ライブラリのGitHubにも書いてあるのですが、ここにたどりつくまで多大な時間を要してしまったので、ブログのほうで紹介しています。

コード

ソースコードはこちらになります。MsalAuthenticationTemplateを使うことで認証が通っていなければ自動で認証ページに誘導されます。

import { LoadingComponent } from "utilities/LoadingComponent";

type Props = {
  component: React.ReactNode;
};

const ErrorPage = () => {
  return <>認証時にエラーが発生しました</>;
};

export const RouterHasAuthenticated = (props: Props) => {
  const { component } = props;

  return (
    <>
      <MsalAuthenticationTemplate
        interactionType={InteractionType.Redirect}
        errorComponent={ErrorPage}
        loadingComponent={LoadingComponent}
      >
        {component}
      </MsalAuthenticationTemplate>
    </>
  );
};

interactionTypeでリダイレクトを指定することでリダイレクトで認証処理が走ります。ここでポップアップを指定することでポップアップで認証処理が走ります。

errorComponentでは認証中に問題が生じた場合、ここで指定したコンポーネントに画面を差し替えることができます。

loadingComponentでは認証判定中のあいまいな状態の時に画面を差し替えることができます。自力で作成しようとすると、認証判定とライブラリの状態によってあいまいな状態が登場します。そのあたりをうまいことやってくれます。

あいまいな状態と表現していますが、ライブラリの状態判定inProgressと認証状態を取得するHookuseIsAuthenticatedで取得した認証状態の判定タイミングによってダブルで認証処理が走るという状態です。useEffectを使用して、自動リダイレクトを自前実装した場合になりますので、ライブラリを使用することを強くお勧めします。

また、authenticationRequestを設定することで、認証後特定のページに飛ばしたいといった要望も実現することができます。ここの設定内容としては、こちらのページが参考になりますがめっちゃ大変なんで頑張って読みましょう。

おわりに

お疲れ様です。今回は「公式のドキュメントはしっかり読めの会」でしたね。勢いで実装していると問題が出てきたりします。公開前に情報を修正することができたので、本当に良かったです。ライブラリを使うときは、一度じっくり読んでみることが大切ですね。といいつつじっくりと三度ほど読んだはずなので、全然参考になりませんね。なので、身近にそれを使っている人を用意することが大切だと思います。レビューって本当に大切なんだなと思います。

最近ブログの投稿頻度が下がってきているので、時間の使い方を見直す時が来ていますね。心も体も回復してきたので、投稿数100まで頑張っていきます！ではでは！！

またね～