在uni-app中如何使用一键登录，如何使用手机号一键登录
2024-06-01 10:32:33
1、首先需要在dcloud开发者控制台开通一键登录，
dcloudhttps://dev.dcloud.net.cn/uniLogin
https://dev.dcloud.net.cn/uniLogin
充值，获取关键参数 ApiKey 和 ApiSecret
2、登录云服务空间，创建云服务空间，选择运营商等 https://unicloud.dcloud.net.cn/home
3、在项目中创建 云开发环境 ，本项目演示选择的是阿里云服务器
4、项目目录 创建 getPhoneNumber/index.js
一键登录云函数 uni-app官网
getPhoneNumber/index.js
// 云函数
'use strict';const db = uniCloud.database()
exports.main = async (event) => {const res = await uniCloud.getPhoneNumber({appid: '__UNI__123456', // 替换成自己开通一键登录的应用的DCloud appidprovider: 'univerify',apiKey: 'abcdefghjklokdsadsadsa', // 在开发者中心开通服务并获取apiKeyapiSecret: 'abscdshjksdhjakdahshjdsad', // 在开发者中心开通服务并获取apiSecretaccess_token: event.access_token,openid: event.openid})// 执行入库等操作，正常情况下不要把完整手机号返回给前端 await db.collection('regUser').add({openid: event.openid, //前端提交过来的数据PhoneNumber: res.phoneNumber,createTime: Date.now()})return res
}
5、右键关联云服务空间
选择创建的云空间
关联后上传云函数
6、一键登录本地方法
import Vuex from '@/store/index.js'export function univerifyLogin(cb, fun, fun1) {const commit = Vuex.commit;const PROVIDER = 'univerify';const univerifyStyle = {"fullScreen": true,"icon": {"path": "static/icon/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo },"authButton": {"normalColor": "#00A861", // 授权按钮正常状态背景颜色 默认值：#3479f5 "highlightColor": "#008B50", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持） "disabledColor": "#7fd4b0", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持） "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff "title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录” "borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）},"privacyTerms": {"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true"uncheckedImage": "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持) "checkedImage": "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持) "textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB "termsColor": "#00A861", // 协议文字颜色 默认值： #5496E3 "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意” "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录” },}return new Promise((resolve, reject) => {uni.getProvider({service: 'oauth',success: (res) => {if (res.provider.indexOf(PROVIDER) !== -1) {// 一键登录已在APP onLaunch的时候进行了预登陆，可以显著提高登录速度。登录成功后，预登陆状态会重置uni.login({provider: PROVIDER,univerifyStyle: univerifyStyle,success: (res) => {let loginRes = res.authResultuni.closeAuthView();uni.showLoading({title: "登录中..."});uniCloud.callFunction({name: 'getPhoneNumber', // 你的云函数名称data: {access_token: loginRes.access_token, // 客户端一键登录接口返回的access_tokenopenid: loginRes.openid // 客户端一键登录接口返回的openid}}).then(e => {console.log('login success', e);if (e.result.code == 0) {typeof fun == "function" && fun(e.result)resolve('suc');} else {console.log('登录失败', e);}}).catch(err => {// 处理错误console.error("获取手机号err", err)uni.showModal({title: `登录失败`,content: err.errMsg ||"网络异常，请选择其他方式登录",showCancel: false})typeof fun1 == "function" && fun1(err)reject('err')})},fail: (err) => {console.error('授权登录失败：' + JSON.stringify(err));univerifyErrorHandler(err, cb);}})} else {cb && cb()}},fail: (err) => {console.error('获取服务供应商失败：' + JSON.stringify(err));cb && cb()}});})
}export function univerifyErrorHandler(err, cb) {const state = Vuex.state;const obj = {showCancel: true,cancelText: '其他登录方式',success(res) {console.log("rinima", res)if (res.confirm) {uni.redirectTo({url: '/pages/login/login'});}if (res.cancel) {cb && cb()}}} switch (true) {// 一键登录点击其他登录方式case err.code == 30002:uni.closeAuthView();cb && cb()break;// 未开通case err.code == 1000:uni.showModal(Object.assign({title: `登录失败: ${err.code}`,content: `${err.errMsg}\n开通指南：https://ask.dcloud.net.cn/article/37965`,/* confirmText: '开通指南',cancelText: '确定',success: (res) => {if (res.confirm) {setTimeout(() => {plus.runtime.openWeb('https://ask.dcloud.net.cn/article/37965')}, 500)}} */}, obj));break;// 预登陆失败case err.code == 30005:uni.showModal(Object.assign({showCancel: false,title: `登录失败`,content: `${state.univerifyErrorMsg ||err.metadata.desc || err.errMsg}`}, obj));break;//用户关闭验证界面case err.code == 30003:setTimeout(() => {uni.redirectTo({url: '/pages/login/login'});},500)break;}
}7、调用
引入
import { univerifyLogin } from '@/common/univerify.js'async openUnLogin() {await univerifyLogin(() => {uni.redirectTo({url: '/pages/login/login'});}, res => {console.log("个人中心一键登录：", res)let loginMobile = res.phoneNumberthis.userStoreLogin(loginMobile).then(res => {console.error("登录成功llllllllllll", res)this.userStoreUserInfos()util.showText("登录成功");})})},在uni-app中如何使用一键登录，如何使用手机号一键登录相关推荐
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录
flutter在IOS上的登录实现--QQ登录.微信登录.自动识别手机号一键登录.apple登录 一.QQ登录 使用的第三方库: 具体操作方法: 1.配置 Universal Links 2.QQ互联 ...
- android微信登录获取微信账号,微信小程序--登录授权，一键获取用户微信手机号并登录...
一.前言 微信小程序登录流程时序 说明: 小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器 开发者服务器以code换取 用户唯一标识openid 和 会话密钥sess ...
- 在uni-app中使用手机号一键登录
1.首先需要在dcloud开发者控制台开通一键登录 https://dev.dcloud.net.cn/uniLogin 开通一键登录服务, 获取关键最关键的两个参数 ApiKey 和 ApiSecr ...
- Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
- vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
- APP：校园网登录app—中小南—源码简析
转载请注明出处:http://www.cnblogs.com/wondertwo/p/5392496.html 最近一段时间真的很惭愧,一直琐事缠身没有空闲的时间来安安心心写一篇博客,直到今晚基本忙完 ...
- uni app和php开发微信登录代码,uniapp如何实现微信授权登录
uniapp实现微信授权登录的方法:首先获取对应的appid和appsecret:然后在uniapp项目的manifest.json中进行APP SDK配置和模块权限配置.最后实现编码. 本教程操作环 ...
- 在Android App中集成Google登录
技术文章 来源:码农网 发布:2016-09-19 浏览:194 摘要:今天,几乎所有的web和移动app都自带谷歌和Facebook登录,这对app开发者和用户来说是一个非常有用的功能,因为几乎每个 ...
- app中使用用户名/邮箱/手机号登录的思路分析
摘要:app中使用用户名/邮箱/手机号登录的思路分析 1.客户端 客户端需要传递2个参数 account 代表:用户名/邮箱/手机号 password 代表:密码这里问题来了,那么如何判断识别用户输入 ...
最新文章
- 如何获得PMP认证证书
- Linux的init进程（内核态到用户态的变化）
- 计算机专业需要汇编语言,重点大学计算机专业系列教材·汇编语言程序设计
- python 横坐标旋转,python 横坐标旋转
- kafka删除topic及其相关数据
- 数据结构与算法——链表汇总整理
- Atitit.attilax软件研发与项目管理之道
- VisualStudio移动开发（C#、VB.NET）Smobiler开发平台——AlbumView相册控件的使用方式...
- python join 和 split的常用使用方法
- 教你如何用通道来快速抠图的方法
- datasupport类删除_reiserfs文件系统反删除（Undelete）数据恢复操作的实践
- throw e 和 return 的浅显理解
- 将文件打成压缩包下载（OSS或FASTDFS）
- “仅三天可见” 的朋友圈有方法破解啦！
- 【两天搞定小米商城】【第三步】小米商城之导航部分
- 【计算机毕业设计】师生交流平台
- 互联网的女性主义特征（姜奇平）
- SecureCRT和SecureFx的使用
- 赌徒有10元，一次输赢1元，手头能到110元的概率
- 「深度好文」TCP BBR拥塞控制算法深度解析