vue_drf implementiert SMS-Bestätigungscode

# -*- Kodierung:utf-8 -*-

von .CCPRestSDK importiere REST

# Hinweis: Nachdem Sie sich bei der Cloud-Kommunikationswebsite angemeldet haben, können Sie die ACCOUNT-SID des Hauptkontos des Entwicklers in der „Konsolenanwendung“ sehen.
_accountSid = "xxxxxxxxxxxxx"
# 8a216da863f8e6c20164139687e80c1b
# Beschreibung: Das Hauptkonto-Token. Nach der Anmeldung bei der Cloud-Kommunikationswebsite können Sie das AUTH-TOKEN des Hauptkontos des Entwicklers in der Konsolenanwendung sehen
_accountToken = "xxxxxxxxxxxxxxx"
# 6dd01b2b60104b3dbc88b2b74158bac6
# Bitte verwenden Sie die APPID auf der Startseite der Verwaltungskonsole oder die APPID der von Ihnen selbst erstellten Anwendung
_appId = '8aaf0708697b6beb01699f3c645f1766'
# 8a216da863f8e6c20164139688400c21
# Hinweis: Anforderungsadresse. Die Produktionsumgebung ist als app.cloopen.com konfiguriert
_serverIP = "sandboxapp.cloopen.com"

# Beschreibung: Anforderungsport, die Produktionsumgebung ist 8883
_serverPort = "8883"

# Hinweis: Die Versionsnummer der REST-API bleibt unverändert_softVersion = '2013-12-26'

#Der folgende Inhalt muss nicht geändert werden, Klasse CCP (Objekt):
    """Hilfsklasse zum Versenden von SMS-Nachrichten"""

    def __new__(cls, *args, **kwargs):
        # Prüfen Sie, ob ein Klassenattribut _instance vorhanden ist. _instance ist das einzige Objekt der Klasse CCP, also ein Singleton, wenn nicht hasattr(CCP, "_instance"):
            cls._instance = super(CCP, cls).__new__(cls, *args, **kwargs)
            cls._instance.rest = REST(_serverIP, _serverPort, _softVersion)
            cls._instance.rest.setAccount(_accountSid, _accountToken)
            cls._instance.rest.setAppId(_appId)
        returniere cls._instance

    def send_template_sms(selbst, an, Daten, temp_id):
        """Vorlage-SMS senden"""
        # @param zur Handynummer # @param datas Das Inhaltsdatenformat ist ein Array, zum Beispiel: {'12','34'}, wenn kein Ersatz erforderlich ist, füllen Sie bitte '' aus
        # @param temp_id Vorlagen-ID
        Ergebnis = self.rest.sendTemplateSMS(an, Daten, temp_id)
        # Wenn Cloud Communication die SMS erfolgreich sendet, ist der Wert des Felds statuCode im zurückgegebenen Wörterbuchdatenergebnis "000000"
        wenn result.get("statusCode") == "000000":
            # Return 0 bedeutet, dass die SMS-Nachricht erfolgreich gesendet wurde return 0
        anders:
            # Return -1 bedeutet, dass das Senden von return -1 fehlgeschlagen ist


wenn __name__ == '__main__':
    ccp = CCP()
    # Hinweis: Die SMS-Vorlagennummer für den Test ist 1
    ccp.send_template_sms('15914397060', ['1234', 5], 1)

