微信QQ登录（web和uniapp）-前端-CSS教程

参考链接：

微信登录官网文档：https://developers.weixin.qq.***/doc/oplatform/Mobile_App/WeChat_Login/Authorized_API_call_UnionID.html
QQ登录官网文档：https://wiki.connect.qq.***/%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.***.***/tutorial/app-oauth-weixin.html
uniapp微信QQ登录第三方教程：https://blog.csdn.***/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.***/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，获取到相关信息

获取a***ess_token：https://graph.qq.***/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.***/oauth2.0/me?a***ess_token=TOKEN&unionid=1&fmt=json
获取用户信息：https://graph.qq.***/user/get_user_info?a***ess_token=YOUR_A***ESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID

web端微信登录逻辑

类似QQ登录逻辑，也是一个跳转微信扫码登录页面，url如下

https://open.weixin.qq.***/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE

获取到code后，调用微信的api：

获取a***ess_token和openid和unionid：https://api.weixin.qq.***/sns/oauth2/a***ess_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
获取用户信息：https://api.weixin.qq.***/sns/userinfo?a***ess_token=A***ESS_TOKEN&openid=OPENID

uniapp端

manifest.json中配置appid：App模块配置-OAuth(登录鉴权)-勾选QQ登录和微信登录，并配置上对应的appid

app端只需要配置appid，不需要配置appkey

qq是可以正常获取用户信息，微信就需要借助后端接口来获取用户信息

app端 QQ登录逻辑

uni.login({
    provider: 'qq',
    su***ess: function (loginRes) {
        // 登录成功
        uni.getUserInfo({
            provider: 'qq',
            su***ess: function(info) {
                // 获取用户信息成功, info.authResult保存用户信息
            }
        })
    },
    fail: function (err) {
        // 登录授权失败
        // err.code是错误码
    }
});

注意：loginRes中有a***ess_token和openid，但是没有unionid，unionid在info里面。

app端微信登录逻辑

uni.login({
  provider: 'weixin', //使用微信登录
  su***ess: function (loginRes) {
    console.log(loginRes.authResult);
  }
});

loginRes中有code，拿code调用后端接口，接口调用微信的api：

获取a***ess_token和openid和unionid：https://api.weixin.qq.***/sns/oauth2/a***ess_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
获取用户信息：https://api.weixin.qq.***/sns/userinfo?a***ess_token=A***ESS_TOKEN&openid=OPENID

注意：标准基座下的code不能用，需要使用自定义基座

java