uniapp实现手机号一键登录功能

1，第一步

HBuilder X开发者工具账号要和开发者中心控制台账号保持一致。

2，第二步

创建应用要和项目uni-appid一致。

3，第三步

开通一建登录基础配置，注：本地测试无需开通右下角 添加应用。 （项目上线打包时在更新添加应用步骤）
ApiKey和ApiSecret 是换取手机号和计费凭证关键。

4，第四步

创建云函数空间

5，第五步

在项目里面创建云开发环境，会显示 阿里云和腾讯云，看第四步自己创建的什么空间就选哪个。

6，第六步

右键点击cloudfunctions创建云函数getPhoneNumber。

在index文件夹里面写入代码

// getPhoneNumber里面index.js文件写入
'use strict';
exports.main = async (event, context) => {//event为客户端上传的参数console.log('event : ', event);console.log('参数', event.queryStringParameters);// event里包含着客户端提交的参数const res = await uniCloud.getPhoneNumber({appid: '',// 在manifest.json里面可以找到provider: 'univerify',apiKey: '',// 在DCloud开发者中心开通一键登录基础服务时自动生成的apiSecret: '',// 开通一键登录基础服务时自动生成的access_token: event.access_token,openid: event.openid});console.log('res',res); // res里包含手机号// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端// 如果数据库在uniCloud上，可以直接入库// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclientreturn {code: 0,message: '获取手机号成功',data:res}
};

还需要在package.json里面设置，直接复制就行，写完之后右键点击getPhoneNumber文件上传部署

{"name": "univerify","dependencies": {},"extensions": {"uni-cloud-jql": {},"uni-cloud-verify": {}}
}

7，第七步

在项目manifest.json里面配置一键登录。

8，第八步（实现代码）

// 看大家实际项目登录逻辑自行添加// 这一步写不写问题都不大
uni.getProvider({ //获取可用的服务提供商service: 'oauth',success: function(res) {console.log("000111",res.provider) // ['weixin', qq', 'univerify']}
});uni.preLogin({provider: 'univerify',success(res){  //预登录成功console.log("预登陆",res)// 显示一键登录选项uni.login({ //正式登录，弹出授权窗provider: 'univerify',univerifyStyle: {"fullScreen": true, // 是否全屏显示，默认值： false"backgroundColor": "#ffffff",  // 授权页面背景颜色，默认值：#ffffff}, // 自定义登录框样式 success(res) {console.log('login',res);// 在得到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)uni.closeAuthView(); //关闭授权登录界面}})},fail(err){  // 预登录失败console.log(err.errMsg)}
})

一建登录步骤到此结束，欢迎大家讨论和指导，登录弹窗本文设置的是全屏‘fullScreen’，大家可根据需求编辑，弹窗只能在手机端app才能显示。

uniapp实现手机号一键登录功能相关推荐

测试踩坑：手机号一键登录的手机双卡运营商问题
H2在v8.3.0.0迭代新增了手机号一键登录功能,除了单卡常规测试外,还有双卡测试时发现的问题留个记录. 前提: xr手机,是iphone手机双卡双待或者iphone全面屏手机,手机只插1张联通卡 ...
uni-app手机号一键登录
提示:手机号一键登录有两种方式. 第一种通过调用自有服务器,然后服务器调用云函数登录. 第二种可以前端直接调用云函数进行登录(暂不介绍). 提示:在我的项目中使用的是自由服务器登录,下面的案例可供参考 ...
uniapp手机号一键登录
uniapp手机号一键登录先讲几个坑避免操作完以后会出bug无效喷我部分机型会因为第一次在手机上编译普通基座无法触发手机号一键登录的弹框,这里当然是重启了,重启可以解决百分之八十的问题!!! 然后 ...
uniapp获取微信授权登录和手机号一键登录（保姆教程）
uniapp获取微信授权登录(保姆教程) 第一步下载官方给的解密文件'mWXBizDataCrypt' 没有文件就复制该文件的代码创建一个 var crypto = require('crypto' ...
微信小程序一键登录功能，使用uni-app和springboot（JWT鉴权）
目录概述微信登录接口说明关于获取微信用户的信息前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml 配置文件:Pom.xml 类:WeChat ...
在uni-app中使用手机号一键登录
1.首先需要在dcloud开发者控制台开通一键登录 https://dev.dcloud.net.cn/uniLogin 开通一键登录服务, 获取关键最关键的两个参数 ApiKey 和 ApiSecr ...
flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录
flutter在IOS上的登录实现--QQ登录.微信登录.自动识别手机号一键登录.apple登录一.QQ登录使用的第三方库: 具体操作方法: 1.配置 Universal Links 2.QQ互联 ...
1 秒完成授权，Authing 全新上线一键登录功能
01 Authing 一键登录功能已上线现如今,大部分应用都支持「手机号」+「验证码」的登录方式.但这种方式有个弊端在于--用户在「登录」环节输入手机号.获取验证码后,手机自动弹出验证码的时间大约只 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...

uniapp实现手机号一键登录功能

1，第一步

2，第二步

3，第三步

4，第四步

5，第五步

6，第六步

7，第七步

8，第八步（实现代码）

一建登录步骤到此结束，欢迎大家讨论和指导，登录弹窗本文设置的是全屏‘fullScreen’，大家可根据需求编辑，弹窗只能在手机端app才能显示。

uniapp实现手机号一键登录功能相关推荐

最新文章

热门文章

uniapp实现手机号一键登录功能

1，第一步

2，第二步

3，第三步

4，第四步

5，第五步

6，第六步

7，第七步

8，第八步 （实现代码）

一建登录步骤到此结束，欢迎大家讨论和指导，登录弹窗本文设置的是全屏‘fullScreen’，大家可根据需求编辑，弹窗只能在手机端app才能显示。

uniapp实现手机号一键登录功能相关推荐

最新文章

热门文章

8，第八步（实现代码）