uniapp实现一键登录(保姆式教程) |
您所在的位置:网站首页 › 微信怎么取消一键登录功能 › uniapp实现一键登录(保姆式教程) |
官方文档入口链接 前置条件:手机安装有sim卡手机开启数据流量(与wifi无关,不要求关闭wifi,但数据流量不能禁用。)开通uniCloud服务(但不要求所有后台代码都使用uniCloud)没调用成功时候不要急,根据错误码来找问题 错误码入口链接 第一步 .开通uniCloud服务并创建服务空间 申请开通地址:https://unicloud.dcloud.net.cn/home 创建样板图以(phonedemo)服务空间名为例 第二步 开通uni一键登陆服务 开发者需要登录 DCloud开发者中心,申请开通一键登录服务。 详细步骤参考:开通一键登录服务的详细教程 申请一键登录服务信息ok样板图(调用成功一次会扣掉0.02)。 第三步 回到开发者中心(安全配置)https://dev.dcloud.net.cn/uniLogin/security 关联上配置好的服务空间 添加配置好的服务空间入口![]() ![]() ![]() 第四步 在云数据库建立regUser数据表,用于保存登录成功的手机号与openid 第五步 实战教程 1.创建新项目(phoneLogin) 建立云函数并上传部署 (点击项目右键 uniCloud云开发环境 (以阿里云为例)) 点击uniCloud右键(关联云服务空间或项目选项) 关联服务空间 ok 样板图 点击uniCloud ----> cloudfunctions 创建getPhoneNumber --> index.js 文件 `` 保姆式提醒 appid指的是(附上截图)![]() ![]() 前端代码实现 一键登陆 不支持一键登陆功能 export default { data() { return { autoStatus: true } }, onLoad() { this.isAutoLogin() }, methods: { // 判断是否支持一键登陆 isAutoLogin() { let _that = this uni.getProvider({ //获取可用的服务提供商 service: 'oauth', success: function(res) { console.log(res.provider) // ['weixin', qq', 'univerify'] } }); uni.preLogin({ //预登录 provider: 'univerify', //用手机号登录 success() { _that.autoStatus = true console.log('预登录成功') }, fail(err) { //预登录失败 _that.autoStatus = false console.log('错误码:' + err.errCode) console.log(err.errMsg) } }) }, submitlogin() { uni.login({ //正式登录,弹出授权窗 provider: 'univerify', univerifyStyle: { // 自定义登录框样式 "fullScreen": true, // 是否全屏显示,true表示全屏模式,false表示非全屏模式,默认值为false。 "backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff "phoneNum": { "color": "#2281F5", // 手机号文字颜色 默认值:#000000 }, "authButton": { "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5 "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持) "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持) "textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff "title": "本机号码一键登录" // 授权按钮文案 默认值:“本机号码一键登录” } }, success(res) { // 正式登录成功 console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'} // 在得到access_token后,通过callfunction调用云函数 uniCloud.callFunction({ name: 'getPhoneNumber', // 云函数名称 data: { //传给云函数的参数 'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token 'openid': res.authResult.openid // 客户端一键登录接口返回的openid }, success(callRes) { console.log('调用云函数成功' + callRes) }, fail(callErr) { console.log('调用云函数出错' + callErr) }, complete() { uni.closeAuthView() //关闭授权登录界面 } }) }, fail(err) { // 正式登录失败 console.log(err.errCode) console.log(err.errMsg) uni.closeAuthView() //关闭授权登录界面 } }) } } } .login-view { display: flex; flex-direction: column; align-items: center; justify-content: center; .logo-img { width: 200rpx; height: 200rpx; border-radius: 50%; margin: 100rpx auto; } .login-btn { width: 50%; text-align: center; background-color: #939393; color: #FFFFFF; border-radius: 50rpx; height: 70rpx; line-height: 70rpx; font-size: 26rpx; } }页面吊起截图 ![]() ![]() 整体到这已经实现一键登录功能啦~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |