【Identity Platform 活用】② OIDC & SAML プロバイダを登録する 〜LINEログインの実現方法を例に〜

1. はじめに

こんにちは、クラウドエース第三開発部の秋庭です。
今回は Identity Platform の活用方法として、OIDC と SAML プロバイダの登録についてご紹介できればと思います。

前回の記事はこちらになります。
https://zenn.dev/cloud_ace/articles/6d8d1502d3c90f

ユーザー認証において、OIDC や SAML を利用した IP プロバイダでのログイン提供はサービスの UX の向上に欠かせません。
本記事では、Identity Platform において、OIDC および SAML を使用するプロバイダを登録する方法、注意点について解説します。

以下の点については今回の記事で取り扱いませんので、ご了承ください。

• Identity Platform 自体の紹介
• Identity Platform と Firebase Authentication の詳細な比較
  • 以下のページをご確認ください
    Identity Platform と Firebase Authentication の違い  |  Identity Platform Documentation  |  Google Cloud

2. 用語

以下に今回の記事で扱う、用語について記載します。

• OIDC (OpenID Connect)
  • OAuth 2.0 を基盤とした認証プロトコルです。
  • Google や GitHub といった用意されたプロバイダでのログインは Firebase Authentication でも利用可能です。
    今回は Identity Platform で利用できるようになる、用意されていない OIDC プロバイダの設定方法について紹介します。
• SAML (Security Assertion Markup Language)
  • XML ベースの標準プロトコルで、主にエンタープライズ環境での SSO に利用されます。IdP (アイデンティティプロバイダ) と SP (サービスプロバイダ) 間でアサーション (認証情報やユーザー属性情報) を交換することで、ユーザー認証を行います。
• IdP (アイデンティティプロバイダ)
  • SAML 認証において、ユーザー情報の管理と認証を行っているサービス。
  • Active Directory、Keycloak、Okta などがあります。
• SP (サービスプロバイダ)
  • SAML 認証において、IdP での認証情報を元にユーザーをアプリケーションにログインさせるサービス。
  • 本記事では、Identity Platform を指します。

3. OIDC プロバイダの設定方法

今回は LINE を例に使用して、OIDC プロバイダの登録について説明します。
LINE Developers コンソールより、プロバイダとチャネルを既に作成済みの状態から開始します。

参考
・ウェブアプリに LINE ログインを組み込む | LINE Developers
・OIDC を使用したユーザーのログイン  |  Identity Platform Documentation  |  Google Cloud

1. ID プロバイダの追加

「プロバイダ」から「プロバイダを追加」を選択します。
特定のテナントに追加したい場合は、先にテナントを選択します。

2. プロバイダ情報の入力

LINE の場合、以下のように LINE のチャネル情報を入力します。

3. コールバック URL の設定

プロバイダ構成情報のコールバック URL を「チャネル基本設定」の隣にある「LINE ログイン設定」のコールバック URL に指定します。
「ウェブアプリで LINE ログインを利用する」が ON になっていることを確認します。

アプリケーションとの統合

公式ドキュメントを元に、フロントエンドでの実装を確認します。

参考
・OAuth によるユーザーのログイン  |  Identity Platform Documentation  |  Google Cloud

1. OAuthProvider インスタンスの作成

OAuthProvider インスタンスを作成します。
ここで引数に取る providerId は、OIDC プロバイダ構成に記載されている「プロバイダ ID」となります。

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.line");

2. ログインフローの開始

ポップアップ、またはリダイレクトを選択してログインフローを構成できます。
ログインボタン押下時などに以下のフローが実行されるように構成します。

import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    const credential = OAuthProvider.credentialFromResult(result);
    // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = OAuthProvider.credentialFromError(error);
    // Handle / display error.
    // ...
  });

3. 動作確認

設置したログインボタンから、ログインフローを開始します。

LINE のログイン画面に遷移し、LINE へのログインを行います。

ログイン後の画面に遷移します。

ログイン後の画面では Identity Platform のユーザー ID と、プロバイダーのユーザー ID (今回の場合は LINE)を確認できるように表示しています。

LINE Developers のチャネル基本設定に記載されている「あなたのユーザー ID」とプロバイダーのユーザー ID が一致していれば、OIDC でのログインは成功です。

4. SAML プロバイダの設定方法

今回は、KEYCLOAK を SAML の IdP として使用し、SAML プロバイダの登録について説明します。

KEYCLOAK は新規 realm を作成し、realm 内に新たなユーザーを追加した状態からスタートします。

1. Client の追加

「Client」タブより新規追加します。
Client type で SAML を選択し、「Client ID」を入力します。

2. Login settings の入力

Login settings を入力します。
「Valid redirect URIs」に、OIDC と同様にコールバック URL を指定し、アプリケーションの URL も入力します。

3. 追加の設定

作成した Client を「Client」タブより再度開き、追加の設定をします。

4. プロバイダ情報の入力

KEYCLOAK の 「Realm settings」タブの最下段より、「SAML 2.0 Identity Provider Metadata 」を押下すると設定した SAML の内容が XML で表示されます。
内容を元に Identity Platform 側に入力します。

OIDC と同様、「プロバイダを追加」を選択し、SAML を選びます。

アプリケーションとの統合

公式ドキュメントを元に、フロントエンドでの実装を確認します。要領は OIDC と同じです。

参考
・ウェブアプリで SAML を使用して認証する  |  Firebase

1. SAMLAuthProvider インスタンスの作成

SAMLAuthProvider インスタンスを作成します。
ここで引数に取る providerId は、SAML プロバイダ構成に記載されている「プロバイダ ID」となります。

import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider("saml.example-provider");

2. ログインフローの開始

OIDC 同様ポップアップ、またはリダイレクトを選択してログインフローを構成できます。
ログインボタン押下時などにフローが実行されるように構成します。

3. 動作確認

設置したログインボタンから、ログインフローを開始します。

KEYCLOAK のログイン画面に遷移し、realm 内で作成済のユーザーで KEYCLOAK へのログインを行います。

OIDC 同様、ログイン後の画面では Identity Platform のユーザー ID と、プロバイダのユーザー ID を確認できるように表示しています。
今回は「SAML capabilities」の「Name ID format」で email を選択したので、プロバイダのユーザー ID としてメールアドレスが連携されました。

5. OIDC SAML ログインでの注意点

意図しないログイン方法の露出

一例として、toB のサービスに Identity Platform を組み込み、SSO の方法として企業ごとの Active Directory に対応する場合を考えます。
プロジェクト直下、または一つのテナントに複数の企業のプロバイダ設定を置いた場合、ある企業のユーザーが他の企業のログイン方法などを意図せず知り得てしまう可能性があります。
企業ごとに SSO の設定が必要な場合、テナントごとに企業のログイン方法の管理を行うことが推奨されます。

IdP-Initiated 非対応

Identity Platform の SAML 認証は SP-Initiated のみ対応しており、IdP-Initiated のフローには対応していません。

参考
・SAML を使用したユーザーのログイン  |  Identity Platform Documentation  |  Google Cloud

シングルログアウト (SLO) 非対応

Identity Platform の SAML 認証は、シングルログアウトに対応していません。

6. まとめ

OIDC と SAML が Identity Platform で使用できることによって LINE や Active Directory に対応できるようになり、カバーできるプロバイダが広がったことが確認できました。
また、実装が簡単で導入しやすい点もメリットだと思います。

この記事が、IDaaS 導入の際の検討の一助になれば幸いです。
ここまで読んで頂き、ありがとうございました。