シングル サインオン (SSO) が簡単に

シングル サインオン (SSO) とは何ですか?

フロントエンド シングル サインオン (SSO) は、ユーザーが単一セットのログイン認証情報を使用して複数のアプリケーションまたは Web サイトにアクセスできるようにするユーザー認証および認可方法であり、ログインと登録の繰り返しを排除します。 これにより、ユーザー エクスペリエンスが向上し、メンテナンス コストが削減され、セキュリティが強化されます。

シングル サインオン ソリューションの実装

フロントエンド SSO の実装には、いくつかの重要なアプローチが存在します。

Cookie ベースの SSO

この広く使用されている方法は、ブラウザの Cookie メカニズムを利用します。 中央認証ページ (ページ A など) への最初のログイン時に、ユーザー データと有効期限を含む暗号化された Cookie が作成されます。 Cookie のドメインはトップレベル ドメイン (example.com など) に設定され、そのドメイン内のアプリケーション間で共有できるようになります (a.example.com、b.example.com など)。その後、他のアプリケーションにアクセスすると、この Cookie がチェックされます。存在する場合、ユーザーは自動的にログインします。それ以外の場合は、認証ページへのリダイレクトが発生します。 シンプルではありますが、このアプローチは同じドメインのアプリケーションに限定されており、クロスドメインの課題に直面しており、Cookie のサイズと量にも制限があります。

例: Cookie の設定と取得。

Cookie の設定 (ページ A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Cookie の取得と使用 (ページ B):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

トークンベースの SSO

このステートレスな方法には、認証センターでのログイン成功時に暗号化されたトークン (ユーザー情報と有効期限が含まれる) が生成されます。このトークンはクライアント側 (localStorage または sessionStorage) に保存されます。 後続のアプリケーション アクセスではトークンが検証されます。有効なトークンは直接アクセスを許可しますが、無効なトークンは認証センターにリダイレクトします。 トークンベースの SSO はクロスドメイン機能をサポートし、Cookie の制限を回避しますが、追加のストレージとネットワークのオーバーヘッドが必要となり、トークンが危険にさらされた場合にはセキュリティ上のリスクが生じます。

例: トークンの保存と検証。

トークンの保存 (ページ A):

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);

トークンの取得と使用 (他のページ):

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);

OAuth 2.0 ベースの SSO

この方法では、OAuth 2.0 の認証コード フローを利用します。 最初のログインにより、認証センターへのリクエストがトリガーされ、認証コードが返され、アプリケーションのコールバック URL にリダイレクトされます。 アプリケーションは、このコードを、クライアント側に保存されたアクセス トークンとリフレッシュ トークン (ユーザー データと有効期限を含む) と交換します。 後続のアプリケーション アクセスでは、有効なアクセス トークンが存在するかどうかがチェックされ、見つかった場合は自動的にログインし、そうでない場合は認証センターにリダイレクトされます。 OAuth 2.0 標準に準拠し、さまざまなクライアント タイプ (Web、モバイル、デスクトップ) をサポートしていますが、より複雑であり、複数のリクエストとリダイレクトが必要です。

例: 認証コード フロー。

認可リクエストの送信 (ページ A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

コールバックの処理 (ページ A):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

---

Leapcell: プレミア Node.js ホスティング ソリューション

Leapcell は、Web ホスティング、非同期タスク、Redis 用の最先端のサーバーレス プラットフォームであり、以下を提供します。

• 多言語サポート: Node.js、Python、Go、Rust。
• 無制限の無料プロジェクト: 使用した分だけ支払います。
• コスト効率: アイドル料金なしの従量課金制です。
• 合理化された開発者エクスペリエンス: 直感的な UI、自動化された CI/CD、リアルタイム メトリクス。
• スケーラブルで高性能: 自動スケーリング、運用オーバーヘッドなし。

ドキュメントを参照して試してみてください!

X でフォローしてください: @LeapcellHQ

---

詳しくはブログをご覧ください

以上がシングル サインオン (SSO) が簡単にの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。