admin管理员组文章数量:1532008
官方文档入口链接
- 前置条件：
- 手机安装有sim卡
- 手机开启数据流量（与wifi无关，不要求关闭wifi，但数据流量不能禁用。）
- 开通uniCloud服务（但不要求所有后台代码都使用uniCloud）
没调用成功时候不要急，根据错误码来找问题 错误码入口链接
第一步 .开通uniCloud服务并创建服务空间
申请开通地址：https://unicloud.dcloud/home
创建样板图以（phonedemo）服务空间名为例
第二步 开通uni一键登陆服务
开发者需要登录 DCloud开发者中心，申请开通一键登录服务。
详细步骤参考：开通一键登录服务的详细教程
申请一键登录服务信息ok样板图（调用成功一次会扣掉0.02）。
第三步 回到开发者中心（安全配置）https://dev.dcloud/uniLogin/security 关联上配置好的服务空间
- 添加配置好的服务空间入口
- 添加服务空间 ok
注：在 uniCloud 中使用一键登录接口时，将允许调用接口的服务空间添加到此列表中。服务空间添加成功后，只有列表中的服务空间才可以调用当前账号下的短信接口。此列表为空时，不校验调用方的服务空间。
第四步 在云数据库建立regUser数据表，用于保存登录成功的手机号与openid
第五步 实战教程
1.创建新项目（phoneLogin）
-
建立云函数并上传部署 (点击项目右键 uniCloud云开发环境 (以阿里云为例))
-
点击uniCloud右键（关联云服务空间或项目选项）
-
关联服务空间 ok 样板图
-
点击uniCloud ----> cloudfunctions 创建getPhoneNumber --> index.js 文件
附上源码'use strict'; const db = uniCloud.database() exports.main = async (event, context) => { const res = await uniCloud.getPhoneNumber({ appid: '', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数 provider: 'univerify', apiKey: '', // 在开发者中心开通服务并获取apiKey apiSecret: '', // 在开发者中心开通服务并获取apiSecret access_token: event.access_token, openid: event.openid }); console.log(res); // res里的数据格式 { code: 0, success: true, phoneNumber: '186*****078' } // 执行入库等操作，正常情况下不要把完整手机号返回给前端 return await db.collection('regUser').add({ openid: event.openid, //前端提交过来的数据 PhoneNumber:res.phoneNumber, createTime: Date.now() }) };
``
保姆式提醒
- appid指的是（附上截图）
- apiKey和 apiSecret 所指的是，附上截图+链接（https://dev.dcloud/uniLogin）
前端代码实现
<template>
<view>
<view v-if="autoStatus" class="login-view">
<image class="logo-img" src="/static/logo.png"></image>
<view class="login-btn" @click="submitlogin()">
一键登陆
</view>
</view>
<view v-else>
不支持一键登陆功能
</view>
</view>
</template>
<script>
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() //关闭授权登录界面
}
})
}
}
}
</script>
<style lang="scss">
.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;
}
}
</style>
页面吊起截图
- 查询调用成功数据 入口
整体到这已经实现一键登录功能啦~
版权声明：本文标题：uniapp实现一键登录（保姆式教程） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725632488a1033878.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论