H5 および Web ページ WeChat 認証ログインプロセス

H5 ページを WeChat に共有してユーザー情報を取得します

注: We need to debug WeChat Webpage authorization, and theDeveloper's WeChat account has to be binding relationship with the official account. 要件の
背景: H5 ページを WeChat に共有するには、ページ内の関数にログインする必要があるため、関数の操作前にログインを呼び出す必要があります

許可されたログイン

1. WeChat ログインのいくつかの状況:
PC 側:

PC 側 WeChat ブラウザ -> Web ページに埋め込まれた QR コード (コードをスキャンし、WeChat サービスアカウントの appid と appsecret を使用する必要があります)

PC側のその他のブラウザ -> WeChatのQRコードログインページにジャンプ（QRコードのスキャンが必要、WeChatオープンプラットフォームに登録されているPCアプリケーションのappidとappsecretを使用）

携帯端末：

WeChat クライアントを開きます -> WeChat 認証を直接呼び出します (コードをスキャンせず、WeChat サービスアカウントの appid と appsecret を使用します)。

他のモバイルブラウザを開く -> WeChat のスキャンコードログインページにジャンプします (スキャンコードが必要、WeChat オープンプラットフォームに登録されている PC アプリケーションの appid と appsecret を使用します)

2. PC環境かどうかの見分け方：

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";
};

ユーザー情報取得プロセス

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. 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. ログインインターフェイスを呼び出します。

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;
        }
      });
    },