Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes

Vor ein paar Tagen habe ich mir auf GeekTime ein Video über QR-Codes angesehen. Es war gut geschrieben. Hier ist eine Zusammenfassung:

Im täglichen Leben kommen QR-Codes in vielen Situationen vor, beispielsweise beim Bezahlen im Supermarkt, bei der Systemanmeldung, beim Herunterladen von Anwendungen usw. Das Verständnis der Prinzipien von QR-Codes kann dem technischen Personal neue Ideen bei der Auswahl der Technologie liefern. Für nicht-technisches Personal können wir nicht nur seine Zweifel ausräumen, sondern es auch dabei unterstützen, die verschiedenen im Alltag anzutreffenden QR-Codes besser zu identifizieren und zu verhindern, dass es getäuscht wird.

QR-Code, jeder kennt ihn

Scannen Sie den Code beim Einkaufen, Essen und Busfahren

Während des Scanvorgangs können Fragen auftauchen: Ist dieser QR-Code sicher? Werden meine persönlichen Daten weitergegeben? Fortgeschrittenere Benutzer werden sich außerdem fragen: Kann ich auch einen QR-Code erstellen, um für mein System zu werben?

Jetzt müssen Sie die Technologie und Logik hinter dem QR-Code verstehen!

Eines der häufigsten Szenarien für QR-Codes besteht darin, den QR-Code auf dem PC oder im Internet über eine mobile Anwendung zu scannen, um sich beim selben System anzumelden. Sie können beispielsweise den QR-Code auf Ihrem Mobiltelefon WeChat scannen, um sich auf Ihrem PC bei WeChat anzumelden, und den QR-Code auf Ihrem Mobiltelefon Taobao scannen, um sich auf Ihrem PC bei Taobao anzumelden. Sehen wir uns also an, wie die Anmeldung per QR-Code funktioniert!

Das Wesentliche beim QR-Code-Login

Die Anmeldung per QR-Code ist im Wesentlichen eine Methode zur Anmeldeauthentifizierung. Da es sich um eine Login-Authentifizierung handelt, sind nur zwei Dinge zu tun!

1. Sagen Sie dem System, wer ich bin

2. Dem System beweisen, wer ich bin

Wenn ich mich beispielsweise mit einem Konto und einem Passwort anmelde, verrät die Kontonummer dem System, wer ich bin, und das Passwort beweist dem System, wer ich bin. Wenn ich mich beispielsweise mit einem Handy-Bestätigungscode anmelde, verrät die Handynummer dem System, wer ich bin, und der Bestätigungscode beweist dem System, wer ich bin.

Wie können diese beiden Dinge durch das Scannen des QR-Codes zum Anmelden erreicht werden? Lassen Sie uns gemeinsam darüber nachdenken

Mittels der mobilen App wird der QR-Code am PC gescannt. Nach der Bestätigung auf dem Handy ist der Account am PC erfolgreich angemeldet! Dabei muss es sich beim angemeldeten Konto am PC um das gleiche Konto wie am Mobiltelefon handeln. Es ist nicht möglich, dass auf dem Mobiltelefon das Konto A angemeldet ist und nach dem Scannen des Anmeldecodes auf dem PC das Konto B angemeldet ist.

Also muss ich dem System zunächst sagen, wer ich bin, was relativ klar ist!

Durch das Scannen des QR-Codes werden die Kontoinformationen vom Mobiltelefon auf den PC übertragen. Wie die Übertragung erfolgt, besprechen wir später.

Zweitens muss ich dem System beweisen, wer ich bin. Während des Anmeldevorgangs durch Scannen des QR-Codes hat der Benutzer weder ein Kennwort noch einen Bestätigungscode oder einen anderen Code eingegeben. Wie wird das bewiesen?

Manche Studierende fragen sich vielleicht, ob beim Scanvorgang das Passwort an den PC übermittelt wird? Aber das ist unmöglich. Weil das zu unsicher ist, speichert der Client das Passwort überhaupt nicht. Wenn wir genau darüber nachdenken, ist die mobile App tatsächlich bereits angemeldet, was bedeutet, dass das Mobiltelefon die Anmeldeauthentifizierung bestanden hat.所說只要掃碼確認是這個手機且是這個賬號操作的，其實就能間接證明我誰。

