unicloud云开发---uniapp云开发(四)---本机手机号一键登录以及第三方登陆
2024-05-30 05:17:32
我们来实现一键登录以及第三方登陆
一键登录手登陆机号使用我们的视频教程(免费)链接为https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
未经本人允许，禁止转载
非常方便的一个东西
uni一键登陆
- 主要以本机号码为例演示 下面也有其它(微信/qq)
- 开通一键登录
- 一键登陆
- 获取可用服务商
- 预登陆
- 小案例
- 登陆
- 一键登录拿到access_token
- access_token换取手机号
- 在云函数中
- 客户端传送access_token
- 本机号码一键登录案例
- 逻辑和效果
- 云函数
- 页面代码
- 微信登陆
- 效果
- 登陆
- 获取用户信息
- 检测登陆是否过期
- 演示代码
- QQ登陆
- 效果
- 登陆
- 获取用户信息
- 检测登陆是否过期
- 演示代码
主要以本机号码为例演示 下面也有其它(微信/qq)
预登陆只有app支持
开通一键登录
登陆开发者后台 https://dev.dcloud.net.cn/
在这里开通即可 可以先充值一块钱测试
一键登陆
获取可用服务商
uni.getProvider({service: 'oauth',success: function (res) {console.log(res.provider)}
});
我的手机测试 如下
微信小程序开发工具内
预登陆
可以判断当前设备环境是否支持一键登录
uni.preLogin({provider: 'univerify',success() { //预登录成功// 显示一键登录选项console.log("预登陆成功")},fail(res) { // 预登录失败// 不显示一键登录选项（或置灰）// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器console.log(res.errCode)console.log(res.errMsg)}
})小案例
如果支持一键登陆 就显示一键登录 否则就显示普通账号密码登陆
<template><view><view v-if="isSupport" class="content"><image class="logo" src="/static/logo.png" @click="login()"></image><view class="text-area"><text class="title">{{title}}</text></view></view><view v-if="!isSupport"><input placeholder="账号" /><input placeholder="密码" /></view></view>
</template><script>export default {data() {return {title: '点击图片一键登录',isSupport: true}},onLoad() {this.prelogin()},methods: {login(){uni.login({provider: 'univerify',univerifyStyle: { // 自定义登录框样式//参考`univerifyStyle 数据结构`},success(res){ // 登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}},fail(res){ // 登录失败console.log(res.errCode)console.log(res.errMsg)}})},prelogin() {let vm = this;uni.preLogin({provider: 'univerify',success(){ //预登录成功// 显示一键登录选项console.log("预登陆成功")},fail(res){ // 预登录失败// 不显示一键登录选项（或置灰）// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器vm.isSupport = false;console.log(res.errCode)console.log(res.errMsg)}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>登陆
一键登录拿到access_token
univerifyStyle 数据结构样式 参考链接 https://uniapp.dcloud.io/univerify
uni.login({provider: 'univerify',univerifyStyle: { // 自定义登录框样式//参考`univerifyStyle 数据结构`},success(res) { // 登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}uni.closeAuthView(); //关闭一键登陆窗口 },fail(res) { // 登录失败console.log(res.errCode)console.log(res.errMsg)}
})如下
这里拿到 openid 和access_token
console.log(res.authResult)
一键登陆成功后 记得关闭登陆窗口
uni.closeAuthView()
access_token换取手机号
拿到手机号就可以用手机号注册什么的了 也可以通过手机号获取信息
在云函数中
如果不知道如何创建云函数 请参考 https://dmhsq.blog.csdn.net/article/details/113746528
'use strict';
exports.main = async (event, context) => {//event为客户端上传的参数const res = await uniCloud.getPhoneNumber({），provider: 'univerify', //微信 weixin qq qqapiKey: 'xxx', // 在开发者中心开通服务并获取apiKeyapiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecretaccess_token: event.access_token,openid: event.openid})console.log(res);//返回数据给客户端return "登陆成功"
};
客户端传送access_token
uni.login({provider: 'univerify',univerifyStyle: { // 自定义登录框样式//参考`univerifyStyle 数据结构`},success(res) { // 登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}uniCloud.callFunction({ //换取手机号 但是不返回手机号(返回不安全)name: 'dologintest',data: {access_token: res.authResult.access_token,openid: res.authResult.openid},success:function(res){console.log(res)}})uni.closeAuthView()},fail(res) { // 登录失败console.log(res.errCode)console.log(res.errMsg)}
})
调用成功
本机号码一键登录案例
逻辑和效果
一键登录 获取手机号 在数据查询 如果没有此账号 就默认注册
如果环境不支持号码一键登录 就显示账号密码登陆
创建云数据库 如果你不知道如何创建 请参考 https://dmhsq.blog.csdn.net/article/details/113855441
这里只用用户名和手机号
首先我们预登陆 如果成功 说明支持号码一键登录 如果不支持 就显示 账号密码登陆
一键登陆
如果没有注册 就默认注册
如果注册过 就返回用户名
云函数
'use strict';
exports.main = async (event, context) => {//event为客户端上传的参数const res = await uniCloud.getPhoneNumber({provider: 'univerify',apiKey: 'xxxxxx', // 在开发者中心开通服务并获取apiKeyapiSecret: 'xxxxxxx', // 在开发者中心开通服务并获取apiSecretaccess_token: event.access_token,openid: event.openid})// console.log(res.phoneNumber);if (res.success){const db = uniCloud.database();// 获取 `usertest` 集合的引用const collection = db.collection('usertest');let resp = await collection.where({phone:res.phoneNumber}).get();let msgs = {code: 0,msg: "成功"}if(resp.data.length==0){let resps = await collection.add({username:"无名称",phone:res.phoneNumber});msgs.msg = "注册成功,欢迎使用,亲爱的用户"}else{msgs.msg = "登陆成功,"+resp.data[0].username}return msgs;}else{return {code: 4001,msg: "获取手机号失败"}}};页面代码
<template><view><view v-if="isSupport" class="content"><image class="logo" src="/static/logo.png" @click="login()"></image><view class="text-area"><text class="title">{{title}}</text></view></view><view v-if="!isSupport"><input placeholder="账号" /><input placeholder="密码" /></view></view>
</template><script>export default {data() {return {title: '点击图片一键登录',isSupport: true}},onLoad() {this.prelogin()},methods: {login(){uni.login({provider: 'univerify',univerifyStyle: { // 自定义登录框样式//参考`univerifyStyle 数据结构`},success(res){ // 登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}uniCloud.callFunction({name:'dologintest',data:{access_token:res.authResult.access_token,openid:res.authResult.openid},success:function(res){uni.showToast({icon:"none",title:res.result.msg})}})uni.closeAuthView()},fail(res){ // 登录失败console.log(res.errCode)console.log(res.errMsg)}})},prelogin() {let vm = this;uni.preLogin({provider: 'univerify',success(){ //预登录成功// 显示一键登录选项console.log("预登陆成功")uni.showToast({icon:"none",title:"预登陆成功"})},fail(res){ // 预登录失败// 不显示一键登录选项（或置灰）// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器vm.isSupport = false;console.log(res.errCode)console.log(res.errMsg)}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>微信登陆
效果
登陆
uni.login({provider: 'weixin',success(res) { // 登录成功uni.showToast({icon: 'none',title: '登陆成功'})},fail(res) { // 登录失败uni.showToast({icon: 'none',title: '登陆失败'})}
})获取用户信息
这里显示 用户名
uni.getUserInfo({success: function(res) {uni.showToast({icon: 'none',title: '用户名为' + res.userInfo.nickName})}
})返回的数据格式为
{"errMsg": "getUserInfo:ok","userInfo": {"openId": "xxxxx","nickName": "xxxx","gender": xxxx,"city": "xxx","province": "xxx","country": "xxxx","avatarUrl": "xxxxxxxxxx","unionId": "xxxx"}
}参考上面的手机号码登陆案例 一样可以实现登陆注册
检测登陆是否过期
uni.checkSession({success: function(res) {console.log(res)}
})演示代码
<template><view><view class="content"><button type="primary" @click="login()">登陆</button><button type="primary" @click="getUser()">获取用户信息</button><button type="primary" @click="check()">检测登陆是否过期</button></view></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {getUser(){uni.getUserInfo({success:function(res){uni.showToast({icon: 'none',title: '用户名为'+res.userInfo.nickName})}})},check(){uni.checkSession({success:function(res){console.log(res)}})},login() {uni.login({provider: 'weixin',success(res) { // 登录成功uni.showToast({icon: 'none',title: '登陆成功'})},fail(res) { // 登录失败uni.showToast({icon: 'none',title: '登陆失败'})}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>QQ登陆
相当于微信登陆 只改变了
效果
登陆
uni.login({provider: 'weixin',success(res) { // 登录成功uni.showToast({icon: 'none',title: '登陆成功'})},fail(res) { // 登录失败uni.showToast({icon: 'none',title: '登陆失败'})}
})获取用户信息
这里显示 用户名
uni.getUserInfo({success: function(res) {uni.showToast({icon: 'none',title: '用户名为' + res.userInfo.nickName})}
})如果获取不到 就使用
<button @getuserinfo=“getUserInfo” open-type=“getUserInfo” type=“primary”>获取信息
getUserInfo(e) {console.log(e.detail.userInfo)uni.showToast({icon: 'none',title: "欢迎您" + e.detail.userInfo.nickName})
}
返回的数据格式为
userInfo:{avatarUrl: "xxxxxx"city: "xxxxcountry: "xxxx"gender: 1language: "zh_CN"nickName: "xxxx"province: "xxxxx"
}参考上面的手机号码登陆案例 一样可以实现登陆注册
检测登陆是否过期
uni.checkSession({success: function(res) {console.log(res)}
})
演示代码
<template><view><view class="content"><button type="primary" @click="login()">登陆</button><button @getuserinfo="getUserInfo" open-type="getUserInfo" type="primary">获取信息</button><button type="primary" @click="check()">检测登陆是否过期</button></view></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {getUserInfo(e) {console.log(e.detail)uni.showToast({icon:'none',title: "欢迎您"+e.detail.userInfo.nickName})},getUser(){uni.getUserInfo({withCredentials:true,success:function(res){console.log(res)uni.showToast({icon:'none',title:res.userInfo})},fail:function(res){console.log(res)}})},check(){uni.checkSession({success:function(res){console.log(res)}})},login() {uni.login({provider: 'qq',success(res) { // 登录成功console.log(res)uni.showToast({icon:'none',title:"登陆成功"})},fail(res) { // 登录失败uni.showToast({icon: 'none',title: '登陆失败'})}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
unicloud云开发---uniapp云开发(四)---本机手机号一键登录以及第三方登陆相关推荐
- unicloud云开发---uniapp云开发(一)---服务空间创建以及部署一个云函数
云开发系列 视频 https://www.bilibili.com/video/BV1eK4y1p7Qe 新系列视频 我们的视频教程(免费)链接为https://static-b5208986-2c0 ...
- uni-app云开发基础保姆级教程
什么是uni-app云开发 uni-app云开发,也叫uniCloud,uniCloud是由Dcloud联合阿里云,腾讯云推出的,基于serverless的,跨全端的.用js开发服务端的云产品 uni ...
- uniapp 云开发APP手机号码一键登录
univerify 是DCloud 推出的一键登录产品,通过与运营商深度合作,实现APP用户无需输入帐号密码,即可使用本机手机号码自动登录的能力.univerify是替代短信验证登录的下一代登录验证方 ...
- uniapp开发APP从开发到上架全过程（一）
前端时间受朋友委托帮他开发了一款APP,综合考虑了下,没有上原生,使用了uniapp这一套技术栈来进行开发 uniapp是dcloud推出的一套跨端前端解决方案,可以通过一套代码生成小程序.安卓.IO ...
- uniapp实现手机号一键登录功能
1,第一步 HBuilder X开发者工具账号要和开发者中心控制台账号保持一致. 2,第二步 创建应用要和项目uni-appid一致. 3,第三步 开通一建登录基础配置,注:本地测试无需开通右下角 添 ...
- 【uni-app】uniapp 实现一键登录 超详细记录~
uniapp 实现一键登录 一. 前置条件: 开通uniCloud, 开通一键登录功能 二. 一键登录代码 & 云函数代码 三. 其他条件 四. 遇到过什么问题, 如何处理(本地函数同个局域网 ...
- uniapp一键登录功能
官方文档入口 实现条件 手机安装有sim卡 手机开启数据流量(与wifi无关,不要求关闭wifi,但数据流量不能禁用.) 开通uniCloud服务(但不要求所有后台代码都使用uniClou ...
- uniapp手机号一键登录
uniapp手机号一键登录 先讲几个坑避免操作完以后会出bug无效喷我 部分机型会因为第一次在手机上编译普通基座无法触发手机号一键登录的弹框,这里当然是重启了,重启可以解决百分之八十的问题!!! 然后 ...
- uniapp一键登录流程及代码
原理流程: 通过三大运营商和uniCloud云函数,以移动网络(流量)去鉴别手机号,用户只需要点击"登录"按钮,前端开发者就可以获取到手机号,将这个手机号通过接口传递给后端,后端一 ...
最新文章
- ATL::CStringA和std::string之间转换的一些误区
- Android程序ToDoList增加配置项页面
- 通过 OpenAPI 部署 Nbsf_Management API Service
- 如何零基础或者转行数据分析师？
- ASP.Net缓存 1
- 使用Java解决您的数据科学问题
- css 一些 常用布局
- 2017年机器之心北京开会_2017年成为机器人的感觉
- Discuz!客户端api开发（一）
- .net core linux 串口,.Net Core 跨平台应用使用串口、串口通信 ，可能出现的问题、更简洁的实现方法...
- apk 反编译 java_Android apk反编译成java源码实战操作全指南
- 如何做一名优秀的下属
- 我的个人品牌——钱胖子
- [Telink][TLSR8251] [泰凌微] DTM测试教程
- vue 开发ui库_面向设计师的ui ux开发vue js
- x58和x79服务器性能,X58接班人:2012年Intel最牛主板X79规格曝光
- 腾讯游戏平台下载|腾讯游戏平台使用体验
- 泸州市的电子计算机学校名称,泸州市电子机械学校 学校图片简介
- 指挥调度中心如何选择调度台？
- 【MinIO理论】MinIO Erasure Code Quickstart Guide