uni-app使用uniCloud实现手机号一键登录

uni-app手机号一键登录是DCloud联合个推公司推出的，整合三大运营商网关认证能力的服务。

通过运营商的底层SDK，实现App端无需短信验证码直接获取手机号，实现一键登录功能。手机一键登录 替换了短信验证登录的方式，消除有短信验证模式等待时间较长，操作繁琐和容易泄露的痛点。

• 支持版本：HBuilderX 3.0
• 支持项目类型：uni-app的App端，5 App，Wap2App
• 支持系统平台：Android、IOS
• 支持运营商：中国移动、中国联通、中国电信

一、开通服务

登录DCloud开发者后台，找到“一键登录”，选择“基础配置”，开通一键登录功能。

二、添加应用

• DCloud AppId：创建uniapp项目时，生成的ID，如 __UNI__XXXXXX
• 应用名称：填写App名称即可
• Android签名：打包时使用的包名
• Android应用签名MD5：通过keytool工具自定义生成，也可以使用dcloud测试默认：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58。 建议自己生成
• IOS BundleId：IOS打包时的包名，一般跟Android包名一样

提交申请后，如”开通服务“中图例，状态为”正常“，则审核通过。

三、充值

一键登录是一个收费项目，需要充值后使用。开发环境中，可以”连接本地云函数“实现登录功能。

四、安全配置

在一键登录中选择”安全配置“项，添加服务空间，系统提供uniCloud服务空间白名单安全配置，可以提高接口调用安全性，防止被他人盗用。

五、实现一键登录功能

5.1 创建云函数

创建云函数其实很简单，如果有不清楚的，可以参照前一篇文章中如何创建的：uni-app中使用uniCloud实现发送短信验证码（开通、配置、使用）

注：开发云函数或调用云函数，一定要先开通云空间

uniCloud云开发平台地址：uniCloud官网-web控制台

代码如下：

1.  
   'use strict';
2.  
   exports.main = async (event, context) => {
3.  
   // event里包含着客户端提交的参数
4.  
   const res = await uniCloud.getPhoneNumber({
5.  
   appid: '_UNI_ABCDEFG', // 替换成自己开通一键登录的应用的DCloud appid
6.  
   provider: 'univerify',
7.  
   apiKey: 'xxx', // 在开发者中心开通服务并获取apiKey
8.  
   apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret
9.  
   access_token: event.access_token,
10.  
    openid: event.openid
11.  
    });
12.  
     
13.  
    return {
14.  
    code: 0,
15.  
    data: res,
16.  
    message: '获取手机号成功'
17.  
    }
18.  
    }

5.2 客户端-请求登录授权

预登录操作可以判断当前设备环境是否支持一键登录。代码如下：

1.  
   uni.preLogin({
2.  
   provider: 'univerify',
3.  
   success(){ //预登录成功
4.  
   // 显示一键登录选项
5.  
   },
6.  
   fail(res){ // 预登录失败
7.  
   // 不显示一键登录选项（或置灰）
8.  
   // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
9.  
   console.log(res.errCode)
10.  
    console.log(res.errMsg)
11.  
    }
12.  
    })

• 如果当前设备环境不支持一键登录，此时应该显示其他的登录选项。
• 如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登录校验失败。

预登录成功后，可以调用授权功能，根据用户操作及授权结果返回对应的回调，拿到access_token，代码如下：

1.  
   uni.login({
2.  
   provider: 'univerify',
3.  
   univerifyStyle: { // 自定义登录框样式
4.  
   //参考`univerifyStyle 数据结构`
5.  
   },
6.  
   success(res){ // 登录成功
7.  
   console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
8.  
   },
9.  
   fail(res){ // 登录失败
10.  
    console.log(res.errCode)
11.  
    console.log(res.errMsg)
12.  
    }
13.  
    })

5.3 返回值

1.  
   {
2.  
   "errMsg": "login:ok",
3.  
   "authResult": {
4.  
   "openid": "208E2FBE6EF64DF3B2D377D886EF2A14124262bfd7ae16465ea0f0634554dcee7636",
5.  
   "access_token": "ZGI4NjkxZWE4YjAyNGUzMjhiMmZiNDcwODBjYjc5MDF8fDJ8djJ8Mg=="
6.  
   }
7.  
   }

5.4 客户端通过callFunction向uniCloud云端换取手机号信息

通过5.3中的返回值，通过执行云函数换取手机号信息，代码如下：

1.  
   // 在得到access_token后，通过callfunction调用云函数
2.  
   uniCloud.callFunction({
3.  
   name: 'xxx', // 你的云函数名称
4.  
   data: {
5.  
   'access_token': 'xxx', // 客户端一键登录接口返回的access_token
6.  
   'openid': 'xxx' // 客户端一键登录接口返回的openid
7.  
   }
8.  
   }).then(res => {
9.  
   // res.result = {
10.  
    // code: '',
11.  
    // message: ''
12.  
    // }
13.  
    // 登录成功，可以关闭一键登录授权界面了
14.  
    }).catch(err=>{
15.  
    // 处理错误
16.  
    })

5.5 综合示例

以上 客户端整合后，如下代码所示：

1.  
   methods: {
2.  
   //登录函数
3.  
   login(){
4.  
   let that = this;
5.  
   uni.preLogin({
6.  
   provider: 'univerify',
7.  
   success() {
8.  
   uni.login({
9.  
   provider: 'univerify',
10.  
    success: res => {
11.  
    if(res.errMsg=='login:ok'){
12.  
    //执行云函数
13.  
    uniCloud.callFunction({
14.  
    name: 'phoneNumber',
15.  
    data: {
16.  
    // 客户端一键登录接口返回的access_token
17.  
    access_token: res.authResult['access_token'],
18.  
    // 客户端一键登录接口返回的openid
19.  
    openid: res.authResult['openid']
20.  
    }
21.  
    }).then(res => {
22.  
    //关闭弹框事件
23.  
    uni.closeAuthView();
24.  
    if(res.result['code']==0){
25.  
    //获取的手机号
26.  
    //do somthing...
27.  
    console.log(res.result['phoneNumber']);
28.  
    }else{
29.  
    uni.showToast({
30.  
    icon: 'none',
31.  
    title: '授权失败~'
32.  
    });
33.  
    }
34.  
    //if end
35.  
    }).catch(msg => {
36.  
    //关闭弹框事件
37.  
    uni.closeAuthView();
38.  
    console.error(msg);
39.  
    });
40.  
    }else{
41.  
    //关闭弹框事件
42.  
    uni.closeAuthView();
43.  
    uni.showToast({
44.  
    icon: 'none',
45.  
    title: res['errMsg']
46.  
    });
47.  
    }
48.  
    },
49.  
    fail: res => {
50.  
    uni.showToast({
51.  
    icon: 'none',
52.  
    title: res['errMsg']
53.  
    });
54.  
    }
55.  
    });
56.  
    },
57.  
    fail: res => {
58.  
    uni.showToast({
59.  
    icon: 'none',
60.  
    title: res['errMsg']
61.  
    });
62.  
    }
63.  
    });
64.  
    }
65.  
    }

这篇好文章是转载于：学新通技术网