QR-Codes verstehen

Wie bestätigen Sie es? Wir werden es später im Detail erklären, aber vorher müssen wir zuerst den QR-Code kennenlernen! Bevor wir den QR-Code kennenlernen, werfen wir einen Blick auf den eindimensionalen Code!

Der sogenannte eindimensionale Code ist ein Barcode, der Barcode im Supermarkt – ich glaube, jeder kennt ihn sehr gut. Der Barcode ist eigentlich eine Zahlenfolge, die die Seriennummer des Produkts speichert.

Ein QR-Code ähnelt eigentlich einem Barcode, mit dem Unterschied, dass er nicht unbedingt Zahlen, sondern auch beliebige Zeichenfolgen speichern kann. Sie können ihn sich als eine andere Form der Zeichenfolgendarstellung vorstellen.

Suchen Sie in der Suchmaschine nach QR-Codes, und Sie finden viele Tool-Websites zum Generieren von QR-Codes online. Diese Websites bieten die Funktion zum Konvertieren zwischen Zeichenfolgen und QR-Codes, wie z. B. die Grass Feed QR Code Website

In das Eingabefeld links können Sie Ihren Inhalt eingeben. Es kann sich um Text, eine URL, eine Datei usw. handeln. Dann können Sie QR-Codes generieren, die sie darstellen

Sie können den QR-Code auch hochladen und „dekodieren“ und anschließend die Bedeutung des QR-Codes analysieren.

Systemauthentifizierungsmechanismus

Nachdem wir nun etwas über QR-Codes wissen, wollen wir uns mit dem Systemauthentifizierungsmechanismus im mobilen Internet befassen.

Wie bereits erwähnt, speichert das Mobiltelefon Ihr Anmeldekennwort aus Sicherheitsgründen nicht. Im täglichen Gebrauch sollten wir jedoch feststellen, dass Sie sich nur bei der ersten Anmeldung nach dem Herunterladen der Anwendung mit einem Konto und einem Kennwort anmelden müssen. Selbst wenn der Anwendungsprozess danach beendet oder das Telefon neu gestartet wird, müssen Sie das Konto und das Kennwort nicht erneut eingeben. Die Anmeldung erfolgt automatisch.

Tatsächlich verbirgt sich dahinter ein tokenbasierter Authentifizierungsmechanismus. Schauen wir uns an, wie dieser Mechanismus funktioniert.

Beim Anmelden mit einem Konto und einem Passwort übergibt der Client die Geräteinformationen an den Server. Wenn die Konto- und Passwortüberprüfung erfolgreich ist, verknüpft der Server das Konto und das Gerät und speichert sie in einer Datenstruktur. Diese Datenstruktur enthält die Konto-ID, die Geräte-ID, den Gerätetyp usw.

konstantes Token = {
  acountid:'Konto-ID',
  deviceid:'Angemeldete Geräte-ID',
  deviceType: „Gerätetyp, z. B. ISO, Android, PC …“,
}

Der Server generiert dann ein Token und verwendet es, um die Datenstruktur abzubilden. Dieses Token ist eigentlich eine Zeichenfolge mit einer besonderen Bedeutung. Seine Bedeutung liegt darin, dass damit die entsprechenden Konto- und Geräteinformationen gefunden werden können.

• Nachdem der Client dieses Token erhalten hat, muss er es lokal speichern und bei jedem Zugriff auf die System-API die Token- und Geräteinformationen mitführen.
• Der Server kann das Token verwenden, um die an ihn gebundenen Konto- und Geräteinformationen zu finden und dann die gebundenen Geräteinformationen jedes Mal mit den vom Client gesendeten Geräteinformationen zu vergleichen. Wenn sie gleich sind, ist die Überprüfung erfolgreich und die Antwortdaten der AP-Schnittstelle werden zurückgegeben. Wenn sie unterschiedlich sind, schlägt die Überprüfung fehl und der Zugriff wird verweigert.

