微信-公众号登录

案例

https://blog.51cto.com/YangPC/6275559

一、使用接口直接扫码

前端小窗口扫码

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

let loginWin

function wxLogin() {
    const sleft = (window.innerWidth - 800) / 2;
    const stop = (window.innerHeight - 460) / 2 - 50;
    const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect'
    const windowFeatures = `height=460, width=800,top=${stop}, left=${sleft}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`
  loginWin =   window.open(url, "newwindow", windowFeatures);
}

loginWin.close()

后端

准备

appid
redirect_uri
scope
1. snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）
2. snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地
state 可选重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

获取授权后，根据redirect_uri跳转，携带code和state（根据业务需要设置）

redirect_uri/?code=CODE&state=STATE。

页面回调地址需要提前设置

code

code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回
{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE",
  "is_snapshotuser": 1,
  "unionid": "UNIONID"
}

刷新access_token

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
返回
{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

获取用户信息

（需scope为 snsapi_userinfo ）

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

{   
  "openid": "OPENID",
  "nickname": NICKNAME,
  "sex": 1,
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

二、轮训

前端获取二维码

需后端给前端

文档：https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

1 通过appid 和secret拿到access_token

getAccessToken() {
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appID}&secret=${appSecret}`;
    return axios
      .get(url)
      .then((response) => response.data.access_token);
  }

2 通过access_token拿二维码数据

每次创建二维码ticket需要提供一个开发者自行设定的参数（scene_id）uuid生成随机值即可

POST URL: https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
{
    "expire_seconds": 604800,
    "action_name": "QR_SCENE", 
    "action_info": {
        "scene": {
            "scene_id": 123
        }
    }
} 

返回
{
    "ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm
    3sUw==",
    "expire_seconds":60,
    "url":"http://weixin.qq.com/q/kZgfwMTm72WWPkovabbI"
}

3 用ticket换取二维码

https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET

扫描带参数二维码事件

https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html#扫描带参数二维码事件

服务端解析xml

前端轮训接口获取状态