uniapp app端实现手机号一键登录

1、你的测试机一定要有sim卡且打开数据流量
2、在dcloud开发者中心申请权限
https://dev.dcloud.net.cn/pages/common/login?uniIdRedirectUrl=%252Fpages%252Fapp%252Flist
在这里插入图片描述
别忘记充值!!!

3、创建阿里云服务空间
在这里插入图片描述

4、关联云服务空间(要用登陆dcloud账号的邮箱登陆hbuilderx才能获取到)
在这里插入图片描述
5、新增一个getPhoneNumber文件(这个param.json的文件可以不用管)
在这里插入图片描述
6、index.js的代码,可以一键复制哟

'use strict';
exports.main = async (event,context) => {
	try{
	//event为客户端上传的参数
	console.log('event : ', event)
	const res = await uniCloud.getPhoneNumber({
		appid:'__UNI__6666666',// 填你自己的就ok了
		provider:'univerify',
		access_token:event.access_token,
		openid: event.openid
	})
	console.log('云函数res',res)
	//返回数据给客户端
	return {
		code:0,
		message:'获取手机号成功',
		data:res
	}
	}catch(e){
		console.log('云函数手机号获取失败e',e)
	}
};

这里有个坑!!!
不要再填入Apikey和Api秘钥了,人家都不提供了,肯定找不到
在这里插入图片描述
7、package.json

{
    "name": "univerify",
    "dependencies": [],
    "extensions": {
        "uni-cloud-verify": {}
    },
    "cloudfunction-config": {
        "memorySize": 512,
        "timeout": 5,
        "triggers": [],
        "path": "/getPhoneNumber",
        "runtime": "Nodejs8"
    }
}

8、在需要一键登录的地方填

 uni.getProvider({
        service: 'oauth',
        success: function (res) {
            console.log(res.provider) // ['qq', 'univerify']
            uni.preLogin({
                provider: 'univerify',
                success() { //预登录成功
                    // 显示一键登录选项
                    uni.login({
                        provider: 'univerify',
                        univerifyStyle: { // 自定义登录框样式
                            //参考`univerifyStyle 数据结构`
                            "fullScreen": true, // 是否全屏显示,默认值: false
                            "backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff
                            "backgroundImage": "", // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持)
                            "icon": {
                                "path": "static/xxx.png", // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo
                                "width": "60px", //图标宽度 默认值:60px
                                "height": "60px" //图标高度 默认值:60px
                            },
                            "closeIcon": {
                                "path": "static/xxx.png", // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo
                                "width": "60px", //图标宽度 默认值:60px (HBuilderX 4.0支持)
                                "height": "60px" //图标高度 默认值:60px (HBuilderX 4.0支持)
                            },
                            "phoneNum": {
                                "color": "#202020" // 手机号文字颜色 默认值:#202020
                            },
                            "slogan": {
                                "color": "#BBBBBB" //  slogan 字体颜色 默认值:#BBBBBB
                            },
                            "authButton": {
                                "normalColor": "#12B858", // 授权按钮正常状态背景颜色 默认值:#3479f5
                                "highlightColor": "##12B858", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)
                                "disabledColor": "#666666", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)
                                "textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff
                                "title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”
                                "borderRadius": "10px" // 授权按钮圆角 默认值:"24px" (按钮高度的一半)
                            },
                            "otherLoginButton": {
                                "visible": true, // 是否显示其他登录按钮,默认值:true
                                "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值:透明
                                "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值:透明
                                "textColor": "#656565", // 其他登录按钮文字颜色 默认值:#656565
                                "title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式”
                                "borderColor": "", //边框颜色 默认值:透明(仅iOS支持)
                                "borderRadius": "0px" // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半)
                            },
                            "privacyTerms": {
                                "defaultCheckBoxState": true, // 条款勾选框初始状态 默认值: true
                                "isCenterHint": false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
                                "uncheckedImage": "", // 可选 条款勾选框未选中状态图片(仅支持本地图片 建议尺寸 24x24px)(3.2.0+ 版本支持)
                                "checkedImage": "", // 可选 条款勾选框选中状态图片(仅支持本地图片 建议尺寸24x24px)(3.2.0+ 版本支持)
                                "checkBoxSize": 12, // 可选 条款勾选框大小
                                "textColor": "#BBBBBB", // 文字颜色 默认值:#BBBBBB
                                "termsColor": "#5496E3", //  协议文字颜色 默认值: #5496E3
                                "prefix": "我已阅读并同意", // 条款前的文案 默认值:“我已阅读并同意”
                                "suffix": "并使用本机号码登录", // 条款后的文案 默认值:“并使用本机号码登录”
                                "privacyItems": [ // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效
                                    {
                                        "url": "https://", // 点击跳转的协议详情页面
                                        "title": "用户服务协议" // 协议名称
                                    }
                                ]
                            },
                            "buttons": { // 自定义页面下方按钮仅全屏模式生效(3.1.14+ 版本支持)
                                "iconWidth": "45px", // 图标宽度(高度等比例缩放) 默认值:45px
                                "list": [{
                                    "provider": "apple",
                                    "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
                                },
                                {
                                    "provider": "weixin",
                                    "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
                                }
                                ]
                            }

                        },
                        success(res) {
                            //通过返回的openid和access_token作为云函数的event的参数,换取手机号
                            let {
                                openid,
                                access_token
                            } = res.authResult
                            console.log(res.authResult);
                            //调用云函数,换取手机号
                            //调用云函数的方法
                            uniCloud.callFunction({
                                name: "getPhoneNumber", //云函数的名字
                                // 传递给云函数的参数event
                                data: {
                                    openid,
                                    access_token,
                                },
                            })
                                // 调用云函数成功,支持then,catch
                                .then(async res => {
                                    // 登录成功
                                    // showToast('登录成功')
                                    //成功条件下,获取用户的手机号
                                    let phoneNumber = res.result.data
                                        .phoneNumber;
                                    // 调用公司的开发服务器,才能完成登录
                                    console.log('获取到的手机号', phoneNumber);
                                    //这里调你自己公司写的接口,完成剩下的登录操作

                                })
                                // 调用云函数失败
                                .catch(err => {
                                    console.log("云函数调用失败", err)
                                    // 跳转到其他的登录方式
                                    // showToast('登录失败')
                                })
                        },
                        fail(res) { // 登录失败
                            console.log(res.errCode)
                            if (res.errCode == 30002) {
                                uni.closeAuthView()
                            }
                            console.log(res.errMsg)
                        }
                    })

                },
                fail(res) { // 预登录失败
                    // 不显示一键登录选项(或置灰)
                    // 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器
                    // showToast('请检查SIM卡状态')
                    console.log(res.errCode)
                    console.log(res.errMsg)
                }
            })
        }
    });

