uni手机号一键登录，后端php如何配合实现

uni手机号一键登录，后端php如何配合实现

uni云服务空间

1、新建阿里云有一个免费的

2、初始化云空间

3、新建 getPhoneNumber package.json

添加代码

{
	"name": "univerify",
	"extensions": {
		"uni-cloud-verify": {} // 启用一键登录扩展，值为空对象即可
	}
}

4、新建  index.js

// 云函数
exports.main = async (event) => {

	const res = await uniCloud.
	getPhoneNumber({
		appid: event.queryStringParameters.appid, // 替换成自己开通一键登录的应用的DCloud appid
		provider: 'univerify',
		apiKey: event.queryStringParameters.apiKey, // 在开发者中心开通服务并获取apiKey
		apiSecret: event.queryStringParameters.apiSecret, // 在开发者中心开通服务并获取apiSecret
		access_token: event.queryStringParameters.access_token,
		openid: event.queryStringParameters.openid		
	})
	// 执行入库等操作，正常情况下不要把完整手机号返回给前端	
	return {
		code: 0,
		data: res,
		message: '获取手机号成功'
	}


	return res
}

右击上传到云空间

uniapp  vue app登录接口编写

// #ifdef APP-PLUS
const appLogin = () => {
	uni.showLoading({
		title: '登录中'
	});
	uni.login({
		provider: 'univerify',
		univerifyStyle: {
			"fullScreen": true,
			"icon": {
				"path": "/static/image/logo.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
				"width": "176px",
				"height": "39px",
			},
			"authButton": {
				"normalColor": "#4F4F52", // 授权按钮正常状态背景颜色 默认值：#3479f5  
				"highlightColor": "#b70d0d", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
				"disabledColor": "#999999", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
				"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
				"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
				"borderRadius": "10px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
			},

			"otherLoginButton": {
				"visible": "true", // 是否显示其他登录按钮，默认值：true
				"normalColor": "#FFFFFF", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
				"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
				"textColor": "#999999", // 其他登录按钮文字颜色 默认值：#000000
				"title": "其他手机号码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
				"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
				"borderColor": "#c5c5c5", //边框颜色 默认值： #c5c5c5（仅ios支持）
				"borderRadius": "10px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
			},


			"privacyTerms": {
				"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true
				"uncheckedImage": "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)   
				"checkedImage": "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)   
				"checkBoxSize": 12, // 可选 条款勾选框大小，仅android支持
				"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
				"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
				"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
				"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
				"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
					{
						"url": "http://xxxx.xxxx.cn/protocol/index.html", // 点击跳转的协议详情页面  
						"title": "用户协议" // 协议名称  
					}
				]
			},
			"buttons": { // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
				"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
				"list": [{
					"provider": "weixin",
					"iconPath": "/static/image/login-wx.png" // 图标路径仅支持本地图片
				}]
			}
		},
		success: res => {
			uni.hideLoading();
			if (res.errMsg == 'login:ok') {
				getUniapp().then(result => {
					//执行云函数
					uniCloud.callFunction({
						name: 'getPhoneNumber',
						data: {
							queryStringParameters: {
								appid: result.data
									.uniapp_appid, // 替换成自己开通一键登录的应用的DCloud appid
								provider: 'univerify',
								apiKey: result.data
									.uniapp_api_key, // 在开发者中心开通服务并获取apiKey
								apiSecret: result.data
									.uniapp_api_secret, // 在开发者中心开通服务并获取apiSecret
								// 客户端一键登录接口返回的access_token
								access_token: res.authResult.access_token,
								// 客户端一键登录接口返回的openid
								openid: res.authResult.openid
							}
						}
					}).then(res_num => {
						//关闭弹框事件
						if (res_num.result.code == 0) {
							//获取的手机号
							//do somthing...
							login_phone({
								// 客户端一键登录接口返回的access_token
								access_token: res.authResult.access_token,
								// 客户端一键登录接口返回的openid
								openid: res.authResult.openid
							}).then(res_login => {
								console.log('res_login', res_login, )
								if (res_login.code == 0) {
									uni.setStorageSync('_USER_ACCESS_TOKEN',
										res_login.data.token);
								}

								uni.$u.toast(res_login.msg)
								uni.switchTab({
									url: '/pages/index/index'
								})
								uni.closeAuthView();

							}).catch(err_login => {
								uni.$u.toast(err_login.msg)
								uni.closeAuthView();
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '授权失败~'
							});
						}
						//if end
					}).catch(msg => {
						//关闭弹框事件
						uni.closeAuthView();
						uni.hideLoading();
						console.error(msg);
					});
				})
			} else {
				//关闭弹框事件
				uni.closeAuthView();
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: res['errMsg']
				});
			}
		},
		fail: res => {
			uni.hideLoading();
			if (res.errCode == '30002') {}
			if (res.errCode == '30008') {}
			uni.navigateTo({
				url: '/plugins/login/login'
			})
		}
	});

}
// #endif

后端php login_phone 接口方法

        $param['access_token'] =  $param['access_token']
        $param['openid'] =  $param['openid']
        $param['appid'] = $config['uniapp_appid'];
        $param['apiKey'] = $config['uniapp_api_key'];
        $param['apiSecret'] = $config['uniapp_api_secret'];
        $sign = $this->getSignature($param, $config['uniapp_api_secret']);
        $requestUrl = $config['uniapp_cloud_url'] . "?sign=" . $sign . "&" . http_build_query($param);
        $result = json_decode(file_get_contents($requestUrl), true);
        if (isset($result['error'])) {
            return dataReturn(-2, $result['error']['message']);
        }

        $phone = $result['data']['phoneNumber'];

protected function getSignature($arrData, $key)
    {
        ksort($arrData);
        $paramsString = "";
        unset($arrData['mall_id']);
        foreach ($arrData as $k => $value) {
            if (strlen($paramsString) == 0)
                $paramsString .= $k . "=" . $value;
            else
                $paramsString .= "&" . $k . "=" . $value;
        }
        $stringSignTemp = rtrim($paramsString, '&');
        return hash_hmac('sha256', $stringSignTemp, $key);
    }

然后

 

 一定要添加路径

然后去uniapp打包

然后去uni云服务空间

 

设置了之后去设置 一键登录

 这里一定要MD5和SHA256 都配置了才行。

这样的话我们就可以在手机上测试了

需要的页面就看到了