admin管理员组文章数量:1130349
文章目录
- 前言
- 一、准备一个页面用于授权获取code
- 2.在首页使用code进行授权登录
前言
在微信公众号h5网页里面获取授权，我是用的是uniapp框架，主要讲一下前端的操作，前面的微信公号配置域名操作可以去官网查看
一、准备一个页面用于授权获取code
将该页设置为进入的默认页面，功能类似登录页，只是登陆的操作是由微信来做，此页面可以什么都没有，只需要在这个页面进行跳转回调页面，获取code
// let link = encodeURI(window.location.href);
let link = encodeURIComponent('https://xxxxxxxxxxxx');
console.log(link)
console.log(link,'link');
let code = null;
// //判断link中有没有code=字符串
// if(link.indexOf('code=') == -1){
//没有code则引导关注者打开如下页面链接，授权
let appid = 'xxxxxxxxxxxxxxxxxx';
let uri = link;
let authURL = `https://open.weixin.qq/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
//重新引导回本页面，然后又重新判断link.indexOf('code=') == -1
window.location.href = authURL;
console.log(authURL)
// }
这个回调的页面设置为系统的首页路径，
let link = encodeURIComponent(‘https://域名+首页地址’);
2.在首页使用code进行授权登录
在首页的onLoad生命周期里进行登录
代码如下（示例）：
methods: {
getQueryParam(name){
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
},
//用户登录
userLogin(){
const code=this.getQueryParam('code')
console.log(code)
//发送请求传参code获取用户openid
uni.request({
url: 'https://xxxx/api/user/users/wxLogin',
data: {
code: code,
// phoneNum: this.phone,
// name: this.name
},
method: 'POST',
success: (res) => {
uni.hideLoading();
console.log(res);
// res.data.openid
if (res.data.code == 200) {
uni.showToast({
title: res.data.msg
});
const userInfo = {
userId: res.data.data.id
};
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
app.userInfo = userInfo;
uni.setStorageSync('token', res.data.data.token);
this.getMsgAccount()
} else {
uni.showToast({
title: res.data.msg,
icon: 'error'
});
}
// this.getMsgAccount()
},
fail: (err) => {
uni.hideLoading();
// this.onloadFinish=true
// resolve()
console.log(err);
}
});
},
注意，如需在首页的onshow生命周期里调用接口，而且接口需要使用登录获取的参数时，由于在onload里调用了登录接口，所以导致在onshow里调用接口时还没拿到登录接口返回的参数，导致请求失败。
所有可以在登录的成功回调里面去请求接口，然后再onshow里面判断一下是否登录，如果登陆了再去调接口，这样第一次进入首页，就可以触发登录成功的回调，后面再次进入首页也可以发送请求。
onShow() {
// this.getWorkCount()
//如果有用户信息,不是第一次登录
if(app.userInfo){
this.getMsgAccount()
}
},
文章目录
- 前言
- 一、准备一个页面用于授权获取code
- 2.在首页使用code进行授权登录
前言
在微信公众号h5网页里面获取授权，我是用的是uniapp框架，主要讲一下前端的操作，前面的微信公号配置域名操作可以去官网查看
一、准备一个页面用于授权获取code
将该页设置为进入的默认页面，功能类似登录页，只是登陆的操作是由微信来做，此页面可以什么都没有，只需要在这个页面进行跳转回调页面，获取code
// let link = encodeURI(window.location.href);
let link = encodeURIComponent('https://xxxxxxxxxxxx');
console.log(link)
console.log(link,'link');
let code = null;
// //判断link中有没有code=字符串
// if(link.indexOf('code=') == -1){
//没有code则引导关注者打开如下页面链接，授权
let appid = 'xxxxxxxxxxxxxxxxxx';
let uri = link;
let authURL = `https://open.weixin.qq/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
//重新引导回本页面，然后又重新判断link.indexOf('code=') == -1
window.location.href = authURL;
console.log(authURL)
// }
这个回调的页面设置为系统的首页路径，
let link = encodeURIComponent(‘https://域名+首页地址’);
2.在首页使用code进行授权登录
在首页的onLoad生命周期里进行登录
代码如下（示例）：
methods: {
getQueryParam(name){
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
},
//用户登录
userLogin(){
const code=this.getQueryParam('code')
console.log(code)
//发送请求传参code获取用户openid
uni.request({
url: 'https://xxxx/api/user/users/wxLogin',
data: {
code: code,
// phoneNum: this.phone,
// name: this.name
},
method: 'POST',
success: (res) => {
uni.hideLoading();
console.log(res);
// res.data.openid
if (res.data.code == 200) {
uni.showToast({
title: res.data.msg
});
const userInfo = {
userId: res.data.data.id
};
uni.setStorageSync('userInfo', JSON.stringify(userInfo));
app.userInfo = userInfo;
uni.setStorageSync('token', res.data.data.token);
this.getMsgAccount()
} else {
uni.showToast({
title: res.data.msg,
icon: 'error'
});
}
// this.getMsgAccount()
},
fail: (err) => {
uni.hideLoading();
// this.onloadFinish=true
// resolve()
console.log(err);
}
});
},
注意，如需在首页的onshow生命周期里调用接口，而且接口需要使用登录获取的参数时，由于在onload里调用了登录接口，所以导致在onshow里调用接口时还没拿到登录接口返回的参数，导致请求失败。
所有可以在登录的成功回调里面去请求接口，然后再onshow里面判断一下是否登录，如果登陆了再去调接口，这样第一次进入首页，就可以触发登录成功的回调，后面再次进入首页也可以发送请求。
onShow() {
// this.getWorkCount()
//如果有用户信息,不是第一次登录
if(app.userInfo){
this.getMsgAccount()
}
},
版权声明：本文标题：微信公众号h5网页获取授权openId 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754996650a2751764.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论