一、微信小程序授权登录简介
微信小程序是一种基于微信开发的应用程序,通过微信场景、接口、工具和服务来提供服务。通过微信小程序授权登录,用户可以使用微信账号信息,快速登录小程序,为用户提供便捷的用户体验。
二、uniapp微信小程序授权登录实现方法
在uniapp开发微信小程序时,提供了方便的授权登录方法。以下是实现微信小程序授权登录的步骤:
1、创建小程序应用
创建小程序应用,获取appid,并将appid填写到小程序配置中。
2、引入uniapp官方插件
{
"plugins": {
"login": {
"version": "1.2.1",
"provider": "wx65ee288601bdd887"
}
}
}
在uniapp的manifest.json文件中引入官方的微信登录插件。
3、调用uni.login方法
uni.login({
provider: 'weixin',
success: function (res) {
var code = res.code;
//通过oauth2接口获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
var nickName = infoRes.userInfo.nickName;
}
});
}
});
调用uni.login方法,provider参数传入weixin,获取微信code。之后通过uni.getUserInfo方法,传入provider参数,获取用户信息。
三、微信小程序授权登录注意事项
1、授权登录需要https支持
微信小程序规定,授权登录必须在HTTPS安全协议下才能使用,所以在开发过程中必须确保使用的服务器为HTTPS协议。
2、用户授权需要用户允许
在调用uni.getUserInfo方法获取用户信息时,需要用户授权允许获取用户信息,否则会获取不到用户信息。
3、获取信息需要小程序授权
在uniapp中,获取用户信息需要小程序授权。微信小程序授权获取用户信息文档地址
四、代码示例
1、manifest.json中引入微信登录插件
{
"plugins": {
"login": {
"version": "1.2.1",
"provider": "wx65ee288601bdd887"
}
}
}
2、uni.login方法调用
uni.login({
provider: 'weixin',
success: function (res) {
var code = res.code;
//通过oauth2接口获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
var nickName = infoRes.userInfo.nickName;
}
});
}
});
3、获取用户信息授权
在pages/index/index.vue
中,调用uni.getUserInfo方法,需要小程序授权获取用户信息。
<button @click="getUserInfo">获取用户信息</button>
<script>
export default {
methods: {
getUserInfo() {
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
console.log('userInfo', infoRes.userInfo);
},
});
},
},
};
</script>