Skip to main content

README

Quick Start​

<!DOCTYPE html>
<html xmlns:wb="http://open.weibo.com/wb" lang="zh">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    {{> head }}
    <!-- wechat -->
    <script>
      const isWeChat = () => {
        return /MicroMessenger/i.test(window.navigator.userAgent);
      };

      // 获取URL查询参数值
      const getQueryString = (name) => {
        const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, "i");
        const r = window.location.search.substr(1).match(reg);

        if (r != null) {
          return decodeURIComponent(r[2]);
        }

        return null;
      };

      function removeURLParameter(url) {
        var urlparts = url.split("?");

        return urlparts[0];
      }

      if (isWeChat()) {
        // 第一步：用户同意授权，获取code
        if (getQueryString("code")) {
          // 如果是链接上有code，说明是获取code的当前页面

          const code = getQueryString("code");

          window.sessionStorage.setItem("code", code);
        } else {
          // 没有code 要去微信获取

          // 微信拉起授权案例
          const callback = encodeURIComponent(
            `https://id.ifeng.com/sso/v1/?redirect=${encodeURIComponent(
              window.location.href
            )}`
          );
          window.location.replace(
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9bd3b38f9c278ab4&redirect_uri=${callback}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
          );
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    {{> body }}
  </body>
</html>
// （服务器）获取用户数据
export const getUserData = async (code) => {
  return await jsonp(
    `https://user.iclient.ifeng.com/Api_User_Userbasic/weixinLogin?code=${code}&proid=weixinh5`,
    {
      data: { code },
      jsonpCallback: createJsonpCallbackName("getUserData"),
      cache: false,
    }
  );
};
const deBounce = (func, wait) => {
  let timeOut = null;

  return (...args) => {
    clearTimeout(timeOut); // 一定要清除定时器
    timeOut = setTimeout(() => {
      func(...args);
    }, wait);
  };
};

// wechat
// 请求数据
const fetchUserData = (code) => {
  getUserData(code)
    .then((res) => {
      console.log("res", res);
      const { data, code } = res;

      if (code !== 200) {
        return;
      }
      changeStates({ weChatUserInfo: data?.user_info });
      window.localStorage.setItem(
        "weChatUserInfo",
        JSON.stringify(data?.user_info)
      );
    })
    .catch((err) => {
      console.log("err", err);
    });
};

useEffect(() => {
  // 微信端才有code
  if (window.sessionStorage.getItem("code")) {
    // 如果本地缓存已经存有code 说明是回退到了获取code的起始页面
    const code = window.sessionStorage.getItem("code");

    deBounce(fetchUserData(code), 0);
  }
}, []);

链接​

授权流程技术说明