Single Sign-On（SSO）の簡単なガイド

Single Sign-Onとは？

フロントエンドのSingle Sign-On（SSO）は、ユーザー認証および認可技術であり、ユーザーが1組の資格情報を使用して複数のアプリケーションまたはWebサイトにログインできるようにするもので、再入力や再登録は不要です。このアプローチは、ユーザーエクスペリエンスを向上させ、メンテナンスコストを削減し、セキュリティを強化します。

Single Sign-Onソリューションの概要と実装

フロントエンドSSOの主なアプローチには、以下が含まれます。

CookieベースのSSO

Page Aの認証センターへのログインに成功すると、Cookieが設定されます。これは最も一般的なSSOの実装です。原理は、ブラウザのCookieメカニズムに依存しています。ユーザーが初めてアプリケーションにログインすると、リクエストが認証センターに送信されます。ユーザーのIDを確認した後、認証センターはユーザー情報と有効期限を含む暗号化されたCookieを返します。Cookieのドメインは、トップレベルドメイン（例：example.com）に設定され、同じトップレベルドメイン下のアプリケーション（例：a.example.comおよびb.example.com）で共有できます。ユーザーが他のアプリケーションにアクセスすると、有効なCookieがあるかどうかを確認します。存在する場合は、直接ログインします。存在しない場合は、ユーザーはログインのために認証センターにリダイレクトされます。この方法は実装が簡単ですが、同じトップレベルドメイン下のアプリケーションに限定され、クロスドメインの問題があり、Cookieのサイズと数に制限があります。

Page Aでのログイン成功後にCookieを設定する例：

// 暗号化されたCookie値を生成
const encryptedValue = encrypt(userinfo);

// Cookieを設定
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Page BでCookieを確認する例：

// Cookieを取得
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Cookieを復号化
const userinfo = decrypt(cookieValue);

// 直接ログイン
login(userinfo);

トークンベースのSSO

これは、ステートレスなSSOの実装です。原理は、ユーザーが最初にログインするときに認証センターにリクエストを送信することです。ユーザーのIDを確認した後、認証センターはユーザー情報と有効期限を含む暗号化されたトークンを返し、ブラウザのローカルストレージ（例：localStorageまたはsessionStorage）に保存されます。ユーザーが他のアプリケーションにアクセスすると、有効なトークンがあるかどうかを確認します。存在する場合は、直接ログインします。存在しない場合は、ユーザーはログインのために認証センターにリダイレクトされます。この方法は、クロスドメイン操作をサポートし、Cookieによる制限はありませんが、追加のストレージスペースとネットワークオーバーヘッドが必要です。また、盗まれたトークンがIDの不正使用につながる可能性があるため、セキュリティリスクも伴います。

Page Aでのログイン成功後にlocalStorageにトークンを保存する例：

// トークン値を生成
const token = generateToken(userinfo);

// トークンを保存
localStorage.setItem('sso_token', token);

他のページでトークンを確認する例：

// トークンを取得
const token = localStorage.getItem('sso_token');

// トークンを検証
const userinfo = verifyToken(token);

// 直接ログイン
login(userinfo);

OAuth 2.0ベースのSSO

このアプローチでは、OAuth 2.0のAuthorization Codeフローを使用します。ユーザーが初めてアプリケーションにログインすると、リクエストが認証センターに送信されます。ユーザーのIDを確認した後、認証センターは認証コードを返し、アプリケーションのコールバックURLにリダイレクトします。次に、アプリケーションはコードを認証センターに送信して、ユーザー情報と有効期限を含むアクセストークンとリフレッシュトークンと交換します。これらのトークンは、ブラウザのローカルストレージに保存されます。ユーザーが他のアプリケーションにアクセスすると、有効なアクセストークンがあるかどうかを確認します。存在する場合は、直接ログインします。存在しない場合は、ユーザーはログインのために認証センターにリダイレクトされます。この方法は、OAuth 2.0標準に準拠しており、複数のクライアントタイプ（例：Web、モバイル、デスクトップ）をサポートします。ただし、より複雑であり、複数のリクエストとリダイレクトが必要です。

Page Aで認証リクエストを送信する例：

const authorizeUrl = `https://auth.example.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&response_type=code`;

// 認証ログインページにリダイレクト
window.location.href = authorizeUrl;

ログイン成功後に認証コード付きでPage AのコールバックURLにリダイレクトする例：

const redirectUri = 'https://app.example.com/callback';

// 認証コードを生成
const code = generateAuthorizationCode(userinfo);

// アプリケーションのコールバックURLにリダイレクト
window.location.href = `${redirectUri}?code=${code}`;

Page Aで認証コードをアクセストークンと交換する例：

const code = getQueryString('code');

// 認証センターにリクエストを送信してアクセストークンを取得
const tokenUrl = `https://auth.example.com/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}&grant_type=authorization_code`;

fetch(tokenUrl)
  .then((response) => response.json())
  .then((data) => {
    // アクセストークンとリフレッシュトークンを保存
    localStorage.setItem('access_token', data.access_token);
    localStorage.setItem('refresh_token', data.refresh_token);

    // 直接ログイン
    login(data.userinfo);
  });