OpenID ConnectでIIJ-ID認証を組み込む方法：Firebase Authenticationを使った実装ガイド

はじめに

お客様から IIJ-ID 認証でログインできるようにしたい というご要望があり、Firebase Authentication と OpenID Connect を使用して認証機能を実装しました。
OpenID Connect を利用することで、既存の IIJ-ID アカウントでスムーズにサービスにログインできるようになります。

本記事では、Firebase Authentication を使用した IIJ-ID との OpenID Connect 連携について、この対応を通じて得られた知見を備忘録としてまとめ、IIJ-ID 認証をシステムに組み込む際の手順と、お客様に対応いただく内容について詳しく説明します。

1. OpenID Connect を使用した IIJ-ID 認証に関する用語解説

IIJ-ID:
株式会社インターネットイニシアティブ（IIJ）が提供する認証基盤サービスです。
複数のサービスで共通のアカウントを利用できるシングルサインオン（SSO）機能を提供します。
https://manual.iij.jp/iid/admin-help/9053751.html

OpenID Connect (OIDC):
OAuth 2.0 を拡張した認証プロトコルです。
ユーザーの身元（ID）情報を安全にアプリケーションに提供する仕組みで、OAuth 2.0 が認可（特定のリソースへのアクセスを許可すること）に特化しているのに対し、OIDC は認証（ユーザーが誰であるかを確認すること）機能を追加しています。

Firebase Authentication:
Google が提供する認証サービスです。
OIDC をはじめ、様々な認証プロバイダーと連携し、アプリケーションへの認証機能の実装を簡素化します。
Firebase Authenticationと IIJ-ID を連携させます。
https://firebase.google.com/docs/auth?hl=ja

2. お客様に対応いただくこと

OpenID Connect を使用して IIJ-ID 認証を実装するには、お客様の IIJ-ID 管理画面にて、設定が必要です。
セットアップフローに従って以下の手順で進めます。

2.1. IIJ-ID カスタムアプリケーションの追加
OpenID Connect（OIDC）アプリケーションを追加していただきます。
この作業により、アプリケーションが IIJ-ID を認証プロバイダーとして利用できるようになります。
※カスタムアプリケーションを追加すると、以下の情報が自動的に発行されます。
※これらの情報は後工程のFirebase Authentication設定で必要になるため、必ずお客様側から開発者側に連携いただいてください。

クライアント ID : アプリケーションを一意に識別するためのID
クライアントシークレット : クライアントIDとペアになる秘密鍵
Discovery エンドポイント : OIDC の設定情報を取得するためのURL

2.2.アプリケーションの設定
アプリケーションの各種情報を設定します。
以下の情報を IIJ-ID アプリケーション設定に登録していただきます。
※開発者側は以下情報を共有します。

アプリケーションのトップページ URL: アプリケーションのログインページなど、ユーザーが最初にアクセスするURL
リダイレクト URL: 認証が成功した後に、IIJ-ID がユーザーをリダイレクトするURL

2.3. アプリケーション利用者の追加
IIJ-ID 管理画面にて、認証を利用するユーザーを追加してください。
これにより、特定のユーザーのみが OpenID Connect 認証を利用できるようになります。

2.4. その他の設定（OpenID Connect/SAMLのみ）
利用者であるユーザーのみ、アプリケーションへのログインを許可する設定です。

3. 対応手順

お客様からの情報と、開発者が用意する情報をもとに、実際の認証を実装する手順をまとめます。

3.1. お客様によるIIJ-IDカスタムアプリケーションの作成と情報取得
IIJ-ID カスタムアプリケーションをお客様に追加いただいた後、以下の情報を共有いただきます。
※この作業は「2.1. IIJ-ID カスタムアプリケーションの追加」に対応します。

クライアントID
クライアントシークレット
Discoveryエンドポイント

3.2. Firebase Authenticationの設定
お客様から共有いただいた上記情報を使用して、Firebase AuthenticationにカスタムOpenID Connect プロバイダーを設定します。
この設定が完了すると、アプリケーションから IIJ-ID 認証を呼び出す準備が整います。
以下の設定をするために、Firebase>Authenticationのログイン方法のページを開いてください。
※以下の設定画面は2025年8月時点の内容です。

