Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングルサインオンに関する関連知識を共有し、参考のためにいくつかのデモを提供します。詳細を知りたい方のお役に立てば幸いです。

さっそく、原則についてお話ししましょう（参考アドレス：https://www.jianshu.com/p/613e44d4a464）

簡単に言えば、シングルサインオン (SSO) とは、複数のシステムが共存する環境において、ユーザーが 1 か所でログインした後は、他のシステムにログインする必要がないことを意味します。つまり、ユーザーの 1 回のログインは、他のすべてのシステムによって信頼されることになります。シングルサインオンは、Alibaba などの大規模な Web サイトでよく使用されています。Web サイトの背後には、数百、数千ものサブシステムがあります。ユーザーによる単一の操作またはトランザクションには、数十のサブシステムの連携が関係する場合があります。各サブシステムでユーザー認証が必要な場合、ユーザーが混乱するだけでなく、認証と承認のロジックが繰り返されるため、各サブシステムも混乱します。シングルサインオンを実現するには、信頼をどのように生成して保存するか、そして他のシステムが信頼の有効性をどのように検証するかという問題を解決することが鍵となります。したがって、重要なポイントは次の 2 つです。

ストレージトラスト
信頼を検証する

冒頭で述べた効果を実現できるシステムがシングルサインオンであるといえます。シングルサインオンを実装する方法はいくつかあります。この記事では、開発中に私が遭遇した実装方法を紹介します。

方法 1: Cookie を認証媒体として使用する

シングルサインオンを実装する最も簡単な方法は、ユーザーの資格情報を保存する媒体として Cookie を使用することです。
ユーザーが親アプリケーションにログインすると、アプリケーションは暗号化された Cookie を返します。ユーザーが子アプリケーションにアクセスするときは、この Cookie を携帯し、アプリケーションが Cookie を復号化して検証することを許可します。検証に合格すると、現在のユーザーがログインします。

クッキーによる認証

上記の方法ではクライアントの Cookie に信頼が保存されていることに気づくのは難しくありませんが、これは非常に疑わしいものです。

クッキーは安全ではありません
クロスドメインの無料ログインを実装できません

最初の質問については、クッキーを暗号化することでセキュリティは保証できますが、もちろん、ソースコードが漏洩しないという前提です。クッキーの暗号化アルゴリズムが漏洩すると、攻撃者がクッキーを偽造して特定のユーザーの身元を偽造することができ、非常に危険です。
2番目の質問に関しては、さらに問題があります。

方法2: JSONP経由で実装

クロスドメインの問題の場合は、JSONP を使用できます。
ユーザーが親アプリケーションにログインすると、セッションに一致する Cookie がクライアントに保存されます。ユーザーが子アプリケーションにログインする必要がある場合、承認されたアプリケーションは親アプリケーションが提供する JSONP インターフェイスにアクセスし、リクエストで親アプリケーションのドメイン名の下にある Cookie を持ち込みます。親アプリケーションはリクエストを受け取り、ユーザーのログイン状態を確認し、暗号化された情報を返します。子アプリケーションは、返された暗号化された情報を解析してユーザーを検証します。検証が成功すると、ユーザーはログインします。

jsonp 経由の Auth はクロスドメインの問題を解決できますが、そのセキュリティは実際には Cookie に信頼を保存することに似ています。暗号化アルゴリズムが漏洩した場合、攻撃者はログインインターフェイスをローカルに実装する偽の親アプリケーションを設定し、ホストをバインドして子アプリケーションによって開始された要求をローカルの偽の親アプリケーションに送信し、応答することができます。
攻撃者は暗号化アルゴリズムに従って応答要求を偽造できるため、サブアプリケーションは応答を受け取った後でも検証に合格し、特定のユーザーをログインさせることができます。

方法 3: ページリダイレクトを使用する最後に紹介する方法は、親アプリケーションと子アプリケーション間でリダイレクトを介して通信し、情報の安全な送信を実現することです。
親アプリケーションは、GET ログインインターフェイスを提供します。ユーザーは、子アプリケーションのリダイレクト接続を通じてこのインターフェイスにアクセスします。ユーザーがログインしていない場合は、ログインページが返され、ユーザーはアカウントとパスワードを入力してログインします。ユーザーがログインしている場合は、暗号化されたトークンが生成され、サブアプリケーションによって提供されるトークン検証インターフェイスにリダイレクトされます。復号化と検証の後、サブアプリケーションは現在のユーザーをログインさせます。

リダイレクトによる認証は、前の 2 つの方法で発生したセキュリティとクロスドメインの問題を解決しますが、前の 2 つの方法ほど便利ではありません。
安全性と利便性は本質的に矛盾しています。

