jQuery で QQ の名前とアバターのリンクをオンライン取得

昨日、グループ内で誰かが Dux テーマのコメント欄で QQ 番号を入力すると、名前とアバターを直接取得できる機能はどのように実装されているのかと尋ねてきました。Dux テーマを確認したところ、この機能は統合されていないことが分かりました。一方、Emlog の Dux テーマにはこの機能が組み込まれていました。もともとは WordPress に移植しようと思っていたのですが、Emlog と WP のコメントモジュールは異なり、実現するにはスタイルと JS をほぼすべて書き直す必要があることに気付き、潔く諦めました。そこで QQ スペースのインターフェースを思い付きました。これを使えば QQ のアバターと名前を直接取得できます。以下で皆さんに共有します。

HTML コード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>オンラインで QQ ユーザー名とアバターを取得</title>
    </head>
    <body>
        <div> QQ &nbsp;<input type="text" name="" id="qqnum" value="" /></div><br>
        <div> ニックネーム <input type="text" name="" id="comname" value="" /></div><br>
        <div> メールアドレス <input type="text" name="" id="commail" value="" /></div><br>
        <div id="avatar"></div>
        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $("#qqnum").blur(function() {
                var qq = $("#qqnum").val();
                $("#commail").val(qq + "@qq.com");
                $.ajax({
                    type: "get",
                    url: "https://v1.ikxin.com/api/qqname.php?a=getqqnickname&qq=" + qq,
                    dataType: "jsonp",
                    jsonp: "callback",
                    jsonpCallback: "portraitCallBack",
                    success: function(data) {
                        $("#comname").val(data[qq][6]);
                    },
                    error: function() {
                        $("#comname").val("获取失败");
                    }
                });
                $.ajax({
                    type: "get",
                    url: "https://v1.ikxin.com/api/qqname.php?a=getqqavatar&qq=" + qq,
                    dataType: "jsonp",
                    jsonp: "callback",
                    jsonpCallback: "qqavatarCallBack",
                    success: function(data) {
                        $("#avatar").html("<img src='" + data[qq] + "'>");
                    },
                    error: function() {
                        alert("获取失败");
                    }
                });
            })
        </script>
    </body>
</html>

PHP コード

<?php
header("content-Type: text/html; charset=UTF-8");
$a = @$_GET['a'] ? $_GET['a'] : '';
if(empty($a)){
    header("Location: ../");
    exit;
}
// 获取 QQ 昵称
if($a == "getqqnickname"){
    $qq = isset($_GET['qq']) ? addslashes(trim($_GET['qq'])) : '';
    if(!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
        $qqnickname = file_get_contents('http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins='.$qq);
        if($qqnickname){
            $qqnickname = mb_convert_encoding($qqnickname, "UTF-8", "GBK");
            echo $qqnickname;
        }
    }
}
// 获取 QQ 头像
if($a == "getqqavatar"){
    $qq = isset($_GET['qq']) ? addslashes(trim($_GET['qq'])) : '';
    if(!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
        $qqavatar_1 = file_get_contents('http://ptlogin2.qq.com/getface?appid=52958812&imgtype=4&uin='.$qq);
        $qqavatar = str_replace('http', 'https', $qqavatar_1);
        if($qqavatar){
            echo str_replace('pt.setHeader', 'qqavatarCallBack', $qqavatar);
        }
    }
}

注意事項

取得した QQ アバターは HTTP 形式です。