バックエンド テスト ガジェット -- パブリック アカウント WeChat のコードを取得します

プログラミング 2023-10-03 17:00:53 訪問数: null

私はWeChatのパブリックアカウントのバックエンドを書くことが多いので、プロジェクトをするたびにログインする必要があり、サーバーから返されるopenidと引き換えにWeChatのログインコードを取得する必要があり、かなり面倒なので書きました。 、ファイルをサーバー上に置き、アクセスします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <title>Title</title>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <style>
    @media screen and (max-width: 600px) {
      .form {
        max-width: 100vw;
      }

      .divider {
        margin: 32px 0 16px;
      }

      .code-input {
        width: 40vw;
      }
    }

    @media screen and (min-width: 600px) {
      .form {
        max-width: 600px;
      }

      .divider {
        margin: 120px 0 60px;
      }

      .code-input {
        width: 300px;
      }
    }

  </style>
</head>
<body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">

  <el-form ref="form" :model="form" label-width="8em" class="form">
    <!--提示常亮-->
    <el-form-item label="提示常亮">
      <el-switch
        v-model="light"
        active-color="#13ce66">
      </el-switch>
    </el-form-item>

    <!--微信授权地址-->
    <el-form-item label="微信授权地址">
      <el-input :value="connect" disabled></el-input>
    </el-form-item>

    <!--appid-->
    <el-form-item label="appid">
      <el-tooltip v-model="tip.appid" effect="dark" content="公众号的唯一标识" placement="right">
        <el-input v-model="form.appid"></el-input>
      </el-tooltip>
    </el-form-item>

    <!--授权回调地址-->
    <el-form-item label="redirect_uri">
      <el-tooltip v-model="tip.redirect_uri" effect="dark" placement="right">
        <div slot="content">
          授权后重定向的回调链接地址，
          <br /> 请使用 urlEncode 对链接进行处理
        </div>
        <el-input v-model="form.redirect_uri" disabled></el-input>
      </el-tooltip>
    </el-form-item>

    <!--返回类型-->
    <el-form-item label="response_type">
      <el-tooltip v-model="tip.response_type" effect="dark" content="返回类型，请填写code" placement="right">
        <el-select v-model="form.response_type">
          <el-option label="code" value="code"></el-option>
        </el-select>
      </el-tooltip>
    </el-form-item>

    <!--授权作用域-->
    <el-form-item label="scope">
      <el-tooltip v-model="tip.scope" effect="dark" content="应用授权作用域" placement="right">
        <el-select v-model="form.scope">
          <el-tooltip effect="dark" placement="right">
            <div slot="content">
              弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，<br /> 即使在未关注的情况下，只要用户授权，也能获取其信息
            </div>
            <el-option label="snsapi_userinfo" value="snsapi_userinfo"></el-option>
          </el-tooltip>
          <el-tooltip effect="dark" content="不弹出授权页面，直接跳转，只能获取用户openid" placement="right">
            <el-option label="snsapi_base" value="snsapi_base"></el-option>
          </el-tooltip>
        </el-select>
      </el-tooltip>
    </el-form-item>

    <!--state-->
    <el-form-item label="state">
      <el-tooltip v-model="tip.state" effect="dark" placement="right">
        <div slot="content">
          重定向后会带上state参数<br /> 开发者可以填写a-zA-Z0-9的参数值，最多128字节
        </div>
        <el-input maxlength="128" v-model="form.state"></el-input>
      </el-tooltip>
    </el-form-item>

    <!--提交-->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">获取Code</el-button>
    </el-form-item>

  </el-form>

  <div class="divider">
    <el-divider content-position="left">以下是回调参数信息:</el-divider>
  </div>

  <el-form label-width="5em" class="form">
    <!--code-->
    <el-form-item label="code">
      <el-input v-model="code" class="code-input"></el-input>
      <el-button type="primary" @click="copy">点我复制</el-button>
    </el-form-item>

    <!--url 参数-->
    <el-form-item label="回调信息">
      <pre v-html="data"></pre>
    </el-form-item>
  </el-form>


</div>


