微信小程序uni-app+vue3实现手机号一键登录方法

微信小程序uni-app+vue3实现手机号一键登录方法

网上的教程都挺乱,写得都不怎么全,我重新实现了一下,把具体的方法都分享出来。

uni-app/微信小程序官方API

1. uni.login

uni-app提供的统一登录接口,用于获取登录凭证(code)。

语法:

uni.login({
  provider: 'weixin', // 登录服务提供商,微信小程序固定为'weixin'
  success: (res) => {
    // res.code: 登录凭证,有效期5分钟
    // res.errMsg: 错误信息,成功为'login:ok'
  },
  fail: (err) => {
    // 登录失败回调
    // err.errMsg: 错误信息
  },
  complete: () => {
    // 接口调用结束的回调(调用成功、失败都会执行)
  }
})


**注意事项:**
- code只能使用一次,使用后失效
- code有效期为5分钟
- 需要在真机或开发者工具中调试
- 建议封装为Promise使用

**Promise封装示例:**
````typescript
const login = (): Promise<string> => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      success: (res) => {
        if (res.errMsg === 'login:ok') {
          resolve(res.code)
        } else {
          reject(new Error(res.errMsg))
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

2. 获取手机号相关

<template>
    <!-- 登录按钮 -->
      <button 
        class="login-button"
        :loading="loading"
        :disabled="loading"
        open-type="getPhoneNumber" 
        @getphonenumber="handleGetPhoneNumber"
      >
        {{ loading ? '登录中...' : '手机号一键登录' }}
      </button>
</template>
  • open-type="getPhoneNumber": 按钮的开放能力属性
  • @getphonenumber: 获取手机号回调事件
  • 回调参数 e.detail.code: 用于换取手机号的code
  • 错误信息 e.errMsg: 包含 ‘getPhoneNumber:fail user deny’ 等状态

3. 存储相关(可以调用自己相关的状态管理)

// 存储API
uni.setStorageSync('key', value) // 同步存储数据
uni.getStorageSync('key')        // 同步获取数据
uni.removeStorageSync('key')     // 同步删除数据

4. 界面交互

// 提示框
uni.showToast({
  title: '提示内容',
  icon: 'none' // 'success' | 'loading' | 'error' | 'none'
})

// 加载提示
uni.showLoading({
  title: '加载中',
  mask: true // 是否显示透明蒙层
})
uni.hideLoading()

完整登录流程示例

const handleGetPhoneNumber = async (e: any) => {
  try {
    // 1. 显示加载
    uni.showLoading({ 
      title: '登录中',
      mask: true 
    })

    // 2. 处理用户拒绝授权
    if (e.errMsg === 'getPhoneNumber:fail user deny') {
      throw new Error('用户拒绝授权')
    }

    // 3. 获取登录code
    const loginResult = await login()

    // 4. 调用后端登录接口
    const loginRes = await request({
      url: '/api/login',
      method: 'POST',
      data: {
        code: loginResult,
        phoneCode: e.detail.code
      }
    })

    // 5. 存储token
    uni.setStorageSync('token', loginRes.token)

    // 6. 提示成功
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })

  } catch (error) {
    // 错误处理
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'error'
    })
  } finally {
    // 隐藏加载
    uni.hideLoading()
  }
}

最佳实践

  1. 错误处理
// 统一的错误处理
const handleLoginError = (error: any) => {
  let message = '登录失败'
  
  if (error.errMsg) {
    switch (error.errMsg) {
      case 'login:fail':
        message = '登录失败,请重试'
        break
      case 'getPhoneNumber:fail user deny':
        message = '用户拒绝授权'
        break
      // ... 其他错误类型
    }
  }
  
  uni.showToast({
    title: message,
    icon: 'error'
  })
}
  1. 自动登录处理
const autoLogin = async () => {
  try {
    // 1. 检查本地token
    const token = uni.getStorageSync('token')
    if (!token) return false

    // 2. 验证token有效性
    const valid = await verifyToken(token)
    return valid

  } catch (error) {
    // 3. 清除无效token
    uni.removeStorageSync('token')
    return false
  }
}

参考文档

  1. uni.login文档
  2. 微信小程序登录文档
  3. 微信小程序获取手机号文档
### 实现 UniApp手机号一键登录功能 #### 导入微信 SDK 和初始化环境 为了使应用程序能够调用微信的相关接口,在项目中需先引入微信的小程序 SDK 并完成必要的配置[^1]。 ```javascript // main.js 或者 app.vue 的 script 部分 import Vue from &#39;vue&#39;; Vue.prototype.$wx = require(&#39;weixin-js-sdk&#39;); // 引入微信 JS-SDK ``` #### 用户授权环节 当用户点击按钮触发登录操作时,应弹出授权窗口让用户同意授予应用访问其电话号码权限。这一步通过 `button` 组件并设置属性来实现。 ```html <!-- 登录页面组件 --> <template> <view class="login-container"> <!-- 使用 open-type 属性指定为 getPhoneNumber 类型 --> <button type="primary" @getphonenumber="handleGetPhoneNumber">使用手机号快速注册/登录</button> </view> </template> <script> export default { methods: { handleGetPhoneNumber(e) { const iv = e.detail.iv; const encryptedData = e.detail.encryptedData; if (iv && encryptedData) { this.sendEncryptedPhoneToServer(iv, encryptedData); } else { console.error(&#39;用户拒绝提供手机号&#39;); } }, sendEncryptedPhoneToServer(iv, encryptedData){ uni.request({ url: `${this.serverUrl}/auth/loginByMobile`, // 后端 API 地址 method:&#39;POST&#39;, data:{ "iv": iv, "encryptedData": encryptedData }, success(res){ // 处理返回的数据... } }); } } } </script> ``` 上述代码展示了如何捕获用户的授权行为以及处理加密后的数据发送给服务器进行解密验证的过程。 #### 获取手机号码 一旦获得用户的许可之后,前端会接收到由微信平台加密过的手机信息(包括 IV 参数和 Encrypted Data),这些信息会被传递到后台用于进一步解析得到真实的手机号码。 #### 后台验证与生成 Token 后端接收到来自客户端传来的参数后,利用 WeChat 提供的安全算法对接收的信息做解密处理从而取得明文形式下的手机号;随后依据业务逻辑判断该账号是否存在,并创建相应的 session 或 JWT token 返回给客户端作为后续请求的身份凭证。 #### 客户端保存 Token 最后,成功登陆以后从前端视角来看就是把服务端下发过来的 token 存储起来以便于下次发起 HTTP 请求的时候带上它来进行身份认证。 ```javascript success(res){ let token = res.data.token; // 假设这是从响应体里拿到的token字段名 // 将 token 保存至本地缓存 uni.setStorageSync(&#39;Authorization&#39;, token); // 更新全局状态或其他操作... } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值