How to implement mobile phone number login in uniapp

In today's mobile Internet era, various applications require users to register and log in before they can be used, and the login method for most applications is account and password login. Although the account password is very secure, it is inconvenient for users to operate. Especially for users of mobile devices, entering the account password will be more difficult than on a computer.

So, for a better user experience, many applications provide a way to log in with a mobile phone number verification code. As a cross-platform development framework, uniapp provides convenient tools and components to help developers quickly log in with mobile phone numbers.

Let’s learn how uniapp implements mobile phone number verification code login:

Step 1: Create a uni-app project

First, we need to create a uni- app project (you can skip this step if you already have a project). When creating a project, you need to select the uni-app template as the template, because the uni-app template has many built-in uni-app components and plug-ins, which facilitates our rapid development.

Step 2: Install plug-ins

Next, we need to install plug-ins. Fortunately, uni-app provides a plug-in market where we can find the plug-ins we need. The plug-in we need to use in this article is uview-ui, a UI framework based on uni-app. It supports various UI components and allows us to quickly build pages.

We only need to enter the following command on the command line to install:

npm install uview-ui

Step 3: Design the login page

We need to design a login page first, here we first Design a simple login page, including an input box and a login button, as shown below:

Step 4: Send verification code

We need After the user enters their mobile phone number, click the "Get Verification Code" button to request the verification code from the server. There are several steps to implement this function:

1. The user enters the mobile phone number, and determines whether the mobile phone number is empty and in the correct mobile phone number format;
2. Click "Get Verification Code " button to send a request to the server for a verification code;
3. The server sends a verification code to the mobile phone number;
4. The client (our application) receives the verification code and saves it locally.

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

Step 5: Login

After the user enters the mobile phone number and verification code, click the "Login" button, we need to send a request to the server to log in, if the mobile phone number and If the verification code is correct, the server returns an authorization code, which we need to use to access the server's interface.

In order to use a page publicly, we need to save the value of the code in a global variable. Here we use Vuex to save it:

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

Then add the code to the logged in user information:

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

If the login is successful, we can save the authorization code in the local cache or cookie:

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

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

Finally, we can use the token saved by the client to access other interfaces of the server to complete more operate.

At this point, we have completed all the steps for uniapp to implement mobile phone number login. The entire process consists of three parts: designing the login page, sending the verification code, and logging in. I hope this article can help you master the method of uniapp to log in with a mobile phone number.

The above is the detailed content of How to implement mobile phone number login in uniapp. For more information, please follow other related articles on the PHP Chinese website!