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卡,或者手机蜂窝数据网络关闭,
            //都有可能造成预登录校验失败。
        }
    })
},

成功后页面:

猜你喜欢

转载自blog.csdn.net/IDycy/article/details/128949597