以下の画像のように初期状態では、OpenID Connectを選択できないかと思います。
OpenID Connect認証を使用する際、Firebase Authentication with Identity Platformへのアップグレードが必要です。
画面のアップグレードを押下します。

アップグレードを押下すると、以下の確認画面に遷移します。
全て確認後「新しいAuthenticationにアップグレードする」を押下してください。
※アップグレードには料金が発生するため、お客様へ確認を行ってください。
参考➀
参考➁

上記のアップグレードが完了すると、OpenID Connectが選択できる状態になっているかと思います。
OpenID Connectを押下します。

OpenID Connectを押下後、以下の画面に遷移します。
画面右上が初期状態は無効になっているため「有効にする」に変更し、以下の情報を入力してください。
入力後「次へ」を押下してください。

プロバイダー名：任意（例：IIJ-ID）
クライアントID：お客様から提供された値
クライアントシークレット：お客様から提供された値
発行者URL：Discoveryエンドポイントから取得（https://www.auth.iij.jp/op）

「次へ」を押下すると、以下の画面が表示されます。
※「新しいOIDCプロバイダを定義します」の下部には、前画面で入力した内容が表示されます。今回はtestとしています。
※コールバックURLの黒で伏せている部分は、PROJECT_IDが表示されます。
※コールバックURLは、お客様へ共有が必要なリダイレクト URLです。

問題ない場合は「保存」を押下します。
これでFirebase Authenticationの設定は完了です。

3.3. お客様への情報共有
Firebase Authentication設定完了後、以下の情報をお客様に共有します。
※Firebase Authenticationを使用する場合、リダイレクトURLは以下の固定形式となります。
※PROJECT_IDの部分は、実際のFirebaseプロジェクトIDに置き換えてください。

アプリケーションのトップページ URL: 例）https://your-app.web.app
リダイレクト URL: https://PROJECT_ID.firebaseapp.com/__/auth/handler

3.4. お客様によるIIJ-IDアプリケーション設定対応
3.3で共有した情報をもとに、以下の設定を完了していただきます。

アプリケーションの設定（2.2に対応）
アプリケーション利用者の追加（2.3に対応）
その他の設定（2.4に対応）

3.5. 認証処理の実装
Firebase Authenticationの設定完了後、次にフロントエンド側でFirebase SDKを使用した認証処理を実装します。
Firebase SDKを使用することで、複雑な認証フローを簡単に実装できます。
Firebase SDK を使用したログインフローの処理(公式)を参照ください。
※以下は実装例です。

import { OAuthProvider, signInWithPopup } from“firebase/auth”;
// IIJ-ID用のOAuthProviderを作成

const iijIdProvider = new OAuthProvider(‘<プロバイダーID>’);
// ログイン処理

const signInWithIijId = async () => {

  try {

    const result = await signInWithPopup(auth, iijIdProvider);

    const user = result.user;
    // ログイン成功後の処理

    router.push(“/chat”);

  } catch (error) {

    console.error(“認証エラー:”, error);

  }

};

※<プロバイダーID>はoidc.Firebase設定でつけたプロバイダー名で定義されます。

また上記とあわせ環境変数の設定も必要になります。
設定が必要な値は、Firebase Consoleの「プロジェクトの設定」から取得できます。

NEXT_PUBLIC_FIREBASE_PROJECT_ID=“”

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=“”

NEXT_PUBLIC_ALLOWED_DOMAINS=“”

終わりに

OpenID Connect を使用したIIJ-ID認証の実装では、お客様側でのIIJ-ID設定とFirebase側での適切な設定が重要です。
お客様との密な連携が必要となりますが、適切な手順を踏むことでスムーズに導入できます。

本記事がお役に立てれば幸いです。
今後も開発を通して得た学びをまとめたいと思います。最後までお読みいただきありがとうございました！