Zusammenfassung der Möglichkeiten zur Implementierung von Single Sign-On in Vue

Das Projekt wurde vor Kurzem ausgesetzt und die Untersuchung von RageFrame ist vorläufig beendet. In diesem Artikel werde ich Ihnen das relevante Wissen über Single Sign-On mitteilen und Ihnen einige Demos zur Verfügung stellen. Ich hoffe, es wird für diejenigen hilfreich sein, die mehr wissen möchten.

Lassen Sie uns ohne weitere Umschweife zunächst über das Prinzip sprechen (Referenzadresse: https://www.jianshu.com/p/613e44d4a464).

Einfach ausgedrückt bedeutet Single Sign On (SSO), dass sich ein Benutzer in einer Umgebung, in der mehrere Systeme nebeneinander existieren, nach der Anmeldung an einer Stelle nicht erneut bei anderen Systemen anmelden muss. Mit anderen Worten: Alle anderen Systeme vertrauen der Anmeldung des Benutzers. Single Sign-On wird häufig auf großen Websites wie Alibaba verwendet. Hinter der Website stehen Hunderte oder sogar Tausende von Subsystemen. Eine einzelne Operation oder Transaktion eines Benutzers kann die Zusammenarbeit von Dutzenden von Subsystemen erfordern. Wenn jedes Subsystem eine Benutzerauthentifizierung erfordert, wird nicht nur der Benutzer verrückt, sondern auch jedes Subsystem wird aufgrund der Logik der wiederholten Authentifizierung und Autorisierung verrückt. Um Single Sign-On zu erreichen, muss man das Problem lösen, wie das Vertrauen generiert und gespeichert wird und wie andere Systeme die Gültigkeit des Vertrauens überprüfen können. Daher sind die folgenden zwei Punkte die wichtigsten:

• Speichervertrauen
• Vertrauensbestätigung

Wenn ein System den eingangs erwähnten Effekt erreicht, handelt es sich um Single Sign-On. Es gibt verschiedene Möglichkeiten, Single Sign-On zu implementieren. Dieser Artikel listet die Implementierungsmethoden auf, die mir während der Entwicklung begegnet sind.

Methode 1: Cookie als Anmeldemedium verwenden

Die einfachste Möglichkeit zur Implementierung der einmaligen Anmeldung besteht darin, Cookies als Medium zur Speicherung der Benutzeranmeldeinformationen zu verwenden.
Nachdem sich der Benutzer bei der übergeordneten Anwendung angemeldet hat, gibt die Anwendung ein verschlüsseltes Cookie zurück. Wenn der Benutzer auf die untergeordnete Anwendung zugreift, trägt er dieses Cookie und autorisiert die Anwendung, das Cookie zu entschlüsseln und zu überprüfen. Wenn die Überprüfung erfolgreich ist, ist der aktuelle Benutzer angemeldet.

Authentifizierung über Cookies

Es ist nicht schwer festzustellen, dass die obige Methode das Vertrauen in das Cookie des Clients speichert, was sehr fragwürdig ist:

• Cookies sind nicht sicher
• Domänenübergreifende kostenlose Anmeldung kann nicht implementiert werden

Zur ersten Frage: Die Sicherheit kann durch die Verschlüsselung von Cookies gewährleistet werden. Dies setzt natürlich voraus, dass der Quellcode nicht weitergegeben wird. Wenn der Verschlüsselungsalgorithmus des Cookies durchsickert, kann ein Angreifer durch Fälschen des Cookies die Identität eines bestimmten Benutzers fälschen, was sehr gefährlich ist.
Die zweite Frage ist sogar noch problematischer.

Methode 2: Implementierung über JSONP

Bei domänenübergreifenden Problemen kann JSONP verwendet werden.
Nachdem sich der Benutzer bei der übergeordneten Anwendung angemeldet hat, wird das der Sitzung entsprechende Cookie im Client gespeichert. Wenn sich der Benutzer bei der untergeordneten Anwendung anmelden muss, greift die autorisierte Anwendung auf die von der übergeordneten Anwendung bereitgestellte JSONP-Schnittstelle zu und bringt das Cookie unter dem Domänennamen der übergeordneten Anwendung in die Anforderung. Die übergeordnete Anwendung empfängt die Anforderung, überprüft den Anmeldestatus des Benutzers und gibt verschlüsselte Informationen zurück. Die untergeordnete Anwendung überprüft den Benutzer, indem sie die zurückgegebenen verschlüsselten Informationen analysiert. Wenn die Überprüfung erfolgreich ist, wird der Benutzer angemeldet.

Obwohl die Authentifizierung über JSONP das domänenübergreifende Problem lösen kann, ähnelt ihre Sicherheit tatsächlich der Speicherung von Vertrauen in Cookies. Wenn der Verschlüsselungsalgorithmus durchsickert, kann der Angreifer eine gefälschte übergeordnete Anwendung einrichten, die die Anmeldeschnittstelle lokal implementiert, den Host so binden, dass die von der untergeordneten Anwendung initiierten Anforderungen an die lokale gefälschte übergeordnete Anwendung weitergeleitet werden, und antworten.
Da der Angreifer eine Antwortanforderung gemäß dem Verschlüsselungsalgorithmus fälschen kann, kann die Unteranwendung die Überprüfung dennoch bestehen und den bestimmten Benutzer nach Erhalt der Antwort anmelden.

Methode 3: Durch Seitenumleitung Die letzte vorgestellte Methode besteht darin, die Kommunikation zwischen der übergeordneten Anwendung und der untergeordneten Anwendung durch Hin- und Herumleitung zu gewährleisten, um eine sichere Informationsübertragung zu erreichen.
Die übergeordnete Anwendung stellt eine GET-Anmeldeschnittstelle bereit. Benutzer greifen über die Umleitungsverbindung der untergeordneten Anwendung auf diese Schnittstelle zu. Wenn sich der Benutzer nicht angemeldet hat, wird eine Anmeldeseite zurückgegeben und der Benutzer gibt das Konto und das Kennwort ein, um sich anzumelden. Wenn sich der Benutzer angemeldet hat, wird ein verschlüsseltes Token generiert und an die von der Unteranwendung bereitgestellte Token-Verifizierungsschnittstelle weitergeleitet. Nach der Entschlüsselung und Überprüfung meldet die Unteranwendung den aktuellen Benutzer an.

Die Authentifizierung per Umleitung löst die Sicherheits- und domänenübergreifenden Probleme der beiden vorherigen Methoden, ist jedoch nicht so praktisch wie die beiden vorherigen Methoden.
Sicherheit und Komfort sind grundsätzlich widersprüchlich.

Methode 4: Verwenden Sie ein unabhängiges Anmeldesystem. Im Allgemeinen trennen große Anwendungen die Autorisierungslogik und die mit den Benutzerinformationen verbundene Logik in einer unabhängigen Anwendung, einem sogenannten Benutzercenter.
Das Benutzercenter kümmert sich nicht um die Geschäftslogik, sondern verwaltet lediglich Benutzerinformationen und autorisiert Anwendungen von Drittanbietern. Wenn eine Anmeldung über eine Drittanbieteranwendung erforderlich ist, wird die Anmeldeanforderung des Benutzers zur Verarbeitung an das Benutzercenter weitergeleitet. Nachdem der Benutzer die Verarbeitung abgeschlossen hat, werden die Anmeldeinformationen zurückgegeben. Die Drittanbieteranwendung überprüft die Anmeldeinformationen und meldet den Benutzer an, wenn sie erfolgreich sind.

Das Obige ist der Modus und das Prinzip der einmaligen Anmeldung, die ich kenne. Das Folgende ist der eigentliche Code für Sie. Hier liste ich zwei Situationen auf, erkläre sie nach Kategorien und stelle Ihnen meine entsprechende Demo zur Verfügung (die folgende Theorie bezieht sich auf https://www.jb51.net/article/98228.htm). Umgebung 1: a.xxx.com muss domänenübergreifend mit b.xxx.com arbeiten. Das ist relativ einfach. Sie müssen nur den Domänennamen des Cookies festlegen, um die Domäne cookie.Domain = "xxx.com" zu verknüpfen. Auf diese Weise können die Cookies zwischen den beiden Domänennamen aufeinander zugreifen und domänenübergreifend arbeiten.

Demo-Adressanzeige:

System 1: sso1.linheng.xyz

System 2: sso2.linheng.xyz

Vue-spezifischer Code:

Geben Sie zuerst den Befehl zur Installation von js-cookie ein

npm ich js-cookie -S

Schreiben Sie dann die Login-Seite

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">Klicken, um sich anzumelden</button>
    <button @click="rethome">Zur Startseite zurückkehren</button>
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
Standard exportieren {
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      Nachricht: „Anmeldeseite System 1“
    }
  },
  Methoden: {
        handleLogin() {
        var token = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/', domain: '.**.com' })//Ändern Sie hier das Stammverzeichnis Ihrer WebsiteCookies.set('app.loginname','System 1', { expires: 1000, path: '/', domain: '.**.com' })//Ändern Sie hier das Stammverzeichnis Ihrer Websitethis.$router.push("/");
    },
    zurückkehren(){
      dies.$router.push("/");
    },
    Zufallszeichenfolge(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.Länge,
        n = "";
        für (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        Rückkehr Substantiv, maskulin—
    }
    }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>

Als nächstes kommt die Homepage:

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <h3>Benutzerinformationen: {{token}}</h3>
    <h3>Anmeldeort: {{loginname}}</h3>
    <button @click="logout">Abmelden</button>
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
 
Standard exportieren {
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      msg: 'System 1 Hauptseite',
      Token:'',
      Anmeldename:''
    }
  },
  montiert(){
    const token = Cookies.get('app.token');
    dieses.token = token;
    const loginname = Cookies.get('app.loginname');
    this.loginname = Anmeldename;
    konsole.log(token);
    wenn(!token){
      dies.$router.push("/login");
    }
  },
  Methoden: {
    Abmelden(){
         Cookies.set('app.token','', { expires: 1000, path: '/', domain: '.**.com' })//Ändern Sie hier das Stammverzeichnis Ihrer WebsiteCookies.set('app.loginname','', { expires: 1000, path: '/', domain: '.**.com' })//Ändern Sie hier das Stammverzeichnis Ihrer Websitethis.$router.go(0)
    }
    }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>

Die entsprechende Seite von System 2 dient lediglich dazu, diese beiden Seiten zu verschieben und den Text zur leichteren Identifizierung zu ändern.

An diesem Punkt hat jeder eine klarere Vorstellung davon. Wenn eine Optimierung erforderlich ist, schlage ich vor, dass Sie die Beurteilungs- und Erfassungsmethoden in Steuerelementen zusammenfassen und sie dann im Router ausführen. Das ist besser.

Hier teile ich meine versiegelte Kontrolldemo, klicken Sie hier, um den Artikel anzuzeigen

Umgebung 2: a.aaa.com muss domänenübergreifend mit b.bbb.com funktionieren. Bei unterschiedlichen Domänennamen muss hierfür eine andere Methode verwendet werden.

Ich habe hierfür noch keine Demo geschrieben, daher werde ich Ihnen die zuverlässigsten Ideen und Demos geben, die ich gefunden habe.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

Das vorherige Flussdiagramm ist zu hässlich, hier ist also eines. Ich hoffe, es hilft.

Gesammelter Demo-Quellcode: SSO-Single-Sign-On-Anweisungen: Erstellen Sie zwei neue Sites xxx-xxx.com (Hauptsite) und yyy-yyy.com (Untersite), ändern Sie die Hosts-Datei und richten Sie beide Domänennamen auf 127.0.0.1 aus.

Wenn es für Sie hilfreich ist, können Sie mir gerne folgen. Ich werde die technische Dokumentation regelmäßig aktualisieren, damit wir gemeinsam diskutieren und lernen und gemeinsam Fortschritte erzielen können.

Damit ist dieser Artikel über N Möglichkeiten zur Implementierung von Single Sign-On mit Vue abgeschlossen. Weitere relevante Inhalte zu Vue Single Sign-On finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!