admin管理员组文章数量:1566351
本文讲解了使用uniapp一键登录功能的详细步骤,实现效果如图:
一、创建应用
1. 登录dcloud开发者中心
2. 创建应用,选择应用类型为uniapp,并填写应用名称
3. 在HBuilderX中设置项目的AppID
二、开通一键登录服务
点击左侧【一键登录】菜单下的【基础配置】,同意协议并开通
ApiKey和ApiSecret在后续将用到
三、创建uniCloud模块,关联云服务空间
1. HBuilderX中,右键项目,点击【创建uniCloud云开发环境】,选择腾讯云或阿里云。
2. 关联云服务空间
(1) 右键unicloud目录,点击【关联云服务空间或项目】
(2) 如果没有云服务空间,点击【新建】
(3) 在新打开的网页弹窗中,填写服务空间的名称,并点击创建
(4) 回到HBuilderX,选择一个服务空间,点击【关联】按钮
四、创建云函数
1. 右键/uniCloud/cloudfunctions目录,新建云函数
2. 打开/uniCloud/cloudfunctions/login/index.js,添加文件内容如下
'use strict';
const crypto = require('crypto')
exports.main = async (event, context) => {
console.log('event : ', event); //event为客户端上传的参数
console.log('参数', event.queryStringParameters); //云函数URL化的方式,获取参数
const res = await uniCloud.getPhoneNumber({
appid: 'xxx', // 开通一键登录的应用的DCloud appid,使用callFunction方式调用时可以不传(会自动取当前客户端的appid),如果使用云函数URL化的方式访问必须传此参数
provider: 'univerify',
apiKey: 'xxx', // 在开发者中心开通服务并获取apiKey
apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret
access_token: event.queryStringParameters.access_token,
openid: event.queryStringParameters.openid
})
console.log('res', res); // res里包含手机号
// 执行用户信息入库等操作,正常情况下不要把完整手机号返回给前端
// 如果数据库在uniCloud上,可以直接入库
// 如果数据库不在uniCloud上,可以通过 uniCloud.httpclient API,将手机号通过http方式传递给其他服务器的接口,详见:https://uniapp.dcloud/uniCloud/cf-functions?id=httpclient
return res
};
3. 右键云函数/uniCloud/cloudfunctions/login,选择【上传部署】
注意:每次修改了云函数文件内容,都需要重新上传部署
五、云函数设置
右键/uniCloud目录,选择【打开uniCloud Web控制台】,设置如下内容:
1. 云函数URL化的path
(1). 找到上传的云函数,点击详情
- 设置云函数的访问路径
2. 跨域配置,设置安全域名
六、模块配置
在项目的manifest.json中开启【一键登录】
七、编写代码:
公共js文件,主要涉及两个相关API:
export default {
/**
* 一键登录预登录检查
* @return {boolean} 是否支持一键登录
*/
pre_login(){
uni.getProvider({ //获取可用的服务提供商
service: 'oauth',
success: function(res) {
console.log(res.provider) // ['weixin', qq', 'univerify']
}
});
return new Promise((resolve, reject)=>{
uni.preLogin({ //预登录
provider: 'univerify', //用手机号登录
success() {
resolve(true)
},
fail(err) { //预登录失败
console.log(`预登录失败(${err.errCode})`, err.errMsg)
resolve(false)
}
})
})
},
/**
* 本机号码一键登录
*/
async fast_login(){
return new Promise((resolve, reject)=>{
uni.login({ //正式登录,弹出授权窗
provider: 'univerify',
univerifyStyle: { // 自定义登录框样式
"fullScreen": true, // 是否全屏显示,true表示全屏模式,false表示非全屏模式,默认值为false。
"backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff
"phoneNum": {
"color": "#000000", // 手机号文字颜色 默认值:#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'}
resolve(res.authResult)
// 在得到access_token后,通过callfunction调用云函数
// uniCloud.callFunction({
// name: 'login', // 云函数名称
// 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() //关闭授权登录界面
// }
// })
uni.closeAuthView() //关闭授权登录界面
},
fail(err) { // 正式登录失败
console.log(`一键登录失败(${err.errCode})`, err.errMsg)
reject(err)
// uni.closeAuthView() //关闭授权登录界面
}
})
})
}
}
在登录页面中调用:
import service from "@/common/mp_service.js"
async onLoad() {
const can_login = await service.pre_login()
if(can_login){
this.fast_login()
}
},
methods: {
async fast_login() {
try{
const { access_token, openid } = await service.fast_login()
console.log("uniapp一键登录", access_token, openid)
// 登录操作,获取token和用户信息等操作
}catch(e){
console.log('一键登录失败', e)
}
},
}
版权声明:本文标题:uniapp本机号码一键登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726253257a1062685.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论