Aus dem bisherigen Ablauf können wir erkennen, dass der Client Ihr Passwort nicht speichert und auch nicht speichern muss. Stattdessen speichert er das Token. Manche Studenten denken vielleicht, dass dieses Token so wichtig ist. Was ist, wenn andere es kennen? Tatsächlich hat es keine Auswirkungen, wenn Sie es wissen, denn Geräteinformationen sind einzigartig. Solange andere Ihre Geräteinformationen nicht kennen, wird die Überprüfung nicht erfolgreich sein, wenn sie andere Geräte verwenden, um darauf zuzugreifen.

Man kann sagen, dass der Zweck der Client-Anmeldung darin besteht, ein eigenes Token zu erhalten.

Wie also erhält der PC beim Login-Prozess per QR-Code-Scan an sein eigenes Token? Eine direkte Übertragung des eigenen Tokens vom Handy auf den PC ist nicht möglich! Der Token kann nur einem bestimmten Kunden gehören und kann nicht von anderen Personen oder anderen Kunden verwendet werden. Bevor wir dieses Problem analysieren, müssen wir die allgemeinen Schritte zum Scannen des QR-Codes zum Anmelden klären. Dies kann uns dabei helfen, den gesamten Prozess zu regeln.

Allgemeine Schritte zum Scannen des QR-Codes zum Anmelden

Ungefährer Prozess

1. Vor dem Scannen des Codes wird die mobile App angemeldet und der PC zeigt einen QR-Code an, der darauf wartet, gescannt zu werden

2. Öffnen Sie die App auf Ihrem Telefon und scannen Sie den QR-Code auf Ihrem PC. Nach dem Scannen wird die Meldung „Gescannt, klicken Sie bitte auf Ihrem Telefon auf Bestätigen“ angezeigt.

3. Der Benutzer klickt auf dem Mobiltelefon auf „Bestätigen“, und nach der Bestätigung ist die PC-Anmeldung erfolgreich.

Wie Sie sehen, hat der QR-Code in der Mitte drei Zustände: „Warten auf Scannen“, „Gescannt und warten auf Bestätigung“ und „Bestätigt“. Sie können sich also vorstellen

1. Hinter dem QR-Code muss eine eindeutige ID stehen. Beim Generieren des QR-Codes wird diese ID ebenfalls generiert und an die Geräteinformationen auf dem PC gebunden.

2. Scannen Sie diesen QR-Code mit Ihrem Mobiltelefon

3. Der QR-Code wechselt in den Zustand „Gescannt und ausstehend zur Bestätigung“ und die Kontoinformationen werden an diese ID gebunden.

4. Wenn das Mobiltelefon die Anmeldung bestätigt, generiert es einen Token zur Anmeldung am PC und sendet ihn an den PC zurück.

Okay, nachdem nun die Grundidee klar ist, wollen wir den gesamten Prozess konkretisieren.

QR-Code-Vorbereitung

Entsprechend den verschiedenen Zuständen des QR-Codes ist der erste der Wartezustand zum Scannen, bei dem der Benutzer den PC öffnet und zur QR-Code-Anmeldeoberfläche wechselt.

1. Der PC sendet eine Anfrage an den Server und teilt ihm mit, dass er einen QR-Code für die Benutzeranmeldung generieren und die PC-Geräteinformationen an den Server weitergeben möchte.

2. Nachdem der Server die Anfrage erhalten hat, generiert er eine QR-Code-ID und bindet die QR-Code-ID an die PC-Geräteinformationen

3. Anschließend die QR-Code-ID an den PC zurücksenden

4. Nach Erhalt der QR-Code-ID generiert der PC einen QR-Code (der QR-Code muss die ID enthalten)

5. Um den Status des QR-Codes rechtzeitig zu erfahren, fragt der PC, nachdem der Client den QR-Code angezeigt hat, den Server kontinuierlich ab, beispielsweise einmal pro Sekunde, und fordert den Server auf, den aktuellen Status des QR-Codes und zugehörige Informationen mitzuteilen

Der QR-Code ist fertig, der nächste Schritt ist das Scannen.

Scan-Statusschalter

1. Der Nutzer scannt mit einem Mobiltelefon den QR-Code auf dem PC und erhält die QR-Code-ID aus dem QR-Code-Inhalt.

