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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!
https://column.api-ecosystem.sios.jp/connect/kong/1081/

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。SBOMを全く知らない人から、開発との統合までを紹介するので様々なレベルの方に学びがあるライブとなる予定です!
https://tech-lab.connpass.com/event/321422/

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!
https://tech-lab.connpass.com/event/319077/

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!
https://tech-lab.connpass.com/event/319532/

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

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

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

ミスは防げないので、ミスが起きないプロセスを踏むことが大切だね。by 上司

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

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

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

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

実装したい形

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

認証が必要なページに自動でリダイレクトを行う

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

準備は済んでいる前提でコードの使い方のみを紹介していきます。ライブラリの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まで頑張っていきます!ではでは!!

またね~

アバター画像
About 龍:Ryu 109 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる