Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Autenticação Segura com Microsoft Entra ID para desenvolvedores Typescript

2025年09月24日に「Dev.to」が公開したITニュース「Autenticação Segura com Microsoft Entra ID para desenvolvedores Typescript」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

モダンなWebアプリで安全なアクセス制御を実現するため、Next.js(フロントエンド)とNode.js/TypeScript(バックエンド)を連携させる。Microsoft Entra IDで認証後、JWTトークンを発行し、バックエンドがこれを検証して保護されたAPIアクセスを許可する。具体的な設定手順とコード例を示す。

ITニュース解説

現代のウェブアプリケーションは、多くの場合、ユーザーが直接操作するフロントエンドと、ビジネスロジックや機密データを扱うバックエンドという二つの主要な部分から構成されている。このようなシステムにおいて、正当なユーザーのみが特定の情報や機能にアクセスできるようにすることは、セキュリティ上極めて重要だ。この記事では、Next.jsをフロントエンド、Node.jsとTypeScriptをバックエンドとして使い、Microsoft Entra ID(旧称Azure Active Directory)というクラウドベースのID管理サービスを組み合わせて、安全な認証システムを構築する方法について解説する。Microsoft Entra IDは、ユーザーの身元を確認し、アプリケーションがその確認結果を利用できるようにするための認証機能を提供する。

この認証システムの全体像は、次の5つの主要なステップで機能する。まず、ユーザーがNext.jsアプリケーションにアクセスし、ログインプロセスを開始する。次に、NextAuth.jsというNext.js向けの認証ライブラリが、ユーザーをMicrosoft Entra IDのログインページにリダイレクトする。ユーザーがEntra IDで認証を成功させると、Entra IDはIDトークンとアクセストークンという二種類の特別な情報(トークン)をNext.jsアプリケーションに返す。その後、Next.jsフロントエンドは、このアクセストークンをHTTPリクエストの「Authorization」ヘッダーに含めて、バックエンドに送信する。最後に、バックエンドは受け取ったアクセストークンが正当なものであるかを、Entra IDが提供する公開鍵情報(JWKS)と照らし合わせて検証する。もしトークンが有効であれば、バックエンドは保護されたリソースへのアクセスを許可し、無効または期限切れの場合は「401 Unauthorized」(認証されていない)というエラーを返す。

このシステムを構築するための最初の手順は、Microsoft Entra IDでの設定だ。Azure Portalにアクセスし、「Microsoft Entra ID」の「App registrations」メニューから新しいアプリケーションを登録する。登録時には「nextjs-auth-app」のようなアプリケーション名を指定し、特に重要なのが「Redirect URI」の設定だ。これは、ユーザーがEntra IDでの認証を完了した後、Entra IDがトークンを送信し、ユーザーをアプリケーションにリリダイレクトする先のURLを指定するもので、開発環境ではhttp://localhost:3000/api/auth/callbackと設定する。また、IDトークンとアクセストークンが発行されるように設定を有効にする必要がある。アプリケーションの登録が完了すると、「Application (client) ID」と「Directory (tenant) ID」という二つの識別子が得られる。さらに、「Certificates & secrets」のセクションで、アプリケーションがEntra IDと安全に通信するための「Client Secret」という秘密鍵を手動で作成する。これら三つの情報は、フロントエンドとバックエンドがEntra IDと連携するために必要不可欠な認証情報となるため、安全に保管しなければならない。

次に、Next.jsフロントエンドの実装に移る。ここでは、NextAuth.jsという認証ライブラリと@azure/msal-nodenpm installコマンドでインストールする。Entra IDから取得した「Application ID」「Client Secret」「Directory ID」は、.env.localファイルに環境変数として設定する。これは、機密情報をコードに直接記述せず、安全に管理するための一般的な方法だ。NEXTAUTH_URLはアプリケーションのURL、NEXTAUTH_SECRETはセッションを保護するためのランダムな文字列となる。NextAuthの設定ファイルでは、AzureADProviderを使ってMicrosoft Entra IDとの連携を設定する。clientIdclientSecrettenantIdに環境変数を割り当てることで、NextAuth.jsがEntra IDと適切に通信できるようになる。session: { strategy: "jwt" }と指定することで、セッション管理にJSON Web Token (JWT) を利用する。callbacksセクションでは、認証時にEntra IDから受け取ったアクセストークンをNextAuthのセッション情報に含めるように設定する。これにより、ログイン後のフロントエンドアプリケーションは、ユーザーのセッションからこのアクセストークンを簡単に取得できるようになる。

