Implementierung des Zugriffs auf den gleitenden Überprüfungscode von Vue + DRF + Drittanbietern

Implementierung des Zugriffs auf den gleitenden Überprüfungscode von Vue + DRF + Drittanbietern

1. Hintergrund

In letzter Zeit wurde die Anforderung der Anmeldefunktion + Bestätigungscode in Projektentwicklungsübungen verwendet. Bestätigungscodes werden im Allgemeinen in drei Typen unterteilt: Bildbestätigungscode, SMS-Bestätigungscode und gleitender Bestätigungscode. Die relevanten Implementierungsideen sind wie folgt

Bildbestätigungscode

Die Implementierung des Bildüberprüfungscodes kann mithilfe der entsprechenden Methoden des Drittanbietermoduls pillow in python umgesetzt werden (ich werde einen Artikel schreiben, wenn ich Zeit habe).

SMS-Bestätigungscode

Die Hauptidee des SMS-Bestätigungscodes besteht darin, SMS an das Mobiltelefon zu senden, indem die SMS-Schnittstelle eines Drittanbieters aufgerufen wird, die Benutzereingaben zu empfangen und sie mit der vom System generierten Zufallszahlenfolge zu vergleichen

Folienüberprüfungscode

Gleitende Verifizierungscodes werden im Allgemeinen von Drittanbietern von Verifizierungscode-Diensten bereitgestellt, wie etwa Tencent Waterproof Wall, JiTian Verification usw. Im Vergleich zu unserem eigenen Verifizierungscode ist der Verifizierungscode eines Drittanbieters sicherer und zuverlässiger

In diesem Artikel wird Tencent Waterproof Wall als Beispiel verwendet, um den Zugriff auf einen gleitenden Überprüfungscodedienst eines Drittanbieters in einem Front-End- und Back-End-Trennungsprojekt einer Kombination aus vue und drf aufzuzeichnen.

2. Verifizierungsprozess

Das Front-End- und Back-End-Anrufsequenzdiagramm der Überprüfung sieht wie folgt aus (das Bild stammt aus dem offiziellen Dokument des Tencent-Überprüfungscodes).

3. Verifizierung erstellen

Melden Sie sich zunächst bei der Tencent Cloud-Konsole an, um einen Cloud-API-Schlüssel zu erstellen. Wählen Sie in der linken Navigationsleiste [Zugriffsverwaltung] > [API-Schlüsselverwaltung], um die Seite „API-Schlüsselverwaltung“ aufzurufen, und klicken Sie auf [Neuer Schlüssel], um einen Schlüssel zu erstellen.

Rufen Sie dann die Bestätigungscode-Konsole auf, klicken Sie auf [Neue Bestätigung], geben Sie den Bestätigungsnamen, den Bestätigungsdomänennamen, den Bestätigungskanal (Web- oder Miniprogramm-Plug-In) und das Bestätigungsszenario entsprechend Ihren Anforderungen ein und klicken Sie nach dem Ausfüllen auf [OK], um die Erstellung der Bestätigung abzuschließen.

Überprüfen Sie abschließend die Ressourceninformationen, für die Sie sich beworben haben.

4. Front-End-Code

4.1 Core-JS-Dateien hinzufügen

Importieren Sie die Front-End-Core js Datei der wasserdichten Wand mithilfe script Tags in index.html im Stammverzeichnis des Projekts.

index.html

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1.0">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <Titel>opsweb</Titel>
  </Kopf>
  <Text>
    <div id="app"></div>
    <!-- erstellte Dateien werden automatisch eingefügt -->
  </body>
</html>

Oder importieren Sie es in src/main.js Vor dem import müssen Sie die obige Core-JS-Datei in das statische Dateiverzeichnis des Projekts herunterladen

// Importieren Sie die Core-JS-Datei des Verifizierungscodes für wasserdichte Wände. import "../static/js/TCaptcha";

4.2 Konfiguration hinzufügen

Konfiguration in src/settings.js hinzufügen

Standard exportieren {
  HOST: 'http://opsapi.ssgeek.com:8000', // Backend-API-Adresse TC_captcha:{
    app_id: "2020427221", // Tencent Waterproof Wall APPID-Konfiguration},
}

4.3 Komponentenmodifikation

Ändern Sie die vue Komponente Login.vue auf der Anmeldeseite, binden Sie die Anmeldeschaltfläche an die benutzerdefinierte Methode zur Anzeige des Bestätigungscodes, lösen Sie zuerst die Anforderung des Bestätigungscodes und dann die Anmeldung aus

template

<Vorlage>
<!--Login-Inhalt beginnt-->
<div Klasse="inp" v-if="login_type==0">
  <input v-model="Benutzername" Typ="Text" Platzhalter="Benutzername" Klasse="Benutzer">
  <input v-model="Passwort" type="Passwort" name="" class="pwd" placeholder="Passwort">
  <div Klasse="rember">
    <p>
      <input v-model="Anmelden" Typ="Kontrollkästchen" Klasse="nein" Name="a"/>
      <span>Passwort merken</span>
    </p>
  </div>
  <button class="login_btn" @click="show_captcha">Anmelden</button>
