So implementieren Sie die Anmeldung über eine Mobiltelefonnummer in Uniapp

Im heutigen Zeitalter des mobilen Internets erfordern verschiedene Anwendungen, dass Benutzer sich registrieren und anmelden, bevor sie verwendet werden können, und die meisten Anwendungsanmeldemethoden sind Konto- und Passwortanmeldung. Obwohl das Kontopasswort sehr sicher ist, ist die Bedienung für Benutzer umständlich. Insbesondere für Benutzer mobiler Geräte ist die Eingabe des Kontopassworts schwieriger als auf einem Computer.

Für ein besseres Benutzererlebnis bieten viele Anwendungen die Möglichkeit, sich mit einem Bestätigungscode für die Mobiltelefonnummer anzumelden. Als plattformübergreifendes Entwicklungsframework bietet uniapp praktische Tools und Komponenten, mit denen sich Entwickler schnell mit Mobiltelefonnummern anmelden können.

Erfahren wir, wie uniapp die Anmeldung mit dem Mobiltelefonnummern-Verifizierungscode implementiert:

Schritt 1: Erstellen Sie ein Uni-App-Projekt

Zuerst müssen wir ein Uni-App-Projekt erstellen (Sie können es überspringen, wenn Sie bereits ein Projekt haben) diesen Schritt). Beim Erstellen eines Projekts müssen Sie die Uni-App-Vorlage als Vorlage auswählen, da die Uni-App-Vorlage über viele integrierte Uni-App-Komponenten und Plug-Ins verfügt, was unsere schnelle Entwicklung erleichtert.

Schritt 2: Plug-Ins installieren

Als nächstes müssen wir Plug-Ins installieren. Glücklicherweise bietet uni-app einen Plug-In-Markt, in dem wir die Plug-Ins finden können, die wir benötigen. Das Plug-in, das wir in diesem Artikel verwenden müssen, ist uview-ui, ein auf Uni-App basierendes UI-Framework. Es unterstützt verschiedene UI-Komponenten und ermöglicht uns die schnelle Erstellung von Seiten.

Wir müssen zur Installation nur den folgenden Befehl in der Befehlszeile eingeben:

npm install uview-ui

Schritt 3: Anmeldeseite entwerfen

Wir müssen zunächst eine einfache Anmeldeseite entwerfen, einschließlich einer Eingabe Feld und eine Anmeldeschaltfläche, wie unten gezeigt:

Schritt 4: Bestätigungscode senden

Wir müssen auf die Schaltfläche „Bestätigungscode abrufen“ klicken, nachdem der Benutzer seine Mobiltelefonnummer eingegeben hat, um den Bestätigungscode vom Server anzufordern . Es gibt mehrere Schritte, um diese Funktion zu implementieren:

1. Der Benutzer gibt die Mobiltelefonnummer ein und stellt fest, ob die Mobiltelefonnummer leer ist und im richtigen Mobiltelefonnummernformat vorliegt.
2. Klicken Sie auf die Schaltfläche „Bestätigungscode abrufen“, um einen zu senden Anfrage an den Server nach Verifizierungscode;
3. Der Server sendet einen Verifizierungscode an die Mobiltelefonnummer
4. Der Client (unsere Anwendung) empfängt den Verifizierungscode und speichert ihn lokal.

// 在login页面中添加一个按钮
<template>
  ...
  <button>获取验证码</button>
  ...
</template>

<script>
  export default {
    data() {
      return {
        phone: &#39;&#39;, // 存储用户输入的手机号
        code: &#39;&#39;, // 存储服务器返回的验证码
      }
    },
    methods: {
      // 发送验证码
      sendCode() {
        if (!this.phone) {
          uni.showToast({
            icon: &#39;none&#39;,
            title: &#39;请输入手机号&#39;
          })
          return
        }
        if (!/^1[3456789]\d{9}$/i.test(this.phone)) {
          uni.showToast({
            icon: &#39;none&#39;,
            title: &#39;请输入正确的手机号&#39;
          })
          return
        }
        // 向服务器发送请求
        uni.request({
          url: &#39;http://localhost:8080/sendCode&#39;,
          method: &#39;POST&#39;,
          header: {
            &#39;Content-Type&#39;: &#39;application/json&#39;
          },
          data: {
            phone: this.phone
          },
          success: (res) => {
            if (res.statusCode === 200) {
              uni.showToast({
                icon: &#39;none&#39;,
                title: &#39;验证码已发送，请注意查收&#39;
              })
              this.code = res.data.code // 保存验证码
            } else {
              uni.showToast({
                icon: &#39;none&#39;,
                title: &#39;发送验证码失败，请重新发送&#39;
              })
            }
          },
          fail: (err) => {
            console.log(err)
          }
        })
      },
    }
  }
</script>

Schritt 5: Anmelden

Nachdem der Benutzer die Mobiltelefonnummer und den Bestätigungscode eingegeben hat, klicken Sie auf die Schaltfläche „Anmelden“. Wir müssen eine Anfrage an den Server senden, um uns anzumelden. Wenn die Mobiltelefonnummer und der Bestätigungscode vorliegen korrekt sind, gibt der Server einen Autorisierungscode zurück. Wir müssen ihn verwenden, um auf die Schnittstelle des Servers zuzugreifen.

Um eine Seite öffentlich zu nutzen, müssen wir den Wert des Codes in einer globalen Variablen speichern. Hier verwenden wir Vuex, um ihn zu speichern:

// 在store/index.js文件中新增一个state
export default new Vuex.Store({
  state: {
    code: '', // 存储验证码
  }
  ...
})

Dann fügen wir den Code zu den angemeldeten Benutzerinformationen hinzu:

// 用户信息
const userInfo = {
  phone: this.phone,
  code: this.$store.state.code
}

If Wenn die Anmeldung erfolgreich ist, können wir den Autorisierungscode im lokalen Cache oder Cookie speichern:

// 保存授权信息
uni.setStorageSync('token', res.data.token) // 将token保存到本地

// 获取授权信息
uni.getStorageSync('token') // 获取本地保存的token

Schließlich können wir das vom Client gespeicherte Token verwenden, um auf andere Schnittstellen des Servers zuzugreifen und weitere Vorgänge abzuschließen.

Zu diesem Zeitpunkt haben wir alle Schritte für die Implementierung der Mobiltelefonnummernanmeldung durch uniapp abgeschlossen. Der gesamte Prozess besteht aus drei Teilen: dem Entwerfen der Anmeldeseite, dem Senden des Bestätigungscodes und dem Anmelden. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Methode von uniapp zum Anmelden mit einer Mobiltelefonnummer zu beherrschen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anmeldung über eine Mobiltelefonnummer in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!