Use uniapp to realize the one-click login function of the mobile phone number.
uni一键登录It is a service launched by DCloud and Getui, which integrates the gateway authentication capabilities of the three major operators.
Through the underlying SDK of the operator, the app side can directly obtain the mobile phone number without the SMS verification code, which is the one-click login function provided by many mainstream apps.
First, you need to log in to the DCloud Developer Center and apply for the one-click login service.
After activation, you will get ApiKey and Apsecret, which are related to billing and deduction certificate. Please do not disclose this information!
Click Application Management - My Application - Create Application, fill in the information, and the appid is in the basic configuration of manifest.json. The Android application signature can be signed with the public certificate packaged by the cloud, or you can generate your own certificate .
After adding the application, click one-click login-basic configuration-add application (the application signature cannot be filled in without creating the application) and wait for review...
Right-click on the project folder to create a UNICloud cloud development environment, create a new cloud function, and the index.js code example in the getPhoneNumber folder:
'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: '获取手机号成功'
}
}Write in package.json:
{
"name": "getPhoneNumber",
"dependencies": {},
"extensions": {
"uni-cloud-jql": {},
"uni-cloud-verify": {}
}
}Right-click uniCloud associated cloud service space or project, if not, click New, you can choose the free version, I chose Alibaba Cloud
Right-click getPhoneNumber to upload and deploy
// 手机号一键登录
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卡，或者手机蜂窝数据网络关闭，
//都有可能造成预登录校验失败。
}
})
},After successful page:
