H5 and web page WeChat authorization login process

Share the H5 page to WeChat to obtain user information

Note: We require to debug the authorization of the WeChat webpage, and the developer’s WeChat account must establish a binding relationship with the official account. Requirement
background: To share the H5 page to WeChat, the functions in the page need to be logged in, so the login needs to be invoked before the function operation

Authorized login

1. Several situations of WeChat login:
PC side:

PC-side WeChat browser -> QR code embedded in the web page (need to scan the code, use the appid and appsecret of the WeChat service account)

Other browsers on the PC side -> Jump to the QR code login page of WeChat (requires QR code scanning, use the PC application appid and appsecret registered on the WeChat open platform)

Mobile terminal:

Open the WeChat client -> directly call the WeChat authorization (do not scan the code, use the appid and appsecret of the WeChat service account)

Open other mobile browsers -> jump to the scan code login page of WeChat (requires scan code, use the PC application appid and appsecret registered on the WeChat open platform)

2. The method to distinguish whether it is a PC environment:

function IsPC(){
    
      
     var userAgentInfo = navigator.userAgent;
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
     var flag = true;  
     for (var v = 0; v < Agents.length; v++) {
    
      
         if (userAgentInfo.indexOf(Agents[v]) > 0) {
    
     flag = false; break; }  
     }  
     return flag;  
  }
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    
    
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    
    
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    
    
    window.location.href ="pc.html";
};

Obtain user information process

1. Get the code in WeChat

// 获取微信用户code
    getWxCode() {
    
    
      let appid = "公众号appid"; // 一定是小程序和微信公众号进行了绑定，否则不生效
      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
      
      appid}&redirect_uri=${
      
      encodeURIComponent(
        location.href
      )}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
      this.code = this.getUrlCode().code;
      //如果没有code 去获取code
      if (this.code == null) {
    
    
        window.location.href = url;
      } else {
    
    
        //获取到code后的逻辑
        console.log("code", this.code);
        this.login();
      }
    },

2. Intercept the code in the url

// 截取url中的code
    getUrlCode() {
    
    
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") !== -1) {
    
    
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
    
    
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },

3. Call the login interface

async login() {
    
    
      console.log("开始登录");
      const data = {
    
    
        code: this.code,
        udid: "081cvZ280Toa1F1VfB180Jv8380cvZ2i",
        appletType: 4
      };
      ajaxMethod.doAjax("接口地址", data, (res) => {
    
    
        if (res.success) {
    
    
          if (res.datas.token) {
    
    
            setLocalStorageBykey("ticket", res.datas.token);
            console.log("登录后进行Ticket缓存");
          }
          return;
        }
      });
    },