ホームページ >ウェブフロントエンド >jsチュートリアル >シングル サインオン (SSO) が簡単に
フロントエンド シングル サインオン (SSO) は、ユーザーが単一セットのログイン認証情報を使用して複数のアプリケーションまたは Web サイトにアクセスできるようにするユーザー認証および認可方法であり、ログインと登録の繰り返しを排除します。 これにより、ユーザー エクスペリエンスが向上し、メンテナンス コストが削減され、セキュリティが強化されます。
フロントエンド SSO の実装には、いくつかの重要なアプローチが存在します。
この広く使用されている方法は、ブラウザの Cookie メカニズムを利用します。 中央認証ページ (ページ A など) への最初のログイン時に、ユーザー データと有効期限を含む暗号化された Cookie が作成されます。 Cookie のドメインはトップレベル ドメイン (example.com など) に設定され、そのドメイン内のアプリケーション間で共有できるようになります (a.example.com、b.example.com など)。その後、他のアプリケーションにアクセスすると、この Cookie がチェックされます。存在する場合、ユーザーは自動的にログインします。それ以外の場合は、認証ページへのリダイレクトが発生します。 シンプルではありますが、このアプローチは同じドメインのアプリケーションに限定されており、クロスドメインの課題に直面しており、Cookie のサイズと量にも制限があります。
例: Cookie の設定と取得。
Cookie の設定 (ページ A):
<code class="language-javascript">// Generate an encrypted cookie value const encryptedValue = encrypt(userinfo); // Set the cookie document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>
Cookie の取得と使用 (ページ B):
<code class="language-javascript">// 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);</code>
このステートレスな方法には、認証センターでのログイン成功時に暗号化されたトークン (ユーザー情報と有効期限が含まれる) が生成されます。このトークンはクライアント側 (localStorage または sessionStorage) に保存されます。 後続のアプリケーション アクセスではトークンが検証されます。有効なトークンは直接アクセスを許可しますが、無効なトークンは認証センターにリダイレクトします。 トークンベースの SSO はクロスドメイン機能をサポートし、Cookie の制限を回避しますが、追加のストレージとネットワークのオーバーヘッドが必要となり、トークンが危険にさらされた場合にはセキュリティ上のリスクが生じます。
例: トークンの保存と検証。
トークンの保存 (ページ A):
<code class="language-javascript">// Generate the token value const token = generateToken(userinfo); // Store the token localStorage.setItem('sso_token', token);</code>
トークンの取得と使用 (他のページ):
<code class="language-javascript">// Retrieve the token const token = localStorage.getItem('sso_token'); // Validate the token const userinfo = verifyToken(token); // Log in directly login(userinfo);</code>
この方法では、OAuth 2.0 の認証コード フローを利用します。 最初のログインにより、認証センターへのリクエストがトリガーされ、認証コードが返され、アプリケーションのコールバック URL にリダイレクトされます。 アプリケーションは、このコードを、クライアント側に保存されたアクセス トークンとリフレッシュ トークン (ユーザー データと有効期限を含む) と交換します。 後続のアプリケーション アクセスでは、有効なアクセス トークンが存在するかどうかがチェックされ、見つかった場合は自動的にログインし、そうでない場合は認証センターにリダイレクトされます。 OAuth 2.0 標準に準拠し、さまざまなクライアント タイプ (Web、モバイル、デスクトップ) をサポートしていますが、より複雑であり、複数のリクエストとリダイレクトが必要です。
例: 認証コード フロー。
認可リクエストの送信 (ページ A):
<code class="language-javascript">// Generate an encrypted cookie value const encryptedValue = encrypt(userinfo); // Set the cookie document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>
コールバックの処理 (ページ A):
<code class="language-javascript">// 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);</code>
Leapcell は、Web ホスティング、非同期タスク、Redis 用の最先端のサーバーレス プラットフォームであり、以下を提供します。
ドキュメントを参照して試してみてください!
X でフォローしてください: @LeapcellHQ
詳しくはブログをご覧ください
以上がシングル サインオン (SSO) が簡単にの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。