ユーザーがログインし、アクセストークンがセッションに保存されたら、フロントエンドはそのトークンを使って保護されたバックエンドAPIにアクセスできる。NextAuth.jsのuseSessionフックを利用してユーザーのセッション情報を取得し、セッションにaccessTokenが存在する場合にのみ、バックエンドAPI(例えばhttp://localhost:4000/api/secure-data)を呼び出す。この際、HTTPリクエストのheadersAuthorization: Bearer <アクセストークン>という形式でアクセストークンを含めるのが標準的な方法だ。バックエンドはこのヘッダーを受け取り、トークンを検証するプロセスを開始する。

バックエンドはExpressを使って構築し、jsonwebtokenjwks-rsaexpress-jwtといったライブラリを組み合わせてアクセストークンを検証する。jwks-rsaは、JSON Web Key Set (JWKS) エンドポイントからEntra IDの公開鍵を安全に取得するためのライブラリだ。JWT(JSON Web Token)は、情報を安全に送受信するためのコンパクトでURLセーフな方法を提供するオープン標準であり、アクセストークンとして使われることが多い。このトークンはデジタル署名されており、その署名を公開鍵で検証することで、トークンが改ざんされていないか、正規の発行者によって発行されたものであるかを確認できる。express-jwtは、ExpressアプリケーションでJWTの検証を行うためのミドルウェアを提供する。バックエンドの設定では、このexpress-jwtcheckJwtミドルウェアを定義する。このミドルウェアは、secretオプションでjwksRsa.expressJwtSecretを設定し、Entra IDのJWKSエンドポイントから公開鍵を動的に取得する。また、audienceにはEntra IDに登録したアプリケーションの「Application ID」、issuerにはEntra IDの「Directory ID」を含む発行者URLを設定し、これらの情報を使ってトークンが正しい受信者向けに、正しい発行者から発行されたものであるかを厳密に検証する。algorithms: ["RS256"]は、トークンの署名に使われた暗号化アルゴリズムを指定する。このように設定されたcheckJwtミドルウェアを、保護したいAPIルート(例えば/api/secure-data)に適用する。これにより、このルートへのリクエストは、まずcheckJwtミドルウェアによってアクセストークンの検証が行われ、有効なトークンを持つリクエストのみが、その先のルートハンドラーに到達し、保護されたデータへのアクセスを許可される。

アプリケーションをテストするには、まずバックエンドサーバーとフロントエンドサーバーをそれぞれ起動する。フロントエンドのURL(例: http://localhost:3000/protected)にアクセスし、ログインフローを実行すると、Microsoft Entra IDを経由して認証され、保護されたデータがバックエンドから正しく取得できることを確認できる。このシステムを運用する上での良い習慣として、Client Secretのような機密情報は、絶対にフロントエンドに公開せず、環境変数などを用いて安全に管理することが重要だ。NextAuth.jsが提供するJWTを利用したセッションは、通常、セキュアなHTTP Only Cookieとして管理されるため、安全性が高い。トークンの検証時には、audienceissuerを正しく設定し、トークンが意図したアプリケーション向けに、正規の発行者によって発行されたものであるかを厳しく確認することが不可欠だ。また、認証の失敗ログを詳細に記録する「Observability(可観測性)」も重要であり、セキュリティ監査や問題解決に役立つ。この認証パターンは、複数のバックエンドサービスが同じEntra IDからのトークンを検証する「マイクロサービス」のような、より大規模でスケーラブルなアーキテクチャにも容易に拡張できる柔軟性を持っている。

このアーキテクチャを導入することで、ユーザーの認証と機密データへのアクセス制御に関して、エンドツーエンドで堅牢なセキュリティフローを確立できる。Next.jsはユーザー認証とセッション管理を効率的に行い、Node.jsとTypeScriptで構築されたバックエンドは、Microsoft Entra IDが発行するトークンを厳密に検証することで、機密データへの不正アクセスを防止する。Microsoft Entra IDが中央集権的なID管理サービスとして機能することで、企業のセキュリティポリシーに準拠した強固な認証基盤を提供する。このモデルは、さらにMicrosoft Graph APIのような他のMicrosoftサービスとの連携や、より複雑なマイクロサービスアーキテクチャにも応用可能であり、現代のWebアプリケーション開発における安全な認証の標準的なアプローチを示している。

関連コンテンツ

関連IT用語