[장고] allauth 카카오 로그인 구현: 확인 페이지 없이 바로 로그인 화면으로 이동하기

Django 프로젝트에 소셜 로그인 기능을 추가하면 사용자 경험을 크게 향상시킬 수 있습니다. 특히, 한국에서는 많은 사람들이 카카오 계정을 사용하기 때문에 카카오 로그인을 구현하는 것은 매우 유용합니다.

이번 포스팅에서는 지난 글에서 Django Allauth를 사용하여 구현한 카카오 로그인 기능에 확인 페이지를 건너뛰고 바로 로그인 화면으로 이동하는 방법을 소개하겠습니다.

1. 템플릿에 로그인 버튼 추가하기

가장 먼저 해야 할 일은 카카오 로그인 버튼을 템플릿에 추가하는 것입니다. 일반적으로 a 태그를 사용하여 간단하게 구현할 수 있습니다.

a 태그를 이용한 로그인 버튼

{% load socialaccount %}
    <a href="{% provider_login_url 'kakao' %}">Log In With Kakao</a>
    

위 코드에서는 a 태그를 사용하여 로그인 버튼을 추가했습니다. 그러나 이 방법은 사용자가 버튼을 클릭하면 카카오 계정으로 로그인할 것인지 묻는 확인 페이지로 넘어가게 됩니다. 이는 GET 방식으로 로그인을 시도했기 때문입니다.

2. 확인 페이지 건너뛰기

사용자가 로그인 버튼을 클릭했을 때, 확인 페이지 없이 바로 카카오 로그인 화면으로 넘어가도록 하려면 POST 방식을 사용해야 합니다. 이를 위해 form 태그를 사용하여 버튼을 구현할 수 있습니다.

form 태그를 이용한 로그인 버튼

{% load socialaccount %}
    <form action="{% provider_login_url 'kakao' %}" method="post">
        {% csrf_token %}
        <button class="p-0" type="submit" style="border: 0; background: transparent">
            <img src="{% static 'img/kakao_login_large_narrow.png' %}" height="38px" alt="Log In With Kakao"/>
        </button>
    </form>
    

위 코드에서는 form 태그와 POST 방식을 사용하여 로그인 버튼을 추가했습니다. 이렇게 하면 사용자가 버튼을 클릭했을 때, 확인 페이지 없이 바로 카카오 로그인 화면으로 넘어가게 됩니다.

3. 주의 사항

로그인 버튼을 디자인할 때는 소셜 플랫폼이 제공하는 가이드를 따르는 것이 중요합니다. 이는 사용자에게 친숙한 디자인을 제공하고, 일관된 사용자 경험을 보장하기 위함입니다. 카카오 로그인 버튼의 경우, 카카오에서 제공하는 공식 버튼 이미지를 사용하는 것이 좋습니다.

<button class="p-0" type="submit" style="border: 0; background: transparent">
        <img src="{% static 'img/kakao_login_large_narrow.png' %}" height="38px" alt="Log In With Kakao"/>
    </button>
    

위와 같이 버튼을 투명하게 설정하고, 이미지로만 구성된 버튼을 사용하면 디자인 일관성을 유지하면서도 기능적으로 완벽한 로그인 버튼을 구현할 수 있습니다.

결론

이번 포스팅에서는 Django Allauth를 사용하여 카카오 로그인 버튼을 템플릿에 추가하고, 확인 페이지 없이 바로 로그인 화면으로 넘어가는 방법을 알아보았습니다. 간단한 코드 수정만으로도 사용자 경험을 크게 개선할 수 있으니, 프로젝트에 적용해 보시기 바랍니다.