유니앱에서 휴대폰 번호 로그인을 구현하는 방법

오늘날의 모바일 인터넷 시대에 다양한 애플리케이션을 사용하려면 등록과 로그인이 필요하며, 대부분의 애플리케이션 로그인 방법은 계정 및 비밀번호 로그인입니다. 계정 비밀번호는 매우 안전하지만 사용자가 조작하기가 불편합니다. 특히 모바일 장치 사용자의 경우 계정 비밀번호를 입력하는 것이 컴퓨터보다 어렵습니다.

그래서 더 나은 사용자 경험을 위해 많은 애플리케이션에서는 휴대폰 번호 인증 코드로 로그인하는 방법을 제공합니다. uniapp은 크로스 플랫폼 개발 프레임워크로서 개발자가 휴대폰 번호로 빠르게 로그인할 수 있도록 편리한 도구와 구성 요소를 제공합니다.

유니앱에서 휴대폰 번호 인증 코드 로그인을 구현하는 방법을 알아보세요.

1단계: 유니앱 프로젝트 생성

먼저 유니앱 프로젝트를 생성해야 합니다. (이미 프로젝트가 있는 경우 건너뛰어도 됩니다.) 이 단계). 프로젝트를 생성할 때 uni-app 템플릿을 템플릿으로 선택해야 합니다. uni-app 템플릿에는 uni-app 구성 요소와 플러그인이 내장되어 있어 신속한 개발이 가능하기 때문입니다.

2단계: 플러그인 설치

다음으로 플러그인을 설치해야 합니다. 다행히 uni-app에서는 필요한 플러그인을 찾을 수 있는 플러그인 마켓을 제공합니다. 이 글에서 사용해야 할 플러그인은 uni-app 기반의 UI 프레임워크인 uview-ui입니다. 다양한 UI 구성요소를 지원하고 페이지를 빠르게 구축할 수 있게 해줍니다.

설치하려면 명령줄에 다음 명령만 입력하면 됩니다.

npm install uview-ui

3단계: 로그인 페이지 디자인

먼저 로그인 페이지를 디자인해야 합니다. 여기에서는 먼저 입력을 포함하는 간단한 로그인 페이지를 디자인해야 합니다. 아래와 같이 상자와 로그인 버튼이 있습니다.

4단계: 인증 코드 보내기

서버에 인증 코드를 요청하려면 사용자가 휴대폰 번호를 입력한 후 "인증 코드 받기" 버튼을 클릭해야 합니다. . 이 기능을 구현하는 데는 여러 단계가 있습니다.

1. 사용자가 휴대폰 번호를 입력하고 휴대폰 번호가 비어 있는지, 휴대폰 번호 형식이 올바른지 확인합니다.
2. "인증 코드 받기" 버튼을 클릭하여 메시지를 보냅니다. 서버에 인증 코드 요청
3. 서버는 인증 코드를 휴대폰 번호로 보냅니다.
4. 클라이언트(우리 애플리케이션)는 인증 코드를 받아 로컬에 저장합니다.

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

5단계: 로그인

사용자가 휴대폰 번호와 인증 코드를 입력한 후 "로그인" 버튼을 클릭하면 로그인을 위해 서버에 요청이 전송됩니다. 휴대폰 번호와 인증 코드가 있는 경우 서버가 인증 코드를 반환하면 이를 사용하여 서버 인터페이스에 액세스해야 합니다.

페이지를 공개적으로 사용하려면 코드 값을 전역 변수에 저장해야 합니다. 여기서는 Vuex를 사용하여 저장합니다.

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

그런 다음 로그인한 사용자 정보에 코드를 추가합니다.

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

If 로그인이 성공하면 인증 코드는 로컬 캐시 또는 쿠키에 저장됩니다:

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

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

마지막으로 클라이언트가 저장한 토큰을 사용하여 서버의 다른 인터페이스에 액세스하여 더 많은 작업을 완료할 수 있습니다.

이제 uniapp에서 휴대폰 번호 로그인을 구현하기 위한 모든 단계가 완료되었습니다. 전체 프로세스는 로그인 페이지 디자인, 인증 코드 전송, 로그인의 세 부분으로 구성됩니다. 이 글이 유니앱의 휴대폰 번호 로그인 방법을 익히는 데 도움이 되기를 바랍니다.

위 내용은 유니앱에서 휴대폰 번호 로그인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!