H5通过公众号实现微信授权登录

微信给开发者提供的测试账号平台：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

需要先关注公众号，否则跳转授权页面后会提醒未关注该公众号。

步骤：

1. 引导用户打开如下页面（例如：可通过点击按钮）：

   let APPID = '公众号的appid'
   let REDIRECT_URI = encodeURIComponent('授权后跳转回的页面')
   let SCOPE = 'snsapi_userinfo'
   location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&state=STATE#wechat_redirect `
   

   appid：公众号的唯一标识。
   redirect_uri：授权后重定向的回调链接地址，要使用encodeURIComponent()对其进行编码处理。
   response_type：返回类型，填写code即可。
   scope：应用授权作用域。snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）；snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）。
   state：非必须，重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节。
   #wechat_redirect：无论直接打开还是做页面302重定向时候，必须带此参数。

   

2. 如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。拿到code传给后端获取用户信息

   //获取url中的search
   let search = location.search.slice(1);
   let arr = search.split("&");
   let result = {};
   arr.forEach(function(item){
         let itemArr = item.split('=');
         result[itemArr[0]]=itemArr[1];
   })
   
   if(result.code){
   	//调用后端接口
   	getUserInfo();
   }
   

常见问题：

1. 一般情况下是授权回调地址和授权回调页面域名不匹配导致的。