了解:https://uniapp.dcloud.net.cn/uniCloud/README
uniCloud
是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
uniCloud
的 web控制台地址:https://unicloud.dcloud.net.cn
由于之前的课程中我们提到,不要将授权代码放入到前端,防止别人获取到appid和secretkey,所以这里我们可以使用unicloud的服务,来编写服务端代码,这样我们的key就不会泄露了。
具体流程如下:
1、 由于使用需要实名,所以先要进行实名验证。
2、然后我们需要创建一个新的空间,这个空间就是用于存放我们的云函数的地方。要给他一个好区分的名字。
3、后台这边就已经设置完了,云函数是要在HBuilderX中进行创建然后上传。
4、项目-右键-新建unicloud云开发环境。 然后在新文件夹关联到刚刚创建好的空间中。
5、之后在cloudfunctions上面右键,就可以创建新的函数了。
6、新建函数之后,就可以上传到云空间了。这时候就可以远程使用了。
7、更多的云函数可以在:https://uniapp.dcloud.io/uniCloud/cf-functions 查看。
云函数: getLoginToken
'use strict';
exports.main = async ( event, context ) => {
//event为客户端上传的参数
//console.log( 'event : ', event )
var form = {
appid: "wxxxxxxxxxxxxx",
secret: "xxxxxxxxxxxxxxxxxxxxxx",
js_code: event.code,
grant_type: "authorization_code", //这个是写死的 就直接可以使用authorization_code
}
const res = await uniCloud.httpclient.request(
"https://api.weixin.qq.com/sns/jscode2session", {
method: "GET",
data: form,
dataType: "json"
} )
//返回数据给客户端
return res.data
};
云函数:wxDecrype
'use strict';
const WXBizDataCrypt = require( "./WXBizDataCrypt.js" );
exports.main = async ( event, context ) => {
//event为客户端上传的参数
let pc = new WXBizDataCrypt( 'wxxxxxxxxxxxxx', event.sessionkey ); //wxXXXXXXX为你的小程序APPID
let phoneNumber = pc.decryptData( event.encryptedData, event.iv );
//console.log( "phoneNumber: ", phoneNumber ) //phoneNumber就是最终解密的用户信息
//返回数据给客户端
return phoneNumber.phoneNumber
};
需要额外引用: WXBizDataCrypt.js
文件
/pages/index/index.vue
updateUserInfo
函数中:
uniCloud.callFunction( {
name: 'getLoginToken',
data: {
"code": code
}
} ).then( res => {
//console.log( "updateUserInfo -- res: ", res );
_this.setlogininfo( {
openid: res.result.openid,
sessionkey: res.result.sessionkey
} );
}, err => {
console.log( "err: ", err );
} );
onGetPhoneNumber
函数中:
uniCloud.callFunction( {
name: "wxDecrype",
data: {
"sessionkey": this.getsessionkey(),
"encryptedData": e.detail.encryptedData,
"iv": e.detail.iv
}
} ).then( res => {
this.phoneNumber = res.result;
}, err => {
console.log( "调用【wxDecrype】,发生错误: " + err );
} )
全部写好后,上传到云函数测试效果即可。