1. Application
uniapp qq login process: open | uni-app official website
To apply for WeChat login, you can go to the WeChat development platform: WeChat Open Platform
uniapp WeChat login process: uni-app official website
To apply for qq login, go to qq Internet: Homepage of QQ Internet official website
You can ask the operation and maintenance students to help us apply for these. The most important thing for the front end is to get the appid of QQ and WeChat
Then you can configure appid in manifest.json in hbuilder
Two, the code
<view class="dif-login-ways">
<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="wxChatLogin">微信登录</button>
<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="qqLogin">QQ登录</button>
</view>WeChat login: Just get a code on the front end. Friends on the back end can refer to the WeChat open document
// 微信登录
wxChatLogin(){
uni.login({
"provider": "weixin",
"onlyAuthorize": true, // 微信登录仅请求授权认证
success: function(event){
const {code} = event
//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
console.log(code,event)
uni.request({
url: 'https://www.example.com/loginByWeixin', //仅为示例，并非真实接口地址。
data: {
code: event.code
},
success: (res) => {
//获得token完成登录
uni.setStorageSync('token',res.token)
}
});
},
fail: function (err) {
// 登录授权失败
// err.code是错误码
}
})
},qq login
qqLogin() {
console.log('点击qq登录');
let parameters = {
openid:'',
access_token:'',
nickName:'',
avatarUrl:'',
}
uni.login({
provider: 'qq',
success: function(loginRes) {
console.log(loginRes, 'loginRes');
parameters.openid = loginRes.authResult.openid
parameters.access_token = loginRes.authResult.access_token
// 登录成功
uni.getUserInfo({
provider: 'qq',
success: function(info) {
// 获取用户信息成功, info.authResult保存用户信息
console.log(info, 'info');
parameters.nickName = info.userInfo.nickName
parameters.avatarUrl = info.userInfo.avatarUrl
qqLogin(parameters).then(data => {
// 把后端想要的数据传给他就可以了
})
}
})
},
fail: function(err) {
console.log(err, 'qq授权失败');
// 登录授权失败
// err.code是错误码
}
});
},You can get almost all parameters and personal information, pass the information to the backend, let the backend update the user information, and then return the token.
3. Debugging
Since you need to fill in the signature and package name when applying, the code you get cannot be used when compiling from hbuilder directly into the mobile phone in development mode and logging in with WeChat, so if you need to debug:
1. Pack the base and use the registration form to pack it.
2. Run the packaged base to the APP.
3. Debug it .
You may need to go to the Internet to find functions similar to developers, and add a development account. Since it is a customer's account, it is more troublesome to scan the code, so I did not add it.
If it cannot be added, you can directly package the APP, which can also be used without this error
