uniapp一键登录如何实现

在uniapp中如何实现一键登录功能？需要集成哪些SDK或插件？有没有具体的代码示例或步骤说明？

2 回复

使用UniApp实现一键登录，主要步骤如下：

  1. 在manifest.json中勾选并配置一键登录模块（如uni-login）。
  2. 调用uni.login()获取临时凭证code。
  3. 将code发送到自己的服务器，由服务器向运营商（如移动、联通、电信）换取用户手机号。
  4. 注意：一键登录功能需企业认证，且部分平台需单独申请资质。

UniApp 实现一键登录主要依赖Uni-App官方提供的uni.login方法，结合运营商（移动、联通、电信）的SDK完成认证。以下是实现步骤和示例代码：

1. 开通运营商服务

  • 在中国移动、联通、电信的开发者平台注册并申请一键登录能力（需企业认证）。
  • 获取对应的 AppID 和 AppKey。

2. UniApp项目配置

  • 在 manifest.json 中配置一键登录模块：
    {
  "app-plus": {
    "modules": {
      "OAuth": {}
    },
    "distribute": {
      "plugins": {
        "oauth": {
          "china_telecom": {
            "appid": "电信AppID"
          },
          "china_unicom": {
            "appid": "联通AppID"
          },
          "china_mobile": {
            "appid": "移动AppID"
          }
        }
      }
    }
  }
}

3. 前端调用一键登录

使用 uni.login 发起授权，并在成功回调中获取 access_token：

uni.login({
  provider: 'univerify', // 固定值
  success: (res) => {
    console.log('登录成功：', res);
    // 获取 access_token
    const access_token = res.authResult.access_token;
    // 将 token 发送到后端验证手机号
    uni.request({
      url: 'https://your-server.com/verify',
      method: 'POST',
      data: { access_token },
      success: (response) => {
        console.log('手机号：', response.data.phone);
      }
    });
  },
  fail: (err) => {
    console.error('登录失败：', err);
  }
});

4. 后端验证手机号

后端通过运营商的接口，用 access_token 换取手机号（以中国移动为例）：

// Node.js 示例
const axios = require('axios');
async function verifyPhone(access_token) {
  const result = await axios.get('https://www.cmpassport.com/openapi/rs/tokenValidate', {
    params: {
      appid: '移动AppID',
      token: access_token,
      sign: '生成签名' // 需按运营商规则计算
    }
  });
  return result.data.msisdn; // 返回手机号
}

5. 注意事项

  • 平台限制：仅支持 App 端，H5 或小程序不可用。
  • 隐私协议：需在登录前弹窗告知用户隐私政策。
  • 预登录：可调用 uni.preLogin({ provider: 'univerify' }) 提前初始化。

通过以上步骤，即可实现 UniApp 的一键登录功能。如有更复杂需求（如自定义界面），可参考 Uni-App 官方文档。

回到顶部