현재 접속자 아이피 누굴까? 궁금하지 않으신가요 ?

안녕하세요...

사이트 운영자님께서 내 사이트에 접속자를 누르면 아이피가 나오는데 이양반들이

로봇인지, 실사용자인지... 도대체가 알 수 없는데.. 궁금하지 않으세요 ?

해당 내용은 다소 복잡하지만, 모두 진행하고 나면, 그 동안의 궁금증은 모두 해결 되실 것 같습니다.

먼저 결과부터 아래 움짤을 확인해보세요

자 그럼 결과만 봤을때 호기심이 생겼다면 이제 시작해보겠습니다.

다소 복잡합니다. 가입도 해야 하고 -_- 해야 해서 

https://www.ip2location.io/

위 사이트를 접속합니다.

그리고 가입해주세요 ... 가입 하더라도 신용카드 정보를 요구하지 않습니다.

그냥 가입이 되며, 한달 기준 3만개의 아이피를 조회할 수 있습니다.

가입 이후 나오는 API KEY를 복사해주세요

그리고 해당 게시글 상단에 업로드 된 파일을 다운로드 한 뒤 파일을 여시면 API키 등록하는 곳이 있습니다.

요기에 API_KEY를 등록해주시고 저장하신 다음 최상단에 업로드 해주세요

index.php 파일이 있는 곳에 업로드 해주시면 됩니다.

그리고 이제 네이버 맵 클라우드플랫폼으로 이동 합니다.

https://www.ncloud.com/product/applicationService/maps

한달 천만건 무료이므로 안심하시고 사용할 수 있습니다.

맵 등록 이후 클라이언트 아이디를 복사해주세요

해당 클라이언트 아이디는 정해진 도메인에서만 동작하기에 노출되어도 큰 문제는 없습니다.

그누보드 순정 기준입니다. 

사용하시는 connect\basic\current_connect.skin.php 파일을 열어주세요

테마를 사용하신다면 theme\basic\skin\connect\basic\current_connect.skin.php 경로입니다.

해당 파일을 여시고 

8번 라인 위에 네이버 지도 스크립트를 불러와 주세요

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

그 이후 

[code]

<?php

    }

    if ($i == 0)

        echo "<li class=\"empty_li\">현재 접속자가 없습니다.</li>";

    ?>

      </ul>

[/code]

아래에 다음 코드를 추가 해주세요

[code]

<?php if($is_admin){?>

            <div class="map-wrap">

                <div class="map-close">

                    <i class="fas fa-close fa-3x"></i>

                </div>

                <div class="map-desc">

                    <h3></h3>

                    <p></p>

                </div>            

                <div id="map"></div>

            </div>

            <?php } ?>

[/code]

그 이후 하단 현재 접속자 목록 끝 부분 밑에 아래 코드를 추가해주세요

[code]

<script>

$('span.crt_name').each(function() {

        var regex = /^(\d{1,3}\.){3}\d{1,3}$/;

        $(this).click(function(){

            if (regex.test($(this).text())) {

                $.ajax({

                url: "/ip_search.php",

                type: "POST",

                data: {data: $(this).text()},

                dataType:"json",

                success: function(e){

                    $(".map-wrap").addClass("on")

                    $(".map-desc h3").text(e.data.city_name+"("+e.data.country_name+"-"+e.data.region_name+")");

                    $(".map-desc p").text(e.data.ip);

                    var mapOptions = {

                    center: new naver.maps.LatLng(e.data.latitude, e.data.longitude),

                    zoom: 10

                };

                var map = new naver.maps.Map('map', mapOptions);

                var marker = new naver.maps.Marker({

                position: new naver.maps.LatLng(e.data.latitude, e.data.longitude),

                map: map

                });  

               }

                })

            }

        })

    });

    $(".map-close").click(function(){

        $(".map-wrap").removeClass("on");

    })

</script>

[/code]

그리고 해당 폴더 내 style.css 를 첨부된 파일로 교체 하거나 .. 아래 코드를 추가 합니다.

[code]

#current_connect{position: relative;}
.map-wrap{position: absolute; width: 50%; display: hidden; flex-wrap: wrap; right:0; top: 0; height: 400px;}
.map-wrap.on{display: flex;}
.map-wrap .map-close{position: absolute; right: 0; top: 0;}
.map-wrap .map-close i{cursor: pointer;}

.map-wrap .map-desc{background-color: #fff; padding: 20px; text-align: center; flex-basis: 100%;}
.map-wrap .map-desc h3{font-weight: bold; font-size: 1.5rem; line-height: 2rem;}
.map-wrap .map-desc p{font-size: 1.25rem; line-height: 1.75rem;}
.map-wrap #map{flex-basis: 100%; height: 80%;}

[/code]
 

그리고 테스트 해보세요

만약, 맵까진 필요없다 하시면, 위 코드에서 맵 부분만 제거 하시면 지역 정보 및 아이피 정보만 출력됩니다.

그럼 모두 성공하시길 빕니다.

감사합니다.