Streampark 기능 메모장

주세환·2023년 5월 25일

Streampark

목록 보기

1/1

RestController

닉네임 조회

RestController

@GetMapping(value = "/nickname.do")
    public Map<String,Object> checkNickname(@RequestParam("nickname") String nickname){
        Map<String, Object> retMap = new HashMap<>();
        try{
            Profile profile = pRepository.findByNickname(nickname);
            if(profile == null){
                // 중복되지 않은 경우
                retMap.put("status", 200);
                retMap.put("result", 1);
            } else {
                // 중복된 경우
                retMap.put("status",409);
                retMap.put("result", 0);
            }
        }
        catch(Exception e) {
            e.printStackTrace();
            retMap.put("status", -1);
            retMap.put("error", e.getMessage());
        }
        return retMap;
    }

조회하는 RestController를 만든다

Postman

Postman에서 조회해보자.

db에 등록되어 있지 않은 닉네임을 입력하면 위 사진처럼 뜨고

db에 등록되어 있는 닉네임을 입력하면 위 사진처럼 뜬다.

Postman의 주소를 잘 보면 ~~/nickname.do 뒤에 내가 입력한 키값, value값이 추가된다.

html에도 위 주소와 일치시켜야 한다.

html

배운 내용이다.

배운 내용을 보면

const url = /[[@{/api/test1/select.do(aaa='a')}]]/"";

이렇게 되어있다. 주소가 동적일 때(변경되지 않을 때)는 위처럼 사용하면 된다.

하지만 지금 사용하는 기능은 주소가 변경된다.

<input type="text" name="nickname" id="nickname" placeholder="닉네임" required><br />

<!--중략-->

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script th:inline="javascript">

        async function checkNickname() {
            const nickname = document.getElementById('nickname').value;
            // http://127.0.0.1:9090/streampark/api/profile/nickname.do?nickname=12

            let url = /*[[@{/api/profile/nickname.do}]]*/"";

            url += "?nickname=" + nickname;
            console.log(url);

            const headers = {"Content-Type":"application/json"};
            const { data } = await axios.get(url, { headers:headers });

            if(data.result === 1){
            	alert("프로필이 생성되었습니다.");
                document.getElementById('form').submit();
            }
            else if(data.result === 0){
                alert("중복된 닉네임입니다. 다른 닉네임을 사용해주세요.");
            }
            else{
                alert(data.message);
            }
        }
    </script>
</body>

html이다.

nickname 입력하는 줄에 id="nickname"을 선언하였다.

const url뒤에서는 동적인 기능을 추가할 수 없다.

const url대신 let url을 생성하여 뒤에 주소에서 고정되는 부분을 입력한다.

그 아래에서 url += ~~ 를 이용하여 주소의 변경되는 부분을 추가한다.

"?nickname=" + 뒤에 있는 nickname은 닉네임 줄에 선언한 id이름인 nickname을 뜻한다.

console.log(url)을 통해 변경되는 주소를 로그에 띄우면

이렇게 nickname칸에 입력한 값이 추가된다.

결과

중복된 닉네임을 입력했을 때.

중복되지 않은 닉네임을 입력하여 프로필이 생성되었을 때.

암호 확인

RestController

    // 암호 일치 확인
    @GetMapping(value = "/profilepw.do")
    public Map<String,Object> checkNickname(@RequestParam("nickname") String nickname,
        @RequestParam("profilepw") String profilepw){
        Map<String, Object> retMap = new HashMap<>();
        try{
            Profile profile = pRepository.findByNickname(nickname);

            if(bcpe.matches(profilepw, profile.getProfilepw()) == true){
                // 암호가 일치할 경우
                retMap.put("result", 1);
                retMap.put("status", 200);
            } else {
                // 암호가 일치하지 않을 경우
                retMap.put("result", 0);
                retMap.put("status",409);
            }
        }
        catch(Exception e) {
            e.printStackTrace();
            retMap.put("status", -1);
            retMap.put("error", e.getMessage());
        }
        return retMap;
    }

bcpe.matches(입력한 값, 암호화된 값) == true 를 이용하여 암호를 일치 여부를 확인할 수 있다.

Postman

암호가 일치할 때. result 값이 1이 출력된다.

반대로 일치하지 않을 때. result 값이 2가 출력된다.

주소창을 복사해서 html에 가져가보자

html

<body>
    <h1>Profile login Page</h1>
    <form method="post" th:action="@{/profile/login.do}" id="form">
        <label for="nickname">닉네임 :</label>
        <input type="text" id="nickname" name="nickname" th:value="${nickname}" readonly required>
        <br>
        <label for="profilepw">암호 :</label>
        <input type="password" id="profilepw" name="profilepw">
        <br>
        <button type="button" th:onclick="checkProfilepw()">접속</button>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script th:inline="javascript">

        async function checkProfilepw() {
            const nickname = document.getElementById('nickname').value;
            const profilepw = document.getElementById('profilepw').value;
            
            // http://127.0.0.1:9090/streampark/api/profile/profilepw.do?nickname=nickname&profilepw=1
            // Postman에서 가져온 주소

            let url = /*[[@{/api/profile/profilepw.do}]]*/"";

            url += "?nickname=" + nickname + "&profilepw=" + profilepw
            console.log(url);

            const headers = {"Content-Type":"application/json"};
            const { data } = await axios.get(url, { headers:headers });

            if(data.result === 1){
                document.getElementById('form').submit();
            }
            else if(data.result === 0){
                alert("암호가 일치하지 않습니다.");
            }
            else{
                alert(data.message);
            }
        }
    </script>
    
</body>