WeChat公式アカウントでウェブサイトにログイン

目的：WeChat公式アカウントでウェブサイトにログインし、ユーザー情報を取得する

前提条件

1. WeChat公式アカウントが認証済みである
2. WeChatサーバーからのコールバックを受け取れるサーバーを用意している

手順

1、WeChat公式アカウントのappidとappsecretを取得する

2、サーバーに接続してWeChatサーバーからのコールバックを受け取る。ドメインが必要ですが、cpolarなどのトンネルツールで外部公開することもできます

まず画像に示すリソースを準備します

<img src="https://raw.githubusercontent.com/liyown/pic-go/master/blog/0" style="zoom:67%;" />

説明：

• WeChatがサーバーの存在を検証するためのURLです。要件に従って設定する必要があります。たとえば、ここでは次のアドレスを使用します

  JAVAコピー

  https://13a34511.r1.cpolar.top/api/user/wxcheck
  

  したがって、自分のサーバーに応答を返すエンドポイントを用意する必要があります

  JAVAコピー

  //外层还有/user
  @GetMapping("wxcheck")
  public String  wxCheck(@RequestParam("signature") String signature,
                                      @RequestParam("timestamp") String timestamp,
                                      @RequestParam("nonce") String nonce,
                                      @RequestParam("echostr") String echostr) {
      if (userService.wxCheck(signature, timestamp, nonce, wxOpenConfig.getToken())) {
          return echostr;
      } else {
          return "error";
      }
  }
  

  WeChatの要件に従ってデータを返す必要があります。内容は次のとおりです。

  1）token、timestamp、nonceの3つのパラメーターを辞書順に並べる

  2）3つのパラメーターの文字列を連結して1つの文字列にし、sha1で暗号化します

  3）暗号化した文字列をsignatureと比較することで、リクエストがWeChatから来たものであると確認できます

  JAVAコピー

  @Override
  public Boolean wxCheck(String signature, String timestamp, String nonce, String token) {
      // 微信公众号接入校验
      // 将token、timestamp、nonce三个参数进行字典序排序
      String[] arr = new String[]{token, timestamp, nonce};
      Arrays.sort(arr);
      // 将三个参数字符串拼接成一个字符串进行sha1加密
      StringBuilder content = new StringBuilder();
      for (String s : arr) {
          content.append(s);
      }
      String tmpStr = MYDigestUtils.sha1DigestAsHex(content.toString());
  
      log.info("微信公众号接入校验，signature = {}, tmpStr = {}", signature, tmpStr);
      return signature.equals(tmpStr);
  }
  

  続いて上記のフォームを送信すると、検証成功と表示されます

3、続いてaccess_tokenを取得します

• 要件に従って、WeChat内のリソースへアクセスするためのtokenを返す必要があります。WeChat内のリソースにアクセスするにはこのtokenが必要で、後述のQRコードなどがその例です

• 公式ドキュメント開発を開始 / Access tokenの取得 (qq.com)
• コード：

@Override
    public String getAccessToken() {
        // 获取access_token
        String url = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s",
                               wxOpenConfig.getAppId(), wxOpenConfig.getAppSecret());
        // 发送请求
        String result = restTemplate.getForObject(url, String.class);
        log.info("获取access_token，result = {}", result);
        return result;
    }

4、Ticket付きのQRコードを生成する

@Override
public String getQRCode(String accessToken) {
    // 获取二维码
    String url = String.format("https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=%s", accessToken);
    // 5分钟过期
    String body = WXUtils.getQRCodeBody("300", "QR_STR_SCENE");
    String result = restTemplate.postForObject(url, body, String.class);
    log.info("获取二维码，result = {}", result);
    return result;
}

5、QRコードのticketをフロントエンドに返し、フロントエンドがQRコード画像を取得してユーザーに表示します

6、ユーザーがQRコードをスキャンすると、イベント通知が上記のURLにプッシュされます。GETリクエストをPOSTリクエストに変換しただけなので、形式は次のとおりです

<xml>
  <ToUserName><![CDATA[toUser]]></ToUserName>
  <FromUserName><![CDATA[FromUser]]></FromUserName>
  <CreateTime>123456789</CreateTime>
  <MsgType><![CDATA[event]]></MsgType>
  <Event><![CDATA[subscribe]]></Event>
  <EventKey><![CDATA[qrscene_123123]]></EventKey>
  <Ticket><![CDATA[TICKET]]></Ticket>
</xml>

もちろん、イベントタイプは多数あるため、戦略パターンを定義して種類ごとに処理できます

リクエストを受け取るエンドポイントは次のように定義します

7、フロントエンドはQRコードを表示した後、サーバーをポーリングしてスキャン済みかどうかを確認することを忘れずに。バックエンドは処理完了後、ticketをキー、JWTを値としてキャッシュできます。フロントエンドが照会して取得できた時点で、ユーザーがログインを完了できます