方法 4: 独立したログインシステムを使用します。一般的に、大規模なアプリケーションでは、認証ロジックとユーザー情報関連のロジックを、ユーザーセンターと呼ばれる独立したアプリケーションに分離します。
ユーザーセンターはビジネスロジックを処理せず、ユーザー情報の管理とサードパーティアプリケーションの承認のみを行います。サードパーティアプリケーションがログインする必要がある場合、ユーザーのログイン要求は処理のためにユーザーセンターに転送されます。ユーザーが処理を完了すると、資格情報が返されます。サードパーティアプリケーションは資格情報を検証し、合格するとユーザーをログインさせます。

上記は私が知っているシングルサインオンのモードと原理です。以下は実際のコードです。ここでは2つの状況をリストし、カテゴリ別に説明し、対応するデモを提供します（以下の理論はhttps://www.jb51.net/article/98228.htmを参照しています）環境1：a.xxx.comはb.xxx.comとのクロスドメインを実現する必要があります。これは比較的簡単です。ドメインcookie.Domain = "xxx.com"を関連付けるには、Cookieのドメイン名を設定するだけです。このようにして、2つのドメイン名間のCookieが相互にアクセスし、クロスドメインを実現できます。

デモアドレス表示:

システム 1: sso1.linheng.xyz

システム 2: sso2.linheng.xyz

Vue 固有のコード:

まずjs-cookieをインストールするコマンドを入力します

npm と js-cookie -S

次にログインページを書きます

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <button @click="handleLogin">クリックしてログイン</button>
    <button @click="rethome">ホームページに戻る</button>
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
エクスポートデフォルト{
  名前: 'ホーム',
  データ （） {
    戻る {
      メッセージ: 'System 1 ログイン ページ'
    }
  },
  メソッド: {
        ハンドルログイン() {
        var トークン = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/', domain: '.**.com' })//ここでウェブサイトのルート ディレクトリを変更します。Cookies.set('app.loginname','System 1', { expires: 1000, path: '/', domain: '.**.com' })//ここでウェブサイトのルート ディレクトリを変更します。this.$router.push("/");
    },
    戻る（）{
      this.$router.push("/");
    },
    ランダム文字列(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = tの長さ、
        n = "";
        (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        戻るn
    }
    }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

次はホームページです:

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <h3>ユーザー情報: {{token}}</h3>
    <h3>ログイン場所: {{loginname}}</h3>
    <button @click="logout">ログアウト</button>
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
 
エクスポートデフォルト{
  名前: 'ホーム',
  データ （） {
    戻る {
      メッセージ: 'システム 1 メイン ページ'、
      トークン：''、
      ログイン名:''
    }
  },
  マウントされた(){
    const トークン = Cookies.get('app.token');
    this.token = トークン;
    const loginname = Cookies.get('app.loginname');
    this.ログイン名 = ログイン名;
    console.log(トークン);
    if(!トークン){
      this.$router.push("/login");
    }
  },
  メソッド: {
    ログアウト(){
         Cookies.set('app.token','', { expires: 1000, path: '/', domain: '.**.com' })//ここでウェブサイトのルートディレクトリを変更します。Cookies.set('app.loginname','', { expires: 1000, path: '/', domain: '.**.com' })//ここでウェブサイトのルートディレクトリを変更します。this.$router.go(0)
    }
    }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

システム 2 の対応するページは、これら 2 つのページを移動し、識別しやすいようにテキストを変更するだけです。

この時点で、誰もがこれについてより明確な考えを持っています。最適化が必要な場合は、判断方法と取得方法を制御に統合し、ルーターで操作することをお勧めします。

ここで私は密閉制御のデモを共有します。記事を見るにはここをクリックしてください。

環境 2: a.aaa.com は b.bbb.com とのクロスドメインを実現する必要があります。ドメイン名が異なる場合は、これを実現するには別の方法を使用する必要があります。

これについては、まだデモを書いていないので、私が見つけた最も信頼できるアイデアとデモを紹介します。

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

前のフローチャートは見苦しすぎるので、ここに示します。お役に立てば幸いです。

収集されたデモソースコード: SSO シングルサインオンの手順: 2 つの新しいサイト xxx-xxx.com (メインサイト) と yyy-yyy.com (サブサイト) を作成し、hosts ファイルを変更して、両方のドメイン名を 127.0.0.1 にポイントします。

もし役に立つなら、ぜひフォローしてください。一緒に議論し、学び、一緒に進歩できるように、技術ドキュメントを定期的に更新します。

これで、Vue でシングルサインオンを実装する N の方法についての記事は終了です。Vue シングルサインオンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: