uni-app对接一键登录

平湖正月 發表於 2024-11-21 19:06:00

官方文档地址：https://uniapp.dcloud.net.cn/univerify.html
1.
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185508255-1666703865.png">
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185520859-1428025859.png">
2.开通uniCloud服务
一键登录功能需要用到云空服务空间和云函数所以必须开通服务空间，你一键登录创建的原函数上传后也会存在这里面
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185549152-1091346825.png">
 3.配置manifest.json ，需要在App模块配置勾选上OAuth(登录鉴权)和一键登录(univerify)
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185605350-95571240.png">
 
4.
创建云uniCloud云开发环境 上面的步骤都配置好了，接下来就可以回到编辑器创建云开发环境了，右击你的项目文件夹 -> 选择创建uniCloud云开发环境 -> 选择你的云服务空间类型(阿里云、腾讯云、支付宝小程序云)。创建好之后，右击生成的uniCloud文件夹关联你的服务空间。 ————————————————
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185627244-974989424.png">
 
<h4>创建云函数（切记创建完右键上传到云空间）</h4>
右击<code>cloudfunctions</code>文件夹选择<code>新建云函数/云对象</code>选项去创建你的云函数。创建完并添加完代码后，右击你创建的云函数文件夹上传部署你的云函数。
 
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185658575-1551794426.png">
 
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185705831-928053950.png">
 
<img src="https://img2024.cnblogs.com/blog/1949145/202411/1949145-20241121185712312-672626979.png">
 云函数代码
<div class="cnblogs_code">
<pre>'use strict';

const db = uniCloud.database()

exports.main = async (event, context) => {
const res = await uniCloud.getPhoneNumber({
 appid: '__UNI__872BDC2', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
 provider: 'univerify',
 access_token: event.access_token,
 openid: event.openid
});

console.log(res); // res里的数据格式 { code: 0, success: true, phoneNumber: '186*****078' }
return res
};</pre>
</div>
一键登录代码
<div class="cnblogs_code">
<pre>login() {
 let _this = this
 uni.login({
 provider: 'univerify',
 univerifyStyle: { // 自定义登录框样式
 "fullScreen": false,
 "title": '快速登录',
 "backgroundColor": "#ffffff",
 "phoneNum": {
 "color": "#000000", // 手机号文字颜色默认值：#000000
 "fontSize": "18" // 手机号字体大小默认值：18
 },
 "slogan": {
 "color": "#8a8b90", //slogan 字体颜色默认值：#8a8b90
 "fontSize": "12" // slogan 字体大小默认值：12
 },
 "icon": {
 "path": "/static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片默认显示App logo
 },
 // "closeIcon": {
 // "path": "/static/none.png" // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持
 // },
 // 其他登录方式
 "otherLoginButton": {
 "visible": "true", // 是否显示其他登录按钮，默认值：true
 "title": "短信验证码登录", // 其他登录方式按钮文字默认值：“其他登录方式”
 },
 // 一键登录
 "authButton": {
 "normalColor": "#EF801B", // 授权按钮正常状态背景颜色默认值：#3479f5
 "highlightColor": "#EF801B", // 授权按钮按下状态背景颜色默认值：#2861c5（仅ios支持）
 "disabledColor": "#EF801B", // 授权按钮不可点击时背景颜色默认值：#73aaf5（仅ios支持）
 "textColor": "#ffffff", // 授权按钮文字颜色默认值：#ffffff
 "title": "本机号码一键登录" // 授权按钮文案默认值：“本机号码一键登录”
 },
 "privacyTerms": {
 "defaultCheckBoxState": false, // 条款勾选框初始状态默认值： true
 "prefix": "我已阅读并同意", // 条款前的文案默认值：“我已阅读并同意”
 "suffix": "并使用本机号码登录", // 条款后的文案默认值：“并使用本机号码登录”
 "textColor": "#666666",
 "termsColor": "#2D93EC",
 "privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
 {
 "url": "https://app.sheyuntai.com/automatic/m6190.agreement/content.html?id=1&version=m6190", // 点击跳转的协议详情页面
 "title": "用户服务协议" // 协议名称
 },
 {
 "url": "https://app.sheyuntai.com/automatic/m6190.agreement/content.html?id=2&version=m6190", // 点击跳转的协议详情页面
 "title": "隐私政策" // 协议名称
 }
 ]
 },
 },
 success(res) { // 登录成功
 // 在得到access_token后，通过callfunction调用云函数
 uniCloud.callFunction({
 name: 'getPhoneNumber', // 云函数名称
 data: { //传给云函数的参数
 'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
 'openid': res.authResult.openid // 客户端一键登录接口返回的openid
 },
 success(callRes) {// 一键登录这里拿到了手机号
 _this.$api
 .post(global.apiUrls.xxx, {
 mobile: callRes.result.phoneNumber //获取到的手机号
 })
 .then((user) => {
 //处理登录逻辑
 }).catch(err => {
 uni.closeAuthView()
 setTimeout(() =>{
 _this.$message.info(user.data.errMessage);
 },100)
 })

 },
 fail(callErr) {
 console.log('调用云函数出错' + callErr)
 uni.closeAuthView()
 },
 complete() {
 // uni.closeAuthView() //关闭授权登录界面
 console.log('complete--------');
 }
 })

 },</pre>
</div>
 至此完结。 
来源：https://www.cnblogs.com/qdjj/p/18561344

頁: [1]

琼殿技术论坛's Archiver

uni-app对接一键登录