uniapp获取手机号（UNIAPP手机号一键登录）

使用uniapp实现移动端手机号一键登录功能    
    
    
    。

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


     


     


     


。

通过运营商的底层SDK 


     


     


     


，实现App端无需短信验证码直接获取手机号

 




 




 




，也就是很多主流App都提供的一键登录功能

首先需要登录DCloud开发者中心   

   

   

   ，申请开通一键登录服务

 




 




 




。

 开通后会得到ApiKey和Apisecret  

     

     

     

，和计费有关


  




  




  




，扣费凭证  


  


  


  ，请勿泄露此信息！

点击应用管理——我的应用——创建应用   
     
     
     
，填写信息



   




   




   




，appid在manifest.json的基础配置中 



 



 



 ，Android 应用签名可以使用云打包的公共证书签名                   ，也可以生成自有证书   

   

   

   。

添加应用后点击一键登录-基础配置-添加应用（不创建应用应用签名无法填入）等待审核……

项目文件夹右键创建UNICloud云开发环境




    




    




    




，新建云函数














，getPhoneNumber文件夹中index.js代码示例：

use strict; exports.main = async (event, context) => { // event里包含着客户端提交的参数 const res = await uniCloud.getPhoneNumber({ appid: _UNI_ABCDEFG, // 替换成自己开通一键登录的应用的DCloud appid provider: univerify, apiKey: xxx, // 在开发者中心开通服务并获取apiKey apiSecret: xxx, // 在开发者中心开通服务并获取apiSecret access_token: event.access_token, openid: event.openid }) console.log(res); // res里包含手机号 // 执行用户信息入库等操作                    ，正常情况下不要把完整手机号返回给前端 // 如果数据库在uniCloud上



     



     



     



，可以直接入库 // 如果数据库不在uniCloud上















，可以通过 uniCloud.httpclient API    
    
    
    ，将手机号通过http方式传递给其他服务器的接口 


     


     


     


，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient return { code: 0, message: 获取手机号成功 } }

在package.json写入：

{   "name": "getPhoneNumber",   "dependencies": {},   "extensions": {     "uni-cloud-jql": {},     "uni-cloud-verify": {}   } }

右键uniCloud关联云服务空间或项目

 




 




 




，没有的话点击新建   

   

   

   ，可以选免费版  

     

     

     

，我选择的是阿里云

 右键getPhoneNumber上传部署

// 手机号一键登录 getIphone() {     uni.preLogin({//预登陆检查是否符合一键登录的环境


  




  




  




，可不用         provider: univerify,         success: () => {             uni.login({                 provider: univerify,                 univerifyStyle: {                     "fullScreen": true, // 是否全屏显示  


  


  


  ，true表示全屏模式   
     
     
     
，false表示非全屏模式



   




   




   




，默认值为false  

     

     

     

。                     "backgroundColor": "#ffffff", // 授权页面背景颜色 



 



 



 ，默认值：#ffffff                       "phoneNum": {                         "color": "#000000", // 手机号文字颜色 默认值：#000000                        },                     "slogan": {                         "color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90                       },                     "icon": {                         "path": "static/logo.png" // 自定义显示在授权框中的logo                   ，仅支持本地图片 默认显示App logo                        },                     "authButton": {                         "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5                           "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）                           "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）                           "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff                           "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录    
    
    
    ”                       },                     "otherLoginButton": {                         "visible": "false", // 是否显示其他登录按钮




    




    




    




，默认值：true                       },                 },                 success: (res) => {                     console.log(res)                     uniCloud.callFunction({                         name: getPhoneNumber, // 你的云函数名称                         data: {                             access_token: res.authResult                             .access_token, // 客户端一键登录接口返回的access_token                             openid: res.authResult.openid // 客户端一键登录接口返回的openid                         }                     }).then(dataRes => {                         console.log(云函数返回的参数, dataRes)                         uni.showToast({                             title: `当前手机号为：${dataRes.result.phoneNumber}`,                             icon: "none"                         })                     }).catch(err => {                         console.log(云函数报错, err)                     })                     uni.showToast({                         title: res.authResult,                         icon: "none"                     })                     uni.closeAuthView() //关闭一键登录弹出窗口                 },                 fail(res) { // 登录失败                     uni.closeAuthView() //关闭一键登录弹出窗口                     console.log(失败)                 },             })         },         fail(res) {             console.log(一键登录失败,res)             if (res.errMsg != login:ok) {                 uni.showToast({                     title: res.metadata.msg,                     icon: "none"                 })             }             //如果手机没有插入有效的sim卡














，或者手机蜂窝数据网络关闭                    ，             //都有可能造成预登录校验失败


  




  




  




。         }     }) },

成功后页面：