참고 Svelte Login using Access & Refresh Tokens 유튜브 영상

📗 Svelte 로그인 기능 만들기

로그인 기능은 SNS 로그인 방식을 사용하여 간편 로그인 기능을 구현하려고 한다. 그럴려면 우선 로그인해야하는 페이지와 로그인/회원가입 페이지를 만들어야한다. 우선 페이지를 나누고 로그인 페이지를 만들어보자!

📄 로그인이 필요한 페이지

로그인은 페이지를 시작할 때 물어보는게 제일 좋을거 같았다. 가장 먼저 회원으로 시작할 건지 혹은 비회원으로 시작할 건지에 대해 묻고 비회원일 경우 루틴을 저장할 수 없다.

📘 Kakao 로그인 기능 추가하기

SNS 로그인 기능 중에 firebase를 사용하여 구글/페이스북/인스타그램/트위터를 한번에 추가할 수도 있지만 이건 추후에 시작해보고 우선 회사에서도 진행할 Kakao 로그인을 우선적으로 구현해보자.

📄 Kakao 로그인

먼저 KakaoDeveloper에서 로그인하여 프로젝트를 만들어준다.

<script>
    const key = '{api key}';
    const redirect_uri = 'http://localhost:5173';
    const url = `https://kauth.kakao.com/oauth/authorize?client_id=${key}&redirect_uri=${redirect_uri}&response_type=code`;

    function kakaoLogin(){
        location.href=url;
    }
</script>
<div class="text-center">
    <button type="button" class="kakoBtn" on:click="{kakaoLogin}"/>
</div>
<style>
    button.kakoBtn{
        background-image: url("kakao_login_btn.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin: 10px;
        width: 100px;
        height: 50px;
    }
</style>

다음과 같이 코드를 작성하여 api를 사용하려고 한다. 이렇게 요청하면

해당 화면이 나오고 로그인 버튼을 눌러보면

이미지의 경우 kakao 공식 홈페이지 이미지나 구글에서 검색하여 uri를 사용하면 된다.

다음과 같이 화면이 나온다. 동의하고 진행하면 등록된 url로 code 파라미터 값과 함께 날라오는데 이 code값을 이용하여 token값을 가져오고 token을 갖고 유저 정보를 가져올 수 있다.

다음 시간에는 code값을 사용하여 유저 정보까지 가져와 back end에 던져보자!