<script>

  /**
   * 转换地址栏参数
   */
  function parseQueryString(url) {
    var str = url.split("?")[1] || '',    //通过?得到一个数组,取?后面的参数
      items = str.split("&");    //分割成数组
    var arr, name, value;
    var obj = {};

    for (var i = 0; i < items.length; i++) {
      arr = items[i].split("=");    //["key0", "0"]
      name = arr[0];
      value = arr[1];
      obj[name] = value;
    }
    return obj;
  }


  /**
   * 转换参数为get类型
   */
  function parseDataToUrl(url, obj) {
    if (typeof url !== "string" || typeof obj !== "object")
      return url;
    let reurl = url + "?";
    let keys = Object.keys(obj);
    keys.forEach(key => reurl += key + "=" + obj[key]/*encodeURIComponent(obj[key])*/ + "&");
    reurl = reurl.substring(0, reurl.length - 1);
    return reurl;
  }


  /**
   * 将当前地址栏转换为回调地址uri
   */
  function getRedirectUri() {
    let {
      origin,
      pathname,
      search,
      hash,
    } = location;
    search = '?' + search.slice(1).split('&').filter(query => !query.includes('code=') && !query.includes('state=')).join('&');
    return encodeURIComponent(origin + pathname + search + hash);
  }

</script>

<!--复制能力-->
<script>
  const copy = (() => {
    const Document = window.document;

    // 如果document不存在,无法复制
    if (!Document)
      throw new Error('document is undefined!');

    const getCopyElem = (() => {
      let copyElem = null;
      return () => copyElem || (copyElem = createCopyTextarea())
    })();

    function createCopyTextarea() {
      let textarea = Document.createElement('textarea');
      let style = textarea.style;
      // 确保元素存在于dom树上而又不被用户看到,且尽量不影响其他元素;
      style.position = 'fixed';
      style.left = '100%';
      style.top = '100%';
      style.opacity = '0';
      style.width = '1px'; // 若元素大小为0, 会无法选中导致复制失败
      style.height = '1px';
      style.border = 'none';
      style.padding = '0';
      style.margin = '0';
      style.overflow = 'hidden';
      Document.body.appendChild(textarea);
      return textarea;
    }

    /**
     * @function copy    -- 复制内容到粘贴板
     *
     * @param {String} text    -  要复制的文本内容
     * @return {Boolean}       -  复制结果
     */
    return function copy(text, inputElement = null) {
      let copyElem = inputElement || getCopyElem();
      if (!copyElem)
        return false;

      copyElem.value = text;       // 改变输入框的值
      copyElem.select();           // 选中值
      let res = Document.execCommand("Copy");   // 执行浏览器复制命令
      copyElem.blur();
      return res;
    }
  })();
</script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {

        code: '',
        data: {},

        connect: 'https://open.weixin.qq.com/connect/oauth2/authorize',
        light: false,
        tip: {
          appid: false,
          redirect_uri: false,
          response_type: false,
          scope: false,
          state: false,
        },
        form: {
          appid: 'wx3722f11cac44b3d7',
          redirect_uri: getRedirectUri(),//encodeURIComponent与encodeURI不一样
          response_type: 'code',
          // scope: 'snsapi_base',
          scope: 'snsapi_userinfo',
          state: '',
        }
      }
    },
    watch: {
      light(light) {
        Object.keys(this.tip).forEach(key => this.tip[key] = !!light)
      }
    },
    methods: {
      onSubmit() {
        let {connect, form} = this;
        location.href = parseDataToUrl(connect, form);
      },
      copy() {
        let res = copy(this.code);
        this.$message({
          message: `复制${res ? '成功' : '失败'}`,
          type: res ? 'success' : 'warning'
        });
      }
    },
    mounted() {
      let data = parseQueryString(location.href);
      console.log(data);
      this.data = JSON.stringify(data, null, "  ");
      this.code = data.code;
    }
  })
</script>


</body>
</html>

説明書

你的域名/上边代码文件.html

WeChatモバイル端末の表示インターフェース
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/u010505805/article/details/102717047
おすすめ
ランキング
OpenCV.Scharr梯度
Baiduのウェブサイトの共有プラグインを追加します。
マスターキーの顧客の過去の使用状況を確認
Python データ分析 - pandas ライブラリを使ってみる
需求分析 序章
Linuxの一般的なコマンドのレコード番号
VARの違い、3つのconstをしましょう
ワイドアイスIオフ
ゼロ計数期間にXOR（クロス）
matlab/python を使用して二重閾値法のエンドポイント検出を実行する
アーカイブ
もっと
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

コードワールド

© 2018 codetd.com