WordPress开发日志|评论框添加填入QQ自动补全评论者信息功能

由于本站QQ登录的回调接口有点小问题，所以为了更加方便访客在博文下方留言，我决定开放访客留言功能。但是需要补全的信息框比较多，为了更快速的让访客表达自己的想法，所以我决定在评论框处添加《填入QQ自动补全评论者信息》的功能。网上也有相当多的教程，不过为了适配自己的主题，还是得适当地做一些修改。

QQ信息API

以前做了一个API平台，结果主机商跑路了，带着我的数据一同消失在了茫茫人海之中，不过获取QQ信息这部分的接口我还保存在磁盘上，可以直接拿出来用。代码也很简单，我就直接贴出来：

<?php
// header
header("Content-Type:application/json");

// 获取扣扣号
$qq = (isset($_GET['qq']))?$_GET['qq']:$_POST['qq'];

// 过滤
if (trim(empty($qq))) {
        echo json_encode(array('status' => 'error','msg' => '未传入QQ号'),320);
}else{
        // 获取QQ用户信息
        $urlPre='https://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?g_tk=1518561325&uins=';
        $data=file_get_contents($urlPre.$qq);
        $data=iconv("GB2312","UTF-8",$data);
        $pattern = '/portraitCallBack\((.*)\)/is';
        preg_match($pattern,$data,$result);
        $result=$result[1];
        $qqnickname = json_decode($result, true)["$qq"][6];
        $qqheadimg = "https://q1.qlogo.cn/g?b=qq&nk=".$qq."&s=100&t=1547904810";

        // 开始判断这个扣扣号是不是有真实用户信息返回
        if ($qqnickname) {
                // 如果有，就可以返回JSON数据
                echo json_encode(array('status' => 'success','msg' => '获取用户信息成功','nickname' => $qqnickname,'headimg' => $qqheadimg),320);
        }else{
                //如果没有，那么只能返回获取失败
                echo json_encode(array('status' => 'error','msg' => '获取用户信息失败'),320);
        }
}
?>

利用QQ空间的接口来获取到目标的QQ信息，不过如果QQ用户关闭了QQ主显，那么将无法获取到其他信息，所以后续在JSON数据中添加一个错误情况，避免前端出现展示错误。

前端修改

为了方便调试，我决定在本地对评论框进行修改和测试，F12将评论框的代码复制下来，贴到HTML文件里，接着咱们来对它进行改造。

JavaScript添加

我们引入JQuery库来帮助我们完成本次js文件的构造，昨天BootCDN挂了，所以我推荐大家将JQuery拉到本地，或者用Staticfile CDN来替换，比较靠谱：

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

为了方便信息的获取，我们需要使用ajax来请求我们所需要的信息，例如下面的请求代码：

      $.ajax({
        url: "/qq_data.php",    //如果网站开启了HTTPS，记得这里要修改成https的链接
        type: "get",
        data: { qq: qq_num },
        dataType: "json",
        success: function (data) {
          var json = data;
          if (data == null) {
            $("#author").val('QQ游客');
          }
          else if (json.status != "error") {//成功获取
            $("#author").val(json.nickname == "" ? 'QQ游客' : json.nickname);
            $("div[class='comment-avatar-author flex-avatar w-32 me-3 ']").children()[0].src = 'https://thirdqq.qlogo.cn/g?b=oidb&k=nMfnfkyAIv73hicY24YMwVA&s=40&t=' + qq_num;
            $("#email").val(qq_num + '@qq.com');
            $('#comment').focus();
            get_yiyan();
            my_status = 1;
          }
          else {
            $("#qq_num").val("");
            my_status = 0;
          }
        },
        error: function (err) {
          $("#author").val('QQ游客');
          $("#email").val(qq_num + '@qq.com');
          my_status = 0;
        }
      });

这一部分代码算是本次改造评论框的核心部分，需要注意一点的是在于元素的选择上，由于JQuery给出的元素选择和JS原生的有些许不同，所以这方面还是得自己拿捏一下。这个主题的评论框class属性后有一个空格，试了各种办法最后终于解决了。所以在你们自己添加时需要注意一下class属性是否正确。

后面我添加了一个layer的提示框，可以提醒评论者QQ是否填写正确。

评论框架

为了方便节约时间，我直接将前端的评论框复制了一遍，并排在了一起，效果如下图所示：

我感觉还可以，如果你有什么稀奇古怪的想法， 也可以自己加，不过我建议先在本地测试，修改好了在添加到自己的网站上，代码我就贴上通用的：

  <input id="qq_num" onblur="get_qqinfo();" placeholder="请输入您的QQ账号">QQ账号
  <input id="author">名称
  <input id="email">邮箱
  <input id="url" placeholder="网站地址">网站
  <div class="comment-textarea mb-3">
    <textarea id="comment" name="comment" class="form-control" rows="3"></textarea>
  </div>

在输入QQ账号的输入框这里，我建议将get_qqinfo()放置输入框失去焦点时自动执行，如果你非要添加个获取按钮，那样也行。后续的话，我可能会考虑再添加一个滑动按钮，滑动后才能获取QQ信息，避免频繁请求。

问题拓展

后续还有一个问题需要自行解决，如果你的主题较为强大，那么你就可以直接忽略这一点。

在评论者提交评论后，一般主题会保留cookies方便下次提交评论时一键填写，所以我们也需要将QQ号一同保存至cookis中，或者重写写一个js来获取之前填写的QQ邮箱转换为QQ账号，避免影响整体的美感。

主题自带ajax提交评论也需要注意，不要函数冲突，否则会很麻烦，排查也需要花费时间，降低生成力。

效果展示

输入QQ账号后，自动获取用户名，邮箱地址以及头像，并且自动填充评论框的内容（方便留言），网址可以自行添加，并且头像将外链至您的站点。所以高质量的评论非常重要，如果恶意灌水会被自动屏蔽，填充博文感想之时，又为您的站点做了外链，是一件不可多得的美事。