产品类型:目前只有微信小程序。
目标:授权登录,建立用户体系。
框架:uniapp+云开发+云函数。
方案一:通过官方提供的 univerify 插件
官方文档:uni一键登录 - uni-app官网 (dcloud.io)
univerify 是DCloud 推出的一键登录产品,通过与运营商深度合作,实现APP用户无需输入帐号密码,即可使用本机手机号码自动登录的能力。
univerify是替代短信验证登录的下一代登录验证方式,能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。
问题描述:看起来很爽,估计用起来也很爽,但是收费,一次2分钱没必要,还是用微信openid吧
方案二:通过微信小程序 openid 标识
1、uniapp下建立云函数 login,代码如下
'use strict';
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log('event : ', event)
const appid = 'appid';
const secret = 'secret';
const apiUrl = 'https://api.weixin.qq.com/sns/jscode2session?appid='+appid+'&secret='+secret+'&js_code='+event.code+'&grant_type=authorization_code';
const res = await uniCloud.httpclient.request(apiUrl, {
method: 'GET',
data: {},
contentType: 'json', // 指定以application/json发送data内的数据
dataType: 'json' // 指定返回值为json格式,自动进行parse
})
//返回数据给客户端
return res
};
在云函数中发起请求,使用的是 uniCloud.httpclient 发起请求 - uni-app官网 (dcloud.io)
注意上面的 contentType和dataType参数不要删掉,否则不能正常返回,数据会有问题。
做的时候想着GET请求参数也拼到了URL里,就删掉了,导致返回结果异常。加上则正常。
2、在客户端调用云函数 login ,代码如下
// 获取code
uni.login({
provider: 'weixin',
success: async loginRes=>{
console.log(222,loginRes);
// 通过code获取openId 标识用户
uniCloud.callFunction({
name: 'login',
data: {
code: loginRes.code
}
}).then(res=>{
console.log(res.result)
})
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: async infoRes=>{
this.hasLogin = true;
console.log(111,infoRes.userInfo)
this.userInfo = infoRes.userInfo;
},
})
}
});
说一下和微信云函数获取 openid 的区别吧
微信由于云开发开通后,本身就已经和APPID及密钥关联起来了,所以只需要引入wx-server-sdk直接获取openid等相关参数。
操作步骤如下:先在云函数目录下执行 cnpm install --save wx-server-sdk@latest 安装云函数服务相关SDK,然后创建云函数。
// 云函数入口文件
const cloud = require('wx-server-sdk')
// 云函数环境配置
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
console.log(event,context)
const wxContext = await cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
env: wxContext.ENV,
}
}