<!--Ende des Anmeldeinhalts-->
</div>
</Vorlage>

script​

<Skript>
Standard exportieren {
  Name: 'Login',
  Daten() {
    zurückkehren {
      Anmeldetyp: 0,
      erinnere dich an mich: falsch,
      Benutzername: "",
      Passwort: "",
    }
  },
  Methoden: {
    show_captcha() {
      var captcha1 = neues TencentCaptcha(this.$settings.TC_captcha.app_id, res=> {
        /*
        Antwort:
        appid: "2020427221" # APPID des Bestätigungscodes
        randstr: "@GCV" # Zufällige Zeichenfolge, um Duplikate zu vermeiden ret: 0 # 0 bedeutet, dass die Benutzeroperation erfolgreich war, 2 bedeutet, dass der Benutzer das Bestätigungscode-Fenster aktiv schließt ticket: "" # Das Ticket wird nach der Überprüfung an das Backend übermittelt und auf dem Bestätigungscode-Server verarbeitet */
        // konsole.log(res);
        dies.$axios.get(`${this.$settings.HOST}/users/captcha/`, {
          Parameter: {
            Ticket: Res.Ticket,
            randstr: res.randstr,
          }
        }).dann(Antwort=>{
          wenn(Antwort.Daten.Detail){
            // Mit der Anmeldung fortfahren this.login();
          }
        }).fangen(Fehler=>{
          this.$message.error("Entschuldigung, Bestätigungscode ist fehlgeschlagen!");
        });
      });
      captcha1.show();
    },
    anmelden() {
      // Bestimmen Sie, ob der Benutzer einen Benutzernamen oder ein Passwort eingibt, andernfalls fordern Sie den Benutzer zur Eingabe auf, if (!this.username) {
        this.$message.error('Bitte geben Sie Ihren Benutzernamen ein!')
      } sonst wenn (!dieses.Passwort) {
        this.$message.error('Bitte geben Sie Ihr Passwort ein!')
      } anders {
        // Senden Sie eine Post-Anfrage mit Benutzername und Passwort this.$axios.post(`${this.$settings.HOST}/users/login/`, {
          Benutzername: dieser.Benutzername,
          Passwort: dieses.Passwort,
        }).then((res) => {
          //Token speichern
          wenn (dies.erinnere_mich) {
            localStorage.token = res.data.token;
            sessionStorage.removeItem('Token')
          } anders {
            : Sitzungsstorage.token = res.data.token;
            localStorage.removeItem('Token')
          }
          // Zur Startseite springen this.$router.push('/hippo/showcenter')
        }).catch((error) => { // Erfassen Sie den von der Anfrage zurückgegebenen Fehler, 4xx, 5xx
          this.$message.error('Der Benutzername oder das Passwort ist falsch, bitte erneut eingeben!')
        })
      }
    },
  },
};

5. Backend-Code

Entsprechende Betriebsanweisungen finden Sie im offiziellen Beispiel: https://007.qq.com/python-access.html

5.1 Konfiguration hinzufügen

Konfigurieren Sie die von der Tencent Verification Code Console angezeigten Überprüfungsinformationen in der Konfigurationsdatei des DRF-Backend-Codes

# Tencent wasserdichte Wandkonfiguration TENCENT_CAPTCHA = {
    "GATEWAY": "https://ssl.captcha.qq.com/ticket/verify", # Verifizierungscode-Verifizierungsadresse "APPID": "2020427221", # APPID der Verifizierungscode-Anwendung
    "App_Secret_Key": "0mnAr1EpNTjm63fQgKPU87w**", # AppSecretKey der Verifizierungscode-Anwendung
}

5.2 Bestätigung erhalten und zurücksenden

Schreiben Sie eine gemeinsame view des Benutzerbestätigungscodes in der Benutzer app

von rest_framework.views importiere APIView
von rest_framework.response importiere Antwort
vom Rest_Framework-Importstatus
aus django.conf Importeinstellungen
von urllib.parse importiere urlencode
von urllib.request importiere urlopen
JSON importieren
SSL importieren


