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 방식입니다.