ionic3 获取微信授权登录,虽然插件齐全,但是还是遇到了不少坑。完整的亲测有效代码如下:
import { Wechat } from '@ionic-native/wechat';
import { HTTP } from '@ionic-native/http';
上面这两个插件就不用说了,能找到这里的都知道这两个是什么插件。主要是为什么要用HTTP这个插件,因为这个插件解决了获取微信授权跨域的问题,囧。
//登录
tapLogin() {
try {
// 1. 获取code
let scope = "snsapi_userinfo";
let state = "_" + (+new Date());
//1.先用插件获取到code
Wechat.auth(scope, state, (response) => {
console.log("获取code", response);
alert("获取code:" + JSON.stringify(response));
let appId = "";//你自己的id
let appSecret = "";//你自己的
let accessTokenUrl = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId + '&secret=' + appSecret + '&code=' + response.code + '&grant_type=authorization_code'
//2.获取token,openid,等
this.http.get(accessTokenUrl, {}, {})
.then(data => {
console.log(data.status);
console.log(data.data); // data received by server
console.log(data.headers);
alert("data==" + JSON.stringify(data));
//这个自己解析获取正确的accessToken
let accessToken = data.data.access_token;
let openId = data.data.openid;
//3.获取个人信息
let userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openId}`;
this.http.get(userInfoUrl, {}, {}).then(data => {
console.log(data)
alert("data2==" + JSON.stringify(data));
}).catch(error => {
alert("error==" + JSON.stringify(error))
console.log(error.status);
console.log(error.error); // error message as string
console.log(error.headers);
});
})
.catch(error => {
alert("error==" + JSON.stringify(error))
console.log(error.status);
console.log(error.error); // error message as string
console.log(error.headers);
});
}, (reason) => {
alert("Failed: " + reason);
});
} catch (error) {
alert("Failed: " + error);
console.log(error);
}
}