【全干】从零搞定微信SDK授权

<template>
  <h3 v-if="message">{{ message }}</h3>
  <h3 v-else>
    点击右上角=>分享给朋友
    <h5>{{ status }}</h5>
  </h3>
</template>
复制代码

<script setup>
  import { ref } from "vue";
import axios from "axios";
const message = ref("");
const status = ref("");
axios
  .post(`http://t2fzbb.natappfree.cc/signature`, {
  url: location.href.split("#")[0],
})
  .then((res) => {
  const { appId, nonceStr, signature, timestamp } = res.data;
  console.log("[ res ] >", appId, nonceStr, signature, timestamp);
  wx.config({
    debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
    appId, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间戳
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    jsApiList: ["updateAppMessageShareData"], // 必填，需要使用的 JS 接口列表
  });
  wx.error((res) => {
    message.value = res.errMsg;
  });
  wx.ready(() => {
    wx.checkJsApi({
      jsApiList: ["updateAppMessageShareData"], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
      success: (res) => {
        wx.updateAppMessageShareData({
          title: "我的掘金", // 分享标题
          desc: "我在掘金输出前端知识~", // 分享描述
          link: "https://juejin.cn/user/3966693685871694", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl:
          "https://p9-passport.byteacctimg.com/img/user-avatar/71ca4682501063257d8413ff726105a0~300x300.images", // 分享图标
          success: function () {
            status.value = "设置成功";
          },
        });
      },
    });
  });
});
</script>
复制代码

import { Controller } from 'egg';

export default class HomeController extends Controller {
  
  public async checkOrigin() {
    const { ctx } = this;
    const { signature, timestamp, nonce, echostr } = ctx.query;
    const result = await ctx.service.weChat.checkSignature(
      signature,
      timestamp,
      nonce,
    );
    ctx.body = result ? echostr : '';
  }

  public async token() {
    const { ctx } = this;
    ctx.body = await ctx.service.weChat.getToken();
  }

  public async ticket() {
    const { ctx } = this;
    ctx.body = await ctx.service.weChat.getTicket();
  }

  public async signature() {
    const { ctx } = this;
    const { url } = ctx.request.body;
    console.log('[ url ] >', url);
    ctx.body = await ctx.service.weChat.genSignature(url);
  }
}

复制代码

  public async checkSignature(
    signature: string,
    timestamp: string,
    nonce: string,
  ) {
    const own = SHA1([ TOKEN, timestamp, nonce ].sort().join('')).toString();
    return own === signature;
  }
复制代码

const cache: {
  token: {
    access_token: string | undefined;
    expires_in: number;
    last_time: number;
  };
} = {
  token: {
    access_token: undefined,
    expires_in: 0,
    last_time: 0,
  }
};

public async getToken() {
  const { ctx } = this;
  const request = async () => {
    const { data } = await ctx.curl(URL_TOKEN, { dataType: 'json' });
    const { access_token, expires_in } = data;
    console.log('[ token data ] >', data);
    cache.token = {
      access_token,
      expires_in,
      last_time: Date.now() + expires_in * 1000,
    };
  };
  if (!cache.token.access_token) {
    console.log('[ token 还没有~ ] ');
    await request();
  } else {
    if (Date.now() > cache.token.last_time) {
      console.log('[ token 超时了 ] ');
      await request();
    }
  }
  return cache.token;
}
复制代码

const cache: {
  token: {
    access_token: string | undefined;
    expires_in: number;
    last_time: number;
  };
  ticket: {
    ticket: string | undefined;
    expires_in: number;
    last_time: number;
  };
} = {
  token: {
    access_token: undefined,
    expires_in: 0,
    last_time: 0,
  },
  ticket: {
    ticket: undefined,
    expires_in: 0,
    last_time: 0,
  },
};

public async getTicket() {
  const { ctx } = this;
  const request = async () => {
    const { access_token } = await this.getToken();
    const { data } = await ctx.curl(URL_TICKET, {
      dataType: 'json',
      method: 'GET',
      data: {
        access_token,
      },
    });
    const { ticket, expires_in } = data;
    console.log('[ ticket data ] >', data);
    cache.ticket = {
      ticket,
      expires_in,
      last_time: Date.now() + expires_in * 1000,
    };
  };
  if (!cache.ticket.ticket) {
    console.log('[ ticket 还没有~ ] ');
    await request();
  } else {
    if (Date.now() > cache.ticket.last_time) {
      console.log('[ ticket 超时了 ] ');
      await request();
    }
  }
  return cache.ticket;
}
复制代码

public async genSignature(url: string) {
  const { ticket: jsapi_ticket } = await this.getTicket();
  const noncestr = Math.random().toString(36).substr(2, 15);
  const timestamp = Date.now();
  const signature = SHA1(
    `jsapi_ticket=${jsapi_ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`,
  ).toString();
  return {
    appId: APPID,
    nonceStr: noncestr,
    timestamp,
    signature,
  };
}
复制代码