2. Rufen Sie die Server-API auf, um die Identitätsinformationen und die QR-Code-ID des mobilen Endgeräts an den Server zu senden

3. Nach dem Empfang kann der Server die Identitätsinformationen mit der QR-Code-ID verknüpfen, um ein temporäres Token zu generieren. Kehren Sie dann zum Mobiltelefon zurück

4. Da der PC den Status des QR-Codes abgefragt hat, kann er, wenn sich der Status des QR-Codes zu diesem Zeitpunkt ändert, den Status des QR-Codes auf der Schnittstelle aktualisieren, um ihn zu scannen.

Warum müssen wir also ein temporäres Token an das Mobiltelefon zurückgeben? Ein temporärer Token ist genau wie ein Token eine Art Identitätsnachweis. Der Unterschied besteht darin, dass er nur einmal verwendet werden kann und nach der Verwendung ungültig wird.

Im dritten Schritt wird ein temporäres Token zurückgegeben, sodass das Mobiltelefon es beim nächsten Vorgang als Anmeldeinformation verwenden kann. Dadurch wird sichergestellt, dass die beiden Schritte, das Scannen des Codes und die Anmeldung, vom selben Mobiltelefon aus eingeleitet werden.

Statusbestätigung

Der letzte Schritt besteht darin, den Status zu bestätigen.

1. Nach dem Empfang des temporären Tokens wird auf dem Mobiltelefon eine Anmeldebestätigungsoberfläche angezeigt. Wenn der Benutzer auf „Bestätigen“ klickt, ruft das Mobiltelefon mit dem temporären Token die Schnittstelle des Servers auf und teilt dem Server mit, dass ich bestätigt habe

2. Nach Erhalt der Bestätigung generiert der Server basierend auf den an die QR-Code-ID gebundenen Geräteinformationen und Kontoinformationen einen Token für die Anmeldung des Benutzers am PC.

3. Zu diesem Zeitpunkt kann die Polling-Schnittstelle auf der PC-Seite erkennen, dass der Status des QR-Codes „bestätigt“ geworden ist. Und das Benutzer-Login-Token kann vom Server bezogen werden

4. An diesem Punkt ist die Anmeldung erfolgreich und der Back-End-PC kann das Token verwenden, um auf die Serverressourcen zuzugreifen.

Der grundlegende Vorgang des Code-Scannens wurde erklärt, einige Details wurden jedoch nicht ausführlicher behandelt.

Was ist beispielsweise der Inhalt des QR-Codes?

• Kann eine QR-Code-ID sein
• Es kann sich um eine URL-Adresse handeln, die die QR-Code-ID enthält. Was soll beim Scannen des Codes zur Bestätigung getan werden, wenn der Benutzer abbricht? Über diese Einzelheiten müssen Sie nachdenken.

Zusammenfassen

Wir beginnen mit den Grundlagen der Anmeldung und untersuchen, wie die Anmeldung per QR-Code-Scan erfolgt

1. Sagen Sie dem System, wer ich bin

2. Dem System beweisen, wer ich bin

Dabei haben wir zunächst kurz auf zwei Voraussetzungen eingegangen.

• Eines davon ist das QR-Code-Prinzip.
• Einer davon ist ein tokenbasierter Authentifizierungsmechanismus.

Anschließend haben wir anhand des QR-Code-Status die Logik dahinter analysiert: Verwendung des Token-Authentifizierungsmechanismus und der Änderung des QR-Code-Status, um eine Anmeldung durch Code-Scannen zu erreichen.

Es ist darauf hinzuweisen, dass der oben beschriebene Anmeldevorgang für PC, Web und mobile Endgeräte desselben Systems gilt.

Normalerweise haben wir ein anderes gängiges Szenario, nämlich das Scannen des Codes zum Anmelden über eine Drittanbieteranwendung. Geek Time/Nuggets können beispielsweise WeChat/QQ auswählen, um den Code zum Anmelden zu scannen. Was ist also das Prinzip des Scannens des Codes zum Anmelden über eine Drittanbieteranwendung?

Damit ist dieser Artikel über das Prinzip der Anmeldung per js-QR-Code-Scan abgeschlossen. Weitere relevante Inhalte zur Anmeldung per js-QR-Code-Scan finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!