von .models importiere Benutzer
vom Rest_Framework-Importstatus
von lufei_drf.libs.yuntongxun.sms importiere CCP
von django_redis importiere get_redis_connection
Klasse SMSCodeAPIView(APIView):
    def get(selbst, Anfrage):
        # 1. Holen Sie sich die Telefonnummer über die Abfragezeichenfolge phone = request.query_params.get("phone")
        ty = request.query_params.get('Typ')
        # 2. Verifizieren Sie die Handynummer mit dem Verifizierungscode, bevor Sie die SMS senden, wenn ty=='register':
            versuchen:
                Benutzer.Objekte.get(Telefon=Telefon)
                return Response({"message": "Die aktuelle Telefonnummer wurde registriert"}, status=status.HTTP_400_BAD_REQUEST)
            außer:
                passieren
        redis = get_redis_connection("SMS-Code")
        wenn redis.get("times_%s" % Telefon):
            return Response({"message": "Die aktuelle Telefonnummer hat innerhalb einer Minute eine Textnachricht gesendet"}, status=status.HTTP_400_BAD_REQUEST)

        # 3. Verwenden Sie die Mobiltelefonnummer, um einen SMS-Bestätigungscode zu senden. # Generieren Sie einen SMS-Bestätigungscode sms_code = "%04d" % random.randint(0, 9999)
        ccp = CCP()
        Ergebnis = ccp.send_template_sms(Telefon,[SMS-Code,"5 Minuten"],1)

        wenn Ergebnis == 0:
            #SMS erfolgreich senden, SMS-Bestätigungscode in der Redis-Datenbank speichern#Pipeline-Operation öffnen pl = redis.pipeline()
            pl.multi() # Als nächstes werden mehrere Befehle in der Pipeline ausgeführt # setex(Variablenname, Gültigkeitsdauer [Sekunden], Wert)
            SMS_EXPIRE_TIME = 5 * 60 # Die Gültigkeitsdauer des SMS-Bestätigungscodes SMS_TIMES = 60 # Das Intervall zwischen dem Senden von SMS # Fügen Sie den ursprünglichen, sofort ausgeführten Befehl in die Pipeline ein pl.setex("sms_%s" % phone, SMS_EXPIRE_TIME, sms_code)
            pl.setex("times_%s" % Telefon, SMS_TIMES, 1)

            # Vereinheitlichen Sie die Ausführung von Befehlen in der Pipeline pl.execute()

        # 4. Antwortdaten an den Client return Response({"message":result},status=status.HTTP_200_OK)

von django.urls Importpfad
# Von jwt intern implementierte Anmeldeansicht von rest_framework_jwt.views importiere acquire_jwt_token
aus .views importiere SMSCodeAPIView,

urlpatterns=[
    Pfad(r"login/", JWT-Token abrufen),
    Pfad('sms/', SMSCodeAPIView.as_view()),
]

von django.contrib.auth.backends importiere ModelBackend
von django_redis importiere get_redis_connection


def jwt_response_payload_handler(Token, Benutzer=Keine, Anfrage=Keine):
    """
    Benutzerdefinierte JWT-Authentifizierung gibt erfolgreich Daten zurück: JWT per Token zurückgegeben
    :user Aktuell angemeldete Benutzerinformationen [Objekt]
    :request Die aktuell vom Client übermittelten Daten"""
    zurückkehren {
        'Token': Zeichen,
        'id': Benutzer-ID,
        'Benutzername': Benutzer.Benutzername,
    }

#Realisieren Sie den multifunktionalen Login-Import
from .models import User#Finden Sie heraus, ob der Benutzername oder die Telefonnummer bereits unser Benutzer ist def get_user_by_account(account):
    """
    Holen Sie sich das Benutzerobjekt basierend auf dem Konto: param account: Konto, das ein Benutzername oder eine Telefonnummer sein kann: return: Benutzerobjekt oder Keine
    """
    versuchen:
        wenn re.match('^1[3-9]\d{9}$', Konto):
            # Das Konto ist eine Mobiltelefonnummer user = User.objects.get(phone=account)
        anders:
            # Das Konto ist der Benutzername user = User.objects.get(username=account)
    außer User.DoesNotExist:
        return Keine
    anders:
        Benutzer zurückgeben
#Überprüfen Sie, ob die vom Benutzer übermittelte SMS-Nachricht mit den Informationen übereinstimmt, die wir in Redis def sms_code_verify (Telefon, SMS-Code) gespeichert haben:
    redis = get_redis_connection("SMS-Code")
    Wert=redis.get('sms_%s'%phone).decode()
    wenn Wert==SMS-Code:
        returniere True
    returniere False

Klasse UsernameMobileAuthBackend(ModelBackend):
    """
    Passen Sie die Authentifizierung per Benutzernamen oder Telefonnummer an"""
    def authentifizieren(selbst, Anfrage, Benutzername=Keine, Passwort=Keines, **kwargs):
        Benutzer = get_user_by_account (Benutzername) #Wenn die Kennwortlänge 4 beträgt, gehe ich davon aus, dass es sich um eine Mobiltelefonnummer und einen SMS-Bestätigungscode für die Anmeldung handelt, wenn Länge (Kennwort) == 4 und Benutzer nicht None ist und sms_code_verify (Benutzername, Kennwort):
            Benutzer zurückgeben
        elif-Benutzer ist nicht None und user.check_password(Passwort):
            Benutzer zurückgeben
        anders:
            return Keine

