Comment implémenter la connexion par numéro de téléphone mobile dans Uniapp

À l'ère de l'Internet mobile d'aujourd'hui, diverses applications nécessitent que les utilisateurs s'inscrivent et se connectent avant de pouvoir être utilisées, et la plupart des méthodes de connexion aux applications sont la connexion par compte et par mot de passe. Bien que le mot de passe du compte soit très sécurisé, il n'est pas pratique à utiliser pour les utilisateurs, en particulier pour les utilisateurs d'appareils mobiles, la saisie du mot de passe du compte sera plus difficile que sur un ordinateur.

Ainsi, pour une meilleure expérience utilisateur, de nombreuses applications proposent un moyen de se connecter avec un code de vérification du numéro de téléphone mobile. En tant que cadre de développement multiplateforme, uniapp fournit des outils et des composants pratiques pour aider les développeurs à se connecter rapidement avec des numéros de téléphone mobile.

Apprenons comment uniapp implémente la connexion par code de vérification du numéro de téléphone mobile :

Étape 1 : Créer un projet uni-application

Tout d'abord, nous devons créer un projet uni-application (vous pouvez l'ignorer si vous avez déjà un projet) cette étape). Lors de la création d'un projet, vous devez sélectionner le modèle uni-app comme modèle, car le modèle uni-app contient de nombreux composants et plug-ins uni-app intégrés, ce qui facilite notre développement rapide.

Étape 2 : Installer les plug-ins

Ensuite, nous devons installer les plug-ins Heureusement, uni-app fournit un marché de plug-ins où nous pouvons trouver les plug-ins dont nous avons besoin. Le plug-in que nous devons utiliser dans cet article est uview-ui, un framework d'interface utilisateur basé sur uni-app. Il prend en charge divers composants d'interface utilisateur et nous permet de créer rapidement des pages.

Il suffit de saisir la commande suivante sur la ligne de commande pour installer :

npm install uview-ui

Étape 3 : Concevoir la page de connexion

Nous devons d'abord concevoir une page de connexion Ici, nous concevons d'abord une page de connexion simple, comprenant une entrée. et un bouton de connexion, comme indiqué ci-dessous :

Étape 4 : Envoyer le code de vérification

Nous devons cliquer sur le bouton "Obtenir le code de vérification" une fois que l'utilisateur a entré son numéro de téléphone mobile pour demander le code de vérification au serveur. . Il y a plusieurs étapes pour mettre en œuvre cette fonction :

1. L'utilisateur saisit le numéro de téléphone mobile et détermine si le numéro de téléphone mobile est vide et dans le bon format de numéro de téléphone mobile
2. Cliquez sur le bouton « Obtenir le code de vérification » pour envoyer un message ; demande au serveur un code de vérification ;
3. Le serveur envoie un code de vérification au numéro de téléphone mobile ;
4. Le client (notre application) reçoit le code de vérification et l'enregistre localement.

// 在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>

Étape 5 : Connexion

Une fois que l'utilisateur a entré le numéro de téléphone mobile et le code de vérification, cliquez sur le bouton "Connexion". Nous devons envoyer une demande au serveur pour vous connecter. sont corrects, le serveur renvoie un code d'autorisation que nous devons utiliser pour accéder à l'interface du serveur.

Pour utiliser une page publiquement, nous devons enregistrer la valeur du code dans une variable globale. Ici, nous utilisons Vuex pour l'enregistrer :

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

Ajoutez ensuite le code aux informations de l'utilisateur connecté :

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

If. la connexion est réussie, nous pouvons Le code d'autorisation est stocké dans le cache local ou dans le cookie :

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

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

Enfin, nous pouvons utiliser le token enregistré par le client pour accéder à d'autres interfaces du serveur afin d'effectuer plus d'opérations.

À ce stade, nous avons terminé toutes les étapes permettant à Uniapp de mettre en œuvre la connexion par numéro de téléphone mobile. L'ensemble du processus comprend trois parties : la conception de la page de connexion, l'envoi du code de vérification et la connexion. J'espère que cet article pourra vous aider à maîtriser la méthode d'uniapp pour vous connecter avec un numéro de téléphone mobile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!