完成了完成了!!!

根据提供的引用内容,uniapp微信小程序可以通过以下步骤实现手机号一键登录: 1.在uniapp项目中安装并引入wx-server-sdk模块,该模块可以用于调用云函数。 2.在云函数中使用wx-server-sdk模块的getPhoneNumber方法获取用户手机号码。 3.在小程序使用wx.login方法获取用户的code。 4.将获取到的code和encryptedData、iv等信息传递给云函数。 5.在云函数中使用code、encryptedData、iv等信息调用微信提供的解密算法,获取用户的手机号码。 6.将获取到的手机号码返回给小程序实现一键登录功能。 以下是示例代码: 1.云函数代码: ```javascript const cloud = require('wx-server-sdk') cloud.init() const wxContext = cloud.getWXContext() const appid = 'your appid' // 替换成自己的appid const appsecret = 'your appsecret' // 替换成自己的appsecret const wxServerSDK = require('wx-server-sdk') wxServerSDK.init({ env: wxContext.ENV, appid: appid, secret: appsecret }) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const { code, encryptedData, iv } = event const session = await wxServerSDK.cloud.callFunction({ name: 'login', data: { code: code } }) const sessionKey = session.result.session_key const phone = await wxServerSDK.cloud.callFunction({ name: 'getPhoneNumber', data: { appid: appid, sessionKey: sessionKey, encryptedData: encryptedData, iv: iv } }) return phone.result } ``` 2.小程序代码: ```javascript // 获取用户手机号码 getPhoneNumber: function (e) { wx.cloud.callFunction({ name: 'getPhoneNumber', data: { code: this.globalData.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv }, success: res => { console.log(res.result) // TODO: 处理获取到的手机号码 }, fail: err => { console.error(err) } }) } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值