admin管理员组文章数量:1537955
公司要弄app一键登录的功能，之前我没弄过，所以这次弄总结一下（网上其他人写的牛头不对马嘴，不想多说...累累的
1，首先在项目的manifest.json把授权勾上，然后去uniCloud把自己的app添加上
2，在你需要用一键登录的代码的地方把这个写上
uni.getProvider({
service: 'oauth',
success: function(res) {
console.log(res.provider) // ['qq', 'univerify']
uni.preLogin({
provider: 'univerify',
success() { //预登录成功
// 显示一键登录选项
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定义登录框样式
//参考`univerifyStyle 数据结构`
"fullScreen": true, // 是否全屏显示，默认值： false
"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）
"icon": {
"path": "static/xxx.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
"width": "60px", //图标宽度 默认值：60px
"height": "60px" //图标高度 默认值：60px
},
"closeIcon": {
"path": "static/xxx.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
"width": "60px", //图标宽度 默认值：60px (HBuilderX 4.0支持)
"height": "60px" //图标高度 默认值：60px (HBuilderX 4.0支持)
},
"phoneNum": {
"color": "#202020" // 手机号文字颜色 默认值：#202020
},
"slogan": {
"color": "#BBBBBB" // slogan 字体颜色 默认值：#BBBBBB
},
"authButton": {
"normalColor": "#9B1CFF", // 授权按钮正常状态背景颜色 默认值：#3479f5
"highlightColor": "#7530FF", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”
"borderRadius": "10px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
},
"otherLoginButton": {
"visible": true, // 是否显示其他登录按钮，默认值：true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565
"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”
"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）
"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
},
"privacyTerms": {
"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true
"isCenterHint": 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", // 图标宽度（高度等比例缩放） 默认值：45px
"list": [{
"provider": "apple",
"iconPath": "/static/apple.png" // 图标路径仅支持本地图片
},
{
"provider": "weixin",
"iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
}
]
}
},
success(res) {
//通过返回的openid和access_token作为云函数的event的参数，换取手机号
let {
openid,
access_token
} = res.authResult
console.log(res.authResult);
//调用云函数，换取手机号
//调用云函数的方法
uniCloud.callFunction({
name: "getPhoneNumber", //云函数的名字
// 传递给云函数的参数event
data: {
openid,
access_token,
},
})
// 调用云函数成功，支持then,catch
.then(async res => {
// 如果state的状态未false时
if (!res.result.state) {
// 一键登录没钱了或者appKey secret错误
//提示一下登录失败,跳转到用户名或则密码登录
uni.showToast({
title: "登录失败",
complete() {
uni.reLaunch({
url: ""
})
}
})
return
}
//成功条件下，获取用户的手机号
let phoneNumber = res.result.result
.phoneNumber;
// 调用公司的开发服务器，才能完成登录
console.log(phoneNumber);
//这里调你自己公司写的接口，完成剩下的登录操作
})
// 调用云函数失败
.catch(err => {
console.log("云函数调用失败", err)
// 跳转到其他的登录方式
uni.showToast({
title: "登录失败",
icon: "success",
complete() {
// uni.reLaunch({
// url: "/pages/tabBar/home/home"
// })
}
})
})
},
fail(res) { // 登录失败
console.log(res.errCode)
if(res.errCode==30002){
uni.closeAuthView()
}
console.log(res.errMsg)
}
})
},
fail(res) { // 预登录失败
// 不显示一键登录选项（或置灰）
// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})
}
});3，编写云函数，上面代码里的云函数不要傻乎乎的直接粘贴好，还说没效果...要自己在云空间写的，就是下面这段代码
uniCloud.callFunction({
name: "getPhoneNumber", //云函数的名字
// 传递给云函数的参数event
data: {
openid,
access_token,
},
})这个怎么写自己的云函数呢
1，创建自己的云空间
2，写云函数，在你刚刚创建的云函数文件夹里面的index.js里面把这个代码贴上去
'use strict';
exports.main = async (event, context) => {
try {
console.log(context);
const res = await uniCloud.getPhoneNumber({
// appid: context.APPID, // 客户端callFunction时携带的AppId信息
appid: event.appid, // 客户端callFunction时携带的AppId信息
provider: 'univerify',
// apiKey: '', // 在开发者中心开通服务并获取apiKey
// apiSecret: '', // 在开发者中心开通服务并获取apiSecret
access_token: event.access_token,
openid: event.openid
})
// 返回给客服端的数据
return {
state: true,
code: 200,
message: '获取手机号成功',
res: res.result,
result: res
}
} catch (e) {
console.log(e);
return {
state: false,
code: 400,
message: '获取手机号失败',
err: e.toString()
}
}
};3，配置package.json（没有的添加，已经有的不用修改
4,上传云函数（上传部署
5，真机调试（妈的死Hb，一直说真机和电脑不在同一个局域网，nmmd ，怎么解决请看我！
网上那些方法鸡毛用没有，不知道为啥这么久没有人解决...
实际：你可以打包成安装包安装就可以实现同一局域网，可以后期测试用
现在要知道是否可以一键登录，请看我！！！耶！
运行云函数，把已知的参数传进去，已知的参数会在运行 uni.login的时候返回给你我们可以拿到这个openid和access_token，接下来回到之前的云函数，
点这个配置运行参数，如下
接下来运行googood！！！
就可以获取到解码出来的电话了！说明已经ok了，这时候你还不稳的话，可以把app打包，你解析的电话用uni.showToast查看，再接下来对接后端的接口就可以了！
还可以在自己的云服务空间查看
耶！！来自菜鸟的雀跃！！！
版权声明：本文标题：uniapp实现一键登录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726955092a1091730.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论