参考链接：
- 微信登录官网文档：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_Login/Authorized_API_call_UnionID.html
- QQ登录官网文档：https://wiki.connect.qq.com/%e7%bd%91%e7%ab%99%e5%ba%94%e7%94%a8%e6%8e%a5%e5%85%a5%e6%b5%81%e7%a8%8b
- uniapp微信QQ登录官网文档：https://uniapp.dcloud.net.cn/tutorial/app-oauth-weixin.html
- uniapp微信QQ登录第三方教程：https://blog.csdn.net/m0_46846526/article/details/130646788
准备工作：
申请微信的appid和appkey，申请QQ的appid和appkey
web端和app端用的appid和appkey是不一样的
术语：
- openid：同一个用户对不同的应用，都是不同的openid；
- unionid：同一个用户对一个开发者账号下的所有应用（包括web应用、app应用等），都是一样的unionid；当需要web应用和app应用账号互通的时候，用这个；
web端 QQ登录逻辑
前端调用后端第一个接口，接口返回一个url，可以用这个url跳转QQ扫码登录页面，url如下
"https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=APPID&state=STATE&fmt=json&redirect_uri=REDIRECT_URI&lange=language"
redirect_uri：扫码成功后，QQ扫码登录页面会跳转回这个回调地址（注意，该地址要在官网事先配置）
通过回调地址从QQ扫码登录页面跳转回我们自己的网站，url后面会带上code和state
前端调用后端第二个接口，入参是code和state
校验state防止csrf攻击（state也可以用于传递简单的业务参数）：
第一个接口中，把state存入redis中，第二个接口中，可以从redis中取值，判断是否存在，存在才放行，不存在就返回错误码
这个code是临时凭证，我们可以用这个调用QQ的api，获取到相关信息
- 获取access_token：https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=APPID&client_secret=SECRET&code=CODE&fmt=json&redirect_uri=REDIRECT_URI
- 获取openid和unionid：https://graph.qq.com/oauth2.0/me?access_token=TOKEN&unionid=1&fmt=json
- 获取用户信息：https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID
web端 微信登录逻辑
类似QQ登录逻辑，也是一个跳转微信扫码登录页面，url如下
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE
获取到code后，调用微信的api：
- 获取access_token和openid和unionid：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
- 获取用户信息：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
uniapp端
manifest.json中配置appid：App模块配置-OAuth(登录鉴权)-勾选QQ登录和微信登录，并配置上对应的appid
app端只需要配置appid，不需要配置appkey
qq是可以正常获取用户信息，微信就需要借助后端接口来获取用户信息
app端 QQ登录逻辑
uni.login({
provider: 'qq',
success: function (loginRes) {
// 登录成功
uni.getUserInfo({
provider: 'qq',
success: function(info) {
// 获取用户信息成功, info.authResult保存用户信息
}
})
},
fail: function (err) {
// 登录授权失败
// err.code是错误码
}
});
注意：loginRes中有access_token和openid，但是没有unionid，unionid在info里面。
app端 微信登录逻辑
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
console.log(loginRes.authResult);
}
});
loginRes中有code，拿code调用后端接口，接口调用微信的api：文章来源：https://www.toymoban.com/news/detail-845685.html
- 获取access_token和openid和unionid：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
- 获取用户信息：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
注意：标准基座下的code不能用，需要使用自定义基座文章来源地址https://www.toymoban.com/news/detail-845685.html
到了这里，关于微信QQ登录（web和uniapp）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