<Vorlage>
  <div id="Anmelden">
    <div Klasse="Box">
      <p>
        <img src="../../assets/login_title.png" alt="">
      </p>
      <p class="sign">Helfen Sie ehrgeizigen jungen Menschen, durch hartes Lernen einen anständigen Job und ein anständiges Leben zu bekommen! </p>
      <div Klasse="Passwort" v-show="num==1">
        <div Klasse="Titel2 Cursor">
          <span @click="num=1" :class="num==1 ? 'show' :''">Passwort-Login</span>
              <span @click="num=2" :class="num==2 ? 'show' :''">SMS-Anmeldung</span>
        </div>
        <input v-model="Benutzername" type="text" class="ss" placeholder="Benutzername/Mobilnummer">
        <input v-model="Passwort" type="Passwort" class="ss" placeholder="Passwort">
        <div id="captcha" class="ss"></div>
        <div Klasse="t1">
          <div Klasse="links">
            <input type="checkbox" class="cursor" v-model="erinnern">
            <div class="remenber cursor" >Passwort merken</div>
          </div>
          <div class="right cursor">Passwort vergessen</div>
        </div>
        <button class="login_btn" @click="login1">Anmelden</button>
        <div Klasse="registrieren">
          Kein Konto<span><router-link to="/register">Jetzt registrieren</router-link></span>
        </div>
      </div>
      <div Klasse="Nachricht" v-show="num==2">
        <div Klasse="Titel2 Cursor">
          <span @click="num=1" :class="num==1 ? 'show' :''">Passwort-Login</span>
              <span @click="num=2" :class="num==2 ? 'show' :''">SMS-Anmeldung</span>
        </div>
        <input v-model="phone" type="text" class="ss" placeholder="Telefonnummer">
        <div Klasse="SMS">
          <Eingabe v-Modell="sms_code" Typ="text" Klasse="ss">
          <div class="Inhalt" @click="get_sms_code">{{Inhalt}}</div>
        </div>
        <button class="login_btn" @click="sms_login">Anmelden</button>
        <div Klasse="registrieren">
          Kein Konto<span><router-link to="/register">Jetzt registrieren</router-link></span>
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name:'Anmelden',
    Daten:Funktion () {
      zurückkehren {
        Zahl: 1,
        Benutzername:'',
        Passwort:'',
        erinnere dich:'',
        Status:'',
        Inhalt: 'Bestätigungscode abrufen',
        Telefon:'',
        SMS-Code:'',
      }
    },
    Methoden:{
      //Mobiltelefonnummer und SMS-Bestätigungscode anmelden sms_login:function(){
        lass _dies=dies;
        dies.$axios.post('http://127.0.0.1:8000/user/login/',{
            'Benutzername':_dieses.Telefon,
            'Passwort':_dieser.SMS-Code,
          },{responseType:'json'})
          .dann(Funktion (res) {
            Sitzungsstorage.token=res.data.token;
             _this.$router.go(-1);
          }).catch(Funktion (Fehler) {
          console.log(Fehler.Antwort)
        });
      },
      //SMS-Bestätigungscode abrufenget_sms_code:function(){
        sei reg = /1[3-9]{2}\d{8}/;
        wenn( reg.test(dieses.Telefon) ){
          if(this.content == "Bestätigungscode abrufen"){
            dieser.Inhalt=60;
            lass _dies=dies;
            lass tt = setzeIntervall(Funktion () {
              wenn (_dieser.Inhalt>=1){
                _dieser.Inhalt--
              }
              anders {
                _this.content='Bestätigungscode erhalten';
                Löschintervall (tt)
              }
            },1000);
            dies.$axios.get('http://127.0.0.1:8000/user/sms?type=login&phone='+this.phone)
              .dann(Funktion (res) {
                wenn(res.data.message==0){
                  alert('Bestätigungscode erfolgreich gesendet')
                }
              }).catch(Funktion (Fehler) {
                console.log(Fehler.Antwort)
              })
          }
        }anders {
          alert('Die Handynummer ist falsch')
        }
      },
      //Benutzername und Passwort login1:function () {
        wenn (dieser.status==1){
          lass _dies=dies;
          dies.$axios.post('http://127.0.0.1:8000/user/login/',{
            'Benutzername':_dieser.Benutzername,
            'Passwort':_dieses.Passwort,
          },{responseType:'json'})
          .dann(Funktion (res) {
            wenn (res.status==200){
              wenn (_this.member){
                sessionStorage.removeItem('Token');
                localStorage.token=res.data.token;
              }
              anders {
                localStorage.removeItem('Token');
                sessionStorage.token=res.data.token
              }
              _this.$router.go(-1);
            }
            anders {
              alert('Falscher Benutzername oder Passwort')
            }
          })
          .catch(Funktion (Fehler) {
            Warnung(Fehler.Antwort.Daten.keine_Feldfehler[0]);
            Konsole.log(Fehler.Antwort.Daten.keine_Feldfehler);
          });
        }
        anders {
          alert('Fehler beim Bestätigungscode')
        }
      },
      handlerPopup:Funktion (CaptchaObj) {
        lass _dies=dies;
        captchaObj.onSuccess(Funktion () {
           var validieren = captchaObj.getValidate();
           _this.$axios.post("http://127.0.0.1:8000/user/yzm/",{
                    geetest_challenge: validieren.geetest_challenge,
                    geetest_validate: validieren.geetest_validate,
                    geetest_seccode: validieren.geetest_seccode,
                },{
                  Antworttyp: „json“,
            }).dann(Funktion (res) {
              _this.status=res.data.status
           }).catch(Funktion (Fehler) {
             console.log(Fehler)
           })
        });
        captchaObj.appendTo("#captcha");
      }
    },
    erstellt:Funktion () {
      lass _dies=dies;
      dies.$axios.get("http://127.0.0.1:8000/user/yzm")
        .dann(Funktion (res) {
          let Daten = JSON.parse(res.data);
          initGeetest({
                Breite: '350px',
                gt: data.gt,
                Herausforderung: data.challenge,
                Produkt: "Popup",
                offline: !data.success
            }, _this.handlerPopup);
        }).catch(Funktion (Fehler) {
          console.log(Fehler)
      })
    }
    
  }