# Erstellen Sie hier Ihre Ansichten.
Klasse CaptchaAPIView(APIView):
    """Bestätigungscode"""
    ssl._create_default_https_context = ssl._create_unverified_context

    def get(selbst, Anfrage):
        """Vom Client übermittelte Informationen zum Bestätigungscode erhalten"""
        Parameter = {
            "Hilfe": Einstellungen.TENCENT_CAPTCHA.get("APPID"),
            "AppSecretKey": Einstellungen.TENCENT_CAPTCHA.get("App_Secret_Key"),
            "Ticket": request.query_params.get("Ticket"),
            "Randstr": request.query_params.get("randstr"),
            "BenutzerIP": request._request.META.get("REMOTE_ADDR")
        }
        # Konvertieren Sie die Wörterbuchdaten in das Abfragezeichenfolgenformat der Adressleiste# aid=xxx&AppSecretKey=xxx&xxxxx
        Parameter = URL-Code(Parameter)
        # drucken(Parameter)
        url = Einstellungen.TENCENT_CAPTCHA.get("GATEWAY")
        # Senden Sie eine HTTP-Get-Anfrage f = urlopen("%s?%s" % (url, params))
        # https://ssl.captcha.qq.com/ticket/verify?aid=xxx&AppSecretKey=xxx&xxxxx
        # f.read() Lesen Sie die Antwortinformationen content = f.read()
        res = json.loads(Inhalt)
        # drucken(Auflösung)
        wenn int(res.get("Antwort")) == 1:
            # Überprüfung erfolgreich return Response({"detail": 1})
        anders:
            # Überprüfung fehlgeschlagen return Response({"detail": 0}, status=status.HTTP_400_BAD_REQUEST)

5.3 URL-Routing hinzufügen

Fügen Sie abschließend das Backend-URL-Routing hinzu, damit das Frontend Anfragen senden kann

von django.urls Importpfad
von rest_framework_jwt.views importiere acquire_jwt_token
aus. Ansichten importieren

URL-Muster = [
    Pfad('login/', JWT-Token abrufen),
    Pfad('captcha/', views.CaptchaAPIView.as_view()), # Überprüfungscode-Überprüfung]

6. Führen Sie den Test durch

Der endgültige Effekt ist wie folgt

Im Hintergrund des Tencent-Bestätigungscodes können Sie ein detailliertes Diagramm mit Anforderungsinformationen sehen

Dies ist das Ende dieses Artikels über die Implementierung von Vue+DRF+Drittanbieter-Zugriff auf gleitende Verifizierungscodes. Weitere relevante Inhalte zu Vue+DRF+Drittanbieter-Zugriff auf gleitende Verifizierungscodes 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!

Das könnte Sie auch interessieren:
  • Vue implementiert Login-Schiebepuzzle-Verifizierung
  • Vue implementiert die Bildschiebeüberprüfung
  • Vue implementiert eine verschiebbare Überprüfungsleiste
  • Vue implementiert eine gleitende Überprüfungsfunktion
  • Wie ruft Vue den gleitenden Überprüfungscode von Tencent Cloud im Projekt auf?
  • Detaillierte Erläuterung der Verwendung des gleitenden Überprüfungscodes des Vue-Plugins
  • Schiebeüberprüfungscode für Vue-Plugin
  • Vue implementiert eine gleitende Überprüfung von unten bis zum Ende
  • Verwenden Sie Vue, um die Funktion für den gleitenden Bestätigungscode zu implementieren
  • Vue - benutzerdefinierte Entwicklung - Komponente zur Überprüfung von verschiebbaren Bildern

<<:  Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle

>>:  Auszeichnungssprache - Stylesheets drucken

Artikel empfehlen

So erreichen Sie eine nahtlose Token-Aktualisierung

Inhaltsverzeichnis 1. Nachfrage Methode 1 Methode...

Der Speicherplatz wird in den Browsern IE, Firefox und Chrome unterschiedlich angezeigt

&nbsp;&nbsp;Die Anzeigeeffekte in den Brow...

JavaScript-Objekte (Details)

Inhaltsverzeichnis JavaScript-Objekte 1. Definiti...

So installieren Sie Docker mit YUM

Wie in der folgenden Abbildung dargestellt: Wenn ...

MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails

MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...

Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...

Grafisches Tutorial zur Installation von MySQL 5.7.17 (Windows)

Ich habe vor Kurzem mit dem Studium der Datenbank...

Tiefgreifendes Verständnis des Statusübergangs des MySQL-Master-Slave-Replikationsthreads

Vorwort Das Grundprinzip der MySQL-Master-Slave-R...

Vue implementiert eine teilweise Aktualisierung der Seite (Router-View-Seitenaktualisierung)

Verwenden provide+inject in Vue Zuerst müssen Sie...

So installieren Sie die Yum-Quelle und laden die Befehle rz und sz unter CentOS7 hoch und herunter (mit Bildern)

** Detaillierte grafische Anweisungen zur Install...

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Übergeben von Werten zwischen Miniprogrammseiten ...

So verwenden Sie nginx zum Konfigurieren des Zugriffs auf wgcloud

Die Nginx-Konfiguration ist wie folgt: Wie http:/...

Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren

1. Installieren Sie Howdy: Howdy-Projektadresse s...

Zeigen Sie die abhängigen Bibliotheken von so oder ausführbaren Programmen unter Linux an

Anzeigen der abhängigen Bibliotheken von so oder ...

So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel

Schauen Sie sich zuerst den Code an Code kopieren ...