网站免费推广方式,上海做网站那家好,网页设计与制作实训总结报告,建分类信息网站一键登录Dcloud官网请戳这里#xff0c;感兴趣的可以看看官网#xff0c;有很详细的示例#xff0c;选择App一键登录#xff0c;可以看到一些常用的概述 比如#xff1a; 1、调用uni.login就能弹出一键登录的页面 2、一键登录的流程#xff0c;可以选择先预登录uni.prelo…一键登录Dcloud官网请戳这里感兴趣的可以看看官网有很详细的示例选择App一键登录可以看到一些常用的概述 比如 1、调用uni.login就能弹出一键登录的页面 2、一键登录的流程可以选择先预登录uni.prelogin()或直接登录uni.login() 3、要先开通Dcloud一键登录服务在Dcloud开发者中心登录账户开通一键登录服务这个需要付费的每调用一次是0.02元充值多少是无限制的够你测试用就行。 4、设置uniCloud云函数一键登录需要调用uniCloud.getPhoneNumber() 5、HBuilderX 3.4.0及之后的版本上传云函数时如果没有指定使用uni-cloud-verify扩展库的云函数将无法调用uniCloud.getPhoneNumber接口所以要在云函数的package.json内添加uni-cloud-verify的引用 6、一键登录页面是配置出来的如何配置可以看univerifyStyle 数据结构 7、关闭一键登录授权界面调用uni.closeAuthView() 8、用户点击一键登录自定义按钮 9、一键登录成功后根据自己的后端接口判断是直接进入app页面还是需要去注册的业务处理 uni一键登录概述请戳这里 Uni手机号一键登录请戳这里 一键登录具体实现
首先得有Dcloud账号申请好应用之后申请开通一键登录服务开通一键登录服务详细流程请戳这里在左侧选择一键登录点击基础配置取ApiKey和ApiSecret的值 1、mainfest.json中选择App模块配置勾选一键登录 2、要实现一键登录需要借助UniCloud 云函数的 APIuniCloud.getPhoneNumber 创建uniCloud.getPhoneNumber云函数步骤如下 1、在项目根目录uniCloud文件夹下找到 cloudfunctions 文件夹。如果没有该文件夹可以手动创建 2、在 cloudfunctions 文件夹中创建一个新的文件夹作为你的云函数的名称例如 getPhoneNumber。我这里名称是login 3、进入 getPhoneNumber 文件夹并创建一个 JavaScript 文件例如 index.js。 4、在 index.js 中编写云函数的代码具体实现获取手机号码的逻辑。 备注这段代码在下面引起了一个报错报错已解决此段代码不要直接复制用解决后的代码
exports.main async (event, context) {
//登录Dcloud账号左侧选择一键登录点击基础配置取ApiKey和ApiSecret的值const res await uniCloud.getPhoneNumber({provider: univerify,apiKey: 对应的apiKey,apiSecret: 对应的apiSecret,access_token: event.access_token,openid: event.openid})// 这里需要改成你们自己后端登录成功后的接口地址 ...const url event.serversUrl /user/login// md5加密方式手机号 时间戳 私钥const phone res.phoneNumberconst timestamp new Date().getTime()const signKey 对应的signKey const sign crypto.createHash(md5).update(phone timestamp signKey).digest(hex)const result await uniCloud.httpclient.request(url, {method: POST,data: {phone,timestamp,sign},contentType: json,dataType: json,// 是否在证书不受信任时返回错误rejectUnauthorized: false})console.log(服务端返回结果, result)if (result.data.code 200) {return {code: 0,message: 获取手机号成功,data: result.data.data}} else {return {code: result.data.code,message: result.data.msg,data: result.data.data}}
}5、在项目根目录的uniCloud文件夹下在云函数的package.json内添加uni-cloud-verify的引用即可为云函数启用此扩展无需做其他调整
{name: login,dependencies: {},extensions: {uni-cloud-verify: {} // 启用一键登录扩展值为空对象即可}
}
3、页面中具体使用 关于如何使用我自己踩了些坑 1、首先一键登录页面类似于一个弹窗在app刚打开的时候先弹出这个一键登录的页面 如果不想选一键登录点左上角的叉号关闭弹窗。 我遇到的第一个坑是我对一键登录不了解 我自己按ui图画了一个一键登录的页面在实现过程中一直很疑惑如何获得加密的手机号和对应的供应商认证服务来渲染到页面上误区在于一键登录页面是配置出来的。 既然它是弹窗关闭之后就得有一个展示的页面我这里是关闭之后显示的是账号登录页面
2、uniapp介绍中左侧菜单栏点击uni一键登录 里面有张流程图先预登录然后是一键登录 关于预登录需要调用 uni.preLogin(), 主要是检查预登录环境 然后紧接着就是调用uni.login(), 这个地方就很疑惑我一直觉得是点击一键登录按钮才会调用login方法 误区就在于uni.login()获取用户的登录凭证 code。然后将这个 code 发送给后端服务器服务器使 用这个凭证进行登录验证并返回用户的身份信息或生成用户的会话凭证直白的说就是调用 uni.login()之后才能拿到手机号和对应的供应商认证服务 一键登录页面上的手机号和对应的供应商认证服务才会显示出来 紧接着是一键登录按钮当点击按钮的时候会触发uniCloud.callFunction就是去调用云函数云函 数返回的参数有用户的完整手机号拿着这个手机号去调我们自己后端的接口根据后端给的标识 判断是放行到主页还是需要用户去注册页
function preLogin(isShowMsg false) {//预登陆检查是否符合一键登录的环境uni.preLogin({provider: univerify,success: (res) {//调用login方法我是vue3没有thi实例vue2框架this.login()login()},fail(err) {// 如果手机没有插入有效的sim卡或者手机蜂窝数据网络关闭都有可能造成预登录校验失败。if (isShowMsg err.errMsg ! login:ok) {// 不同运营商 返回的报错字段不同uni.showModal({title: 当前设备环境不支持一键登录,content:err.errMsg ||err.metastate.resultMsg ||err.metastate.error_data ||err.metastate.resultDesc ||请检查是否插入有效sim卡及开启蜂窝数据网络,showCancel: false,});}},});}function login() {uni.login({provider: univerify,univerifyStyle: {fullScreen: true, // 是否全屏显示true表示全屏模式false表示非全屏模式默认值为false。backgroundColor: #ffffff, // 授权页面背景颜色默认值#ffffff icon: {path: static/images/logo.png,// 自定义显示在授权框中的logo仅支持本地图片 默认显示App logo width: 60px, //图标宽度 默认值60pxheight: 60px,//图标高度 默认值60px, },phoneNum: {color: #525252,// 手机号文字颜色 默认值#202020 fontSize: 22,// 手机号字体大小 默认值18},slogan: {color: #525252, // slogan 字体颜色 默认值#8a8b90fontSize: 14},authButton: {normalColor: #FF9CAE, // 授权按钮正常状态背景颜色 默认值#3479f5 highlightColor: #FF9CAE, // 授权按钮按下状态背景颜色 默认值#2861c5仅ios支持 disabledColor: #73aaf5, // 授权按钮不可点击时背景颜色 默认值#73aaf5仅ios支持 textColor: #ffffff, // 授权按钮文字颜色 默认值#ffffff title: 一键登录/注册 // 授权按钮文案 默认值“本机号码一键登录” },otherLoginButton: {visible: true, // 是否显示其他登录按钮默认值true normalColor: , // 其他登录按钮正常状态背景颜色 默认值透明 highlightColor: , // 其他登录按钮按下状态背景颜色 默认值透明 textColor: #656565, // 其他登录按钮文字颜色 默认值#656565 title: 验证码登录, // 其他登录方式按钮文字 默认值“其他登录方式” borderColor: , //边框颜色 默认值透明仅iOS支持 borderRadius: 0px,// 其他登录按钮圆角 默认值24px 按钮高度的一半},privacyTerms: {defaultCheckBoxState: false, // 条款勾选框初始状态 默认值 trueuncheckedImage: , // 可选 条款勾选框未选中状态图片仅支持本地图片 建议尺寸 24x24px(3.2.0 版本支持) checkedImage: , // 可选 条款勾选框选中状态图片仅支持本地图片 建议尺寸24x24px(3.2.0 版本支持) checkBoxSize: 12, // 可选 条款勾选框大小仅android支持textColor: #BBBBBB, // 文字颜色 默认值#BBBBBB termsColor: #5496E3, // 协议文字颜色 默认值 #5496E3 prefix: 请阅读并同意, // 条款前的文案 默认值“我已阅读并同意” suffix: 并使用本机号码登录, // 条款后的文案 默认值“并使用本机号码登录” privacyItems: [ // 自定义协议条款最大支持2个需要同时设置url和title. 否则不生效 {url: /pages/privacy/use, // 点击跳转的协议详情页面 title: 《xxx用户注册协议》 //用户注册协议名称 },{url: /pages/privacy/privacy, // 点击跳转的协议详情页面 title: 《xx隐私政策》 // 隐私政策名称 }]}},success: (res) {uniCloud.callFunction({name: login, // 你的云函数名称data: {access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_tokenopenid: res.authResult.openid // 客户端一键登录接口返回的openid}}).then(dataRes {console.log(云函数返回的参数, dataRes)data.form.mobile dataRes.result.data.phoneNumber$Api.post(user/direct,data.form).then((res) {console.log(res,调后端接口判断登录后操作);if(resres.code0){if(res.id){uni.switchTab({url: /pages/square/square,});}else{uni.navigateTo({url: /pages/user/register?mobile data.form.mobile,});}}});}).catch(err {console.log(云函数报错, err)})uni.showToast({title: res.authResult,icon: none})uni.closeAuthView() //关闭一键登录弹出窗口},fail(res) { // 登录失败 uni.closeAuthView() //关闭一键登录弹出窗口console.log(失败)},})}3、当uni.login()调用成功之后一键登录页面就出现了然后就是调整样式大框架是没法改变的只能调整一些类似于字体大小颜色之类的如何调整icon和phoneNumber之间的间距我一直没有实现有实现的可以给我留言感谢感谢
通过univerifyStyle 配置官网是这样的我自己的配置看上面的代码
{ fullScreen: false, // 是否全屏显示默认值 falsebackgroundColor: #ffffff, // 授权页面背景颜色默认值#ffffffbackgroundImage: , // 全屏显示的背景图片默认值 仅支持本地图片只有全屏显示时支持 icon: { path: static/xxx.png, // 自定义显示在授权框中的logo仅支持本地图片 默认显示App logowidth: 60px, //图标宽度 默认值60pxheight: 60px //图标高度 默认值60px}, closeIcon: { path: static/xxx.png // 自定义关闭按钮仅支持本地图片。 HBuilderX3.3.7版本支持}, phoneNum: { color: #202020 // 手机号文字颜色 默认值#202020 }, slogan: { color: #BBBBBB // slogan 字体颜色 默认值#BBBBBB }, authButton: { normalColor: #3479f5, // 授权按钮正常状态背景颜色 默认值#3479f5 highlightColor: #2861c5, // 授权按钮按下状态背景颜色 默认值#2861c5仅ios支持 disabledColor: #73aaf5, // 授权按钮不可点击时背景颜色 默认值#73aaf5仅ios支持 textColor: #ffffff, // 授权按钮文字颜色 默认值#ffffff title: 本机号码一键登录, // 授权按钮文案 默认值“本机号码一键登录” borderRadius: 24px // 授权按钮圆角 默认值24px 按钮高度的一半}, otherLoginButton: { visible: true, // 是否显示其他登录按钮默认值true normalColor: , // 其他登录按钮正常状态背景颜色 默认值透明 highlightColor: , // 其他登录按钮按下状态背景颜色 默认值透明 textColor: #656565, // 其他登录按钮文字颜色 默认值#656565 title: 其他登录方式, // 其他登录方式按钮文字 默认值“其他登录方式” borderColor: , //边框颜色 默认值透明仅iOS支持 borderRadius: 0px // 其他登录按钮圆角 默认值24px 按钮高度的一半}, privacyTerms: { defaultCheckBoxState:true, // 条款勾选框初始状态 默认值 trueisCenterHint:false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13 版本支持)uncheckedImage:, // 可选 条款勾选框未选中状态图片仅支持本地图片 建议尺寸 24x24px(3.2.0 版本支持) checkedImage:, // 可选 条款勾选框选中状态图片仅支持本地图片 建议尺寸24x24px(3.2.0 版本支持) checkBoxSize:12, // 可选 条款勾选框大小textColor: #BBBBBB, // 文字颜色 默认值#BBBBBB termsColor: #5496E3, // 协议文字颜色 默认值 #5496E3 prefix: 我已阅读并同意, // 条款前的文案 默认值“我已阅读并同意” suffix: 并使用本机号码登录, // 条款后的文案 默认值“并使用本机号码登录” privacyItems: [ // 自定义协议条款最大支持2个需要同时设置url和title. 否则不生效 { url: https://, // 点击跳转的协议详情页面 title: 用户服务协议 // 协议名称 } ] },buttons: { // 自定义页面下方按钮仅全屏模式生效3.1.14 版本支持iconWidth: 45px, // 图标宽度高度等比例缩放 默认值45pxlist: [{provider: apple,iconPath: /static/apple.png // 图标路径仅支持本地图片}, {provider: weixin,iconPath: /static/wechat.png // 图标路径仅支持本地图片}]}
}
这里遇到一个报错云函数中这个接口的前缀是underfiend导致找不到云函数index.js中的代码之前是其他人写的我打印之后才发现event只返回两个参数access_token和openid没有event.serversUrl这个参数所以导致显示的是undefined 代码改为
exports.main async (event, context) {
//登录Dcloud账号左侧选择一键登录点击基础配置取ApiKey和ApiSecret的值const res await uniCloud.getPhoneNumber({appid: _xxxxA3, // 替换成自己开通一键登录的应用的DCloud appidprovider: univerify,apiKey: 对应的apiKey,apiSecret: 对应的apiSecret,access_token: event.access_token,openid: event.openid})
return {code: 0,message: 获取手机号成功,data:res}}然后调用成功后会返回这样的数据格式 我们需要的就是完整的手机号 在自己的页面中调用uni.loginuniCloud.callFunction({}).then((dataRes{ console.log(‘云函数返回的参数’, dataRes) })),打印之后就能拿到
{result: {code: 0,message: 获取手机号成功,data: {code: 0,success: true,phoneNumber: 1510000xxxx}}
}再说个小细节点如果你想在云函数中打印看结果的话一定要右击云函数选择上传部署不然的话云函数不会更新我就是自己傻傻的等着看结果试了好几次才反应过来 欢迎留言沟通或私信沟通~~~~