</Skript>

<Stilbereich>
#Login{
  Hintergrund: URL ('../../assets/Login.jpg');
  Hintergrundgröße: 100 % 100 %;
  Höhe: 100%;
  Position: fest;
  Breite: 100 %;
}
.Kasten{
  Breite: 500px;
  Höhe: 600px;
  Rand: 0 automatisch;
  Rand oben: 200px;
  Textausrichtung: zentriert;
}
.box img{
  Breite: 190px;
  Höhe: automatisch;
}
.box p{
  Rand: 0;
}
.Zeichen{
  Schriftgröße: 18px;
  Farbe: #fff;
  Buchstabenabstand: .29px;
  Polsterung oben: 10px;
  Polsterung unten: 50px;
}
.passieren{
  Breite: 400px;
  Höhe: 460px;
  Rand: 0 automatisch;
  Hintergrundfarbe: weiß;
  Rahmenradius: 4px;
}
.Nachricht{
  Breite: 400px;
  Höhe: 390px;
  Rand: 0 automatisch;
  Hintergrundfarbe: weiß;
  Rahmenradius: 4px;
}
.title2{
  Breite: 350px;
  Schriftgröße: 20px;
  Farbe: #9b9b9b;
  Polsterung oben: 50px;
  Rahmen unten: 1px durchgezogen #e6e6e6;
  Rand: 0 automatisch;
  Rand unten: 20px;
}
.ss{
  Breite: 350px;
  Höhe: 45px;
  Rahmenradius: 4px;
  Rand: 1px durchgezogen #d9d9d9;
  Texteinzug: 20px;
  Schriftgröße: 14px;
  Rand unten: 20px;
}
.pass .t1{
  Breite: 350px;
  Rand: 0 automatisch;
  Höhe: 20px;
  Zeilenhöhe: 20px;
  Schriftgröße: 12px;
  Textausrichtung: zentriert;
  Position: relativ;
}
.t1 .rechts{
  Position: absolut;
  rechts: 0;
}
.erinnere dich{
  Anzeige: Inline-Block;
  Position: absolut;
  links: 20px;
}
.linke Eingabe{
  Position: absolut;
  links: 0;
  Breite: 14px;
  Höhe: 14px;
}
.login_btn{
  Breite: 350px;
  Höhe: 45px;
  Hintergrund: #ffc210;
  Rahmenradius: 5px;
  Schriftgröße: 16px;
  Farbe: #fff;
  Buchstabenabstand: .26px;
  Rand oben: 30px;
  Gliederung: keine;
  Rand: keiner;
  Cursor: Zeiger;
}
.registrieren{
  Rand oben: 20px;
  Schriftgröße: 14px;
  Farbe: #9b9b9b;
}
.register span{
  Farbe: #ffc210;
  Cursor: Zeiger;
}
.Cursor{
  Cursor: Zeiger;
}
.zeigen{
  Anzeige: Inline-Block;
  Polsterung unten: 5px;
  Rahmen unten: 2px durchgehend orange;
  Farbe: #4a4a4a;
}
A{
  Textdekoration: keine;
  Farbe: #ffc210;
}
#captcha{
  Rand: 0 automatisch;
  Höhe: 44px;
}
.sms{
  Position: relativ;
  Breite: 350px;
  Höhe: 45px;
  Rand: 0 automatisch;
  Zeilenhöhe: 45px;
}
.sms .inhalt{
  Position: absolut;
  oben: 0;
  rechts: 10px;
  Farbe: orange;
  Rahmen links: 1px durchgehend orange;
  Polsterung links: 10px;
  Cursor: Zeiger;

}
</Stil>

//SMS-Bestätigungscode abrufenget_sms_code:function(){
        let reg = /1[3-9]{2}\d{8}/; //Wenn die Telefonnummer eine echte Telefonnummer ist, kann der Bestätigungscode abgerufen werden if( reg.test(this.phone) ){ //Wenn auf der Seite „Bestätigungscode abrufen“ angezeigt wird, kann die Anforderung des Bestätigungscodes ausgelöst werden. Wenn der Countdown beginnt, kann durch Klicken keine Anforderung des Bestätigungscodes ausgelöst werden if(this.content == "Bestätigungscode abrufen"){ //Nachdem die Anforderung des Bestätigungscodes erfolgreich gesendet wurde, startet der Countdown für 60 Sekunden this.content=60;
            lass _dies=dies;
            lass tt = setzeIntervall(Funktion () {
              wenn (_dieser.Inhalt>=1){
                _dieser.Inhalt--
              }
              anders {
                _this.content='Bestätigungscode erhalten';
                Löschintervall (tt)
              }
            },1000);
            dies.$axios.get('http://127.0.0.1:8000/user/sms?type=login&phone='+this.phone)
              .dann(Funktion (res) {
                wenn(res.data.message==0){
                  alert('Bestätigungscode erfolgreich gesendet')
                }
              }).catch(Funktion (Fehler) {
                console.log(Fehler.Antwort)
              })
          }
        }anders {
          alert('Die Handynummer ist falsch')
        }
      },

//SMS-Bestätigungscode abrufenget_sms_code:function(){
        let reg = /1[3-9]{2}\d{8}/; //Wenn die Telefonnummer eine echte Telefonnummer ist, kann der Bestätigungscode abgerufen werden if( reg.test(this.phone) ){ //Wenn auf der Seite „Bestätigungscode abrufen“ angezeigt wird, kann die Anforderung des Bestätigungscodes ausgelöst werden. Wenn der Countdown beginnt, kann durch Klicken keine Anforderung des Bestätigungscodes ausgelöst werden if(this.content == "Bestätigungscode abrufen"){ //Nachdem die Anforderung des Bestätigungscodes erfolgreich gesendet wurde, startet der Countdown für 60 Sekunden this.content=60;
            lass _dies=dies;
            lass tt = setzeIntervall(Funktion () {
              wenn (_dieser.Inhalt>=1){
                _dieser.Inhalt--
              }
              anders {
                _this.content='Bestätigungscode erhalten';
                Intervall löschen(tt)
              }
            },1000);
            dies.$axios.get('http://127.0.0.1:8000/user/sms?type=login&phone='+this.phone)
              .dann(Funktion (res) {
                wenn(res.data.message==0){
                  alert('Bestätigungscode erfolgreich gesendet')
                }
              }).catch(Funktion (Fehler) {
                console.log(Fehler.Antwort)
              })
          }
        }anders {
          alert('Die Handynummer ist falsch')
        }
      },