Bagaimana untuk melaksanakan log masuk nombor telefon bimbit dalam uniapp

Dalam era Internet mudah alih hari ini, pelbagai aplikasi memerlukan pengguna mendaftar dan log masuk sebelum mereka boleh digunakan, dan kaedah log masuk untuk kebanyakan aplikasi adalah log masuk dengan akaun dan kata laluan. Walaupun kata laluan akaun sangat selamat, ia menyusahkan pengguna untuk beroperasi Terutama bagi pengguna peranti mudah alih, memasukkan kata laluan akaun akan menjadi lebih sukar daripada pada komputer.

Oleh itu, untuk pengalaman pengguna yang lebih baik, banyak aplikasi menyediakan cara untuk log masuk dengan kod pengesahan nombor telefon mudah alih. Sebagai rangka kerja pembangunan merentas platform, uniapp menyediakan alatan dan komponen yang mudah untuk membantu pembangun log masuk dengan pantas menggunakan nombor telefon mudah alih.

Mari kita pelajari cara uniapp melaksanakan log masuk kod pengesahan nombor telefon mudah alih:

Langkah 1: Buat projek uni-app

Pertama, kita perlu mencipta projek uni-app (anda boleh melangkau langkah ini jika anda sudah mempunyai projek). Apabila membuat projek, anda perlu memilih templat uniapl sebagai templat, kerana templat uniapl mempunyai banyak komponen dan pemalam uniapl terbina dalam, yang memudahkan pembangunan pesat kami.

Langkah 2: Pasang pemalam

Seterusnya, kita perlu memasang pemalam Mujurlah, uni-app menyediakan pasaran pemalam di mana kita boleh mencari pemalam yang kita perlukan . Pemalam yang diperlukan untuk artikel ini ialah uview-ui, rangka kerja UI berdasarkan uni-app Ia menyokong pelbagai komponen UI dan membolehkan kami membina halaman dengan cepat.

Kami hanya perlu memasukkan arahan berikut pada baris arahan untuk memasang:

npm install uview-ui

Langkah 3: Reka halaman log masuk

Kami perlu mereka bentuk halaman log masuk pertama, di sini Kami mula-mula mereka bentuk halaman log masuk yang mudah, termasuk kotak input dan butang log masuk, seperti yang ditunjukkan di bawah:

Langkah 4: Hantar kod pengesahan

Kami perlu mengklik butang "Dapatkan Kod Pengesahan" selepas pengguna memasukkan nombor telefon mudah alih mereka untuk meminta kod pengesahan daripada pelayan. Terdapat beberapa langkah untuk melaksanakan fungsi ini:

1. Pengguna memasukkan nombor telefon mudah alih, dan menentukan sama ada nombor telefon bimbit itu kosong dan dalam format nombor telefon bimbit yang betul
2. Klik butang "Dapatkan Kod Pengesahan " untuk menghantar permintaan kepada pelayan untuk mendapatkan kod pengesahan; kod pengesahan dan menyimpannya secara setempat.
4. Langkah 5: Log Masuk

Selepas pengguna memasukkan nombor telefon bimbit dan kod pengesahan, klik butang "Log Masuk", kami perlu menghantar permintaan ke pelayan untuk log masuk, jika telefon bimbit Nombor dan kod pengesahan adalah betul, dan pelayan mengembalikan kod kebenaran, yang perlu kami gunakan untuk mengakses antara muka pelayan.

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

Untuk menggunakan halaman secara terbuka, kita perlu menyimpan nilai kod dalam pembolehubah global Di sini kita menggunakan Vuex untuk menyimpannya:

Kemudian tambahkan kod ke. maklumat pengguna yang dilog masuk:

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

Jika log masuk berjaya, kami boleh menyimpan kod kebenaran dalam cache atau kuki setempat:

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

Akhir sekali, kami boleh gunakan token yang disimpan pada klien untuk mengakses Antara muka lain pelayan untuk menyelesaikan lebih banyak operasi.

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

Pada ketika ini, kami telah menyelesaikan semua langkah untuk uniapp melaksanakan log masuk nombor telefon mudah alih Keseluruhan proses terdiri daripada tiga bahagian: mereka bentuk halaman log masuk, menghantar kod pengesahan dan log masuk. Saya harap artikel ini dapat membantu anda menguasai kaedah uniapp untuk log masuk menggunakan nombor telefon bimbit.

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

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan log masuk nombor telefon bimbit dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!