<div id="readability-page-1" class="page"><div id="entry-view">
                
                <main>
                    <section>
                        <h2>카카오 로그인을 사용하고 있다면 반드시 체크해야할것</h2>
                        <div>
                            <article id="mainContent">
                                <div>
                                    <p><a href="/m/category/FRONTEND"><span>FRONTEND</span></a></p><h3>카카오 로그인을 사용하고 있다면 반드시 체크해야할것</h3>
                                </div>
                                <p><cite>나를찾는아이</cite>
                                    <span> 2023. 8. 4. 15:20</span>
                                </p>
                                

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory"></ins>



            
                <div>
                                <p data-ke-size="size16"><a href="https://developers.kakao.com/docs/latest/ko/kakaologin/js" target="_blank" rel="noopener">https://developers.kakao.com/docs/latest/ko/kakaologin/js</a></p>
<figure id="og_1691129589313" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Kakao Developers" data-og-description="카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다." data-og-host="developers.kakao.com" data-og-source-url="https://developers.kakao.com/docs/latest/ko/kakaologin/js" data-og-url="https://developers.kakao.com/" data-og-image="https://scrap.kakaocdn.net/dn/d0pi7u/hyTwcNqWLk/ZZIoKzK4KPM1Gtckf0tcS0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bpHPXL/hyTwp63Y1I/oIumGDdHt0ONgDIijfMBNk/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000,https://scrap.kakaocdn.net/dn/bi8P01/hyTwfDoH3n/l85kbz2GgCocLTKyAkkjJ1/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000"><a href="https://developers.kakao.com/docs/latest/ko/kakaologin/js" target="_blank" rel="noopener" data-source-url="https://developers.kakao.com/docs/latest/ko/kakaologin/js">

<div>
<p data-ke-size="size16">Kakao Developers</p>
<p data-ke-size="size16">카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.</p>
<p data-ke-size="size16">developers.kakao.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/d0pi7u/hyTwcNqWLk/ZZIoKzK4KPM1Gtckf0tcS0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bpHPXL/hyTwp63Y1I/oIumGDdHt0ONgDIijfMBNk/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000,https://scrap.kakaocdn.net/dn/bi8P01/hyTwfDoH3n/l85kbz2GgCocLTKyAkkjJ1/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000"></figure>



<p data-ke-size="size16">카카오로그인 javascript sdk에서</p>

<p data-ke-size="size16">Kakao.Auth.login() 함수가 제거되었고</p>

<p data-ke-size="size16">Kakao.Auth.authorize()를 사용해야합니다</p>


<p data-ke-size="size16">레거시버전 v1 js sdk는 아래와 같은 메뉴얼을 제공하고 있습니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-08-04 오후 3.15.20.png" data-origin-width="1648" data-origin-height="1016">
    <span data-url="https://blog.kakaocdn.net/dn/cB8r8O/btspZC2alCa/SfynCNA7fArJL7WkC3vxM0/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/cB8r8O/btspZC2alCa/SfynCNA7fArJL7WkC3vxM0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-08-04 오후 3.15.20.png" data-origin-width="1648" data-origin-height="1016">
    </span>
    
</figure>

<p data-ke-size="size16">login() 메서드를 통해 카카오 로그인을 팝업창을 통해 구현합니다</p>

<p data-ke-size="size16">그런데 v2에서는 해당 메서드가 보안의 문제로 제거되었습니다</p>


<p data-ke-size="size16">그리고 또하나의 문제가 있는데 login() 메서드는 팝업을 띄우는 방식이기 때문에</p>

<p data-ke-size="size16">iOS에서 인스타그램, 페이스북 인앱브라우저상에서 웹사이트가 구동될때 카카오로그인을 정상적으로 사용할수 없습니다</p>


<p data-ke-size="size16">여러분들은 authorize() 함수를 통해 인증을 구현하시면 됩니다</p>

<p data-ke-size="size16">팝업창형태로 동작하지는 않지만 모든 환경에서 안전한 동작을 보장합니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="kakaologin_sequence_js.png" data-origin-width="1600" data-origin-height="1820">
    <span data-url="https://blog.kakaocdn.net/dn/bFNB0b/btspZCukQ4M/41sLEWF1oDnXZPs1SBDef1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bFNB0b/btspZCukQ4M/41sLEWF1oDnXZPs1SBDef1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="kakaologin_sequence_js.png" data-origin-width="1600" data-origin-height="1820">
    </span>
    
</figure>


<p data-ke-size="size16">카카오 로그인을 구현할때 oauth flow에 의해 인가코드를 발급받을 redirect_uri를 지정해주어야 하는데요</p>

<p data-ke-size="size16">그런데 카카오에서 제공하는 redirect_uri은 정적인 주소만 가능하기 때문에</p>

<p data-ke-size="size16">동적으로 query string을 추가할수가 없습니다</p>

<p data-ke-size="size16">그래서 동적으로 redirect_uri 정보를 만들고 싶을때 이걸 어떻게하지 하는 고민이 생기게 되는데요</p>


<p data-ke-size="size16"><a href="https://devtalk.kakao.com/t/redirect-url/1753" target="_blank" rel="noopener">https://devtalk.kakao.com/t/redirect-url/1753</a></p>
<figure id="og_1691129955422" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="인증 후 redirect url에 파라미터를 전송할 수 있을까요?" data-og-description="https://kauth.kakao.com/oauth/authorize?client_id=%s&amp;redirect_uri=%s&amp;response_type=code 의 api를 사용하여 앱인증을 한 후 redirect_uri에 앱 등록시 지정한 url과 다르게 주게되면 에러가 발생합니다. 이때에 redirect_url에 " data-og-host="devtalk.kakao.com" data-og-source-url="https://devtalk.kakao.com/t/redirect-url/1753" data-og-url="https://devtalk.kakao.com/t/redirect-url/1753" data-og-image="https://scrap.kakaocdn.net/dn/eHvD0/hyTxQhFSn0/w5VLaja7HpQPTm3nkyfSP1/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800,https://scrap.kakaocdn.net/dn/cS7OFd/hyTwjsgCrP/MkQkzh8CcDBE5h9TirxZf0/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800"><a href="https://devtalk.kakao.com/t/redirect-url/1753" target="_blank" rel="noopener" data-source-url="https://devtalk.kakao.com/t/redirect-url/1753">

<div>
<p data-ke-size="size16">인증 후 redirect url에 파라미터를 전송할 수 있을까요?</p>
<p data-ke-size="size16">https://kauth.kakao.com/oauth/authorize?client_id=%s&amp;redirect_uri=%s&amp;response_type=code 의 api를 사용하여 앱인증을 한 후 redirect_uri에 앱 등록시 지정한 url과 다르게 주게되면 에러가 발생합니다. 이때에 redirect_url에</p>
<p data-ke-size="size16">devtalk.kakao.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/eHvD0/hyTxQhFSn0/w5VLaja7HpQPTm3nkyfSP1/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800,https://scrap.kakaocdn.net/dn/cS7OFd/hyTwjsgCrP/MkQkzh8CcDBE5h9TirxZf0/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800"></figure>


<p data-ke-size="size16">꼼수로 state값을 이용하는 방법으로 다들 구현을 하고 계시는것 같습니다</p>

<p data-ke-size="size16">실제 state 변수는 보안을 위해 값을 검증하는 용도의 optional한 파라메터인데</p>

<p data-ke-size="size16">이 값에 인코딩한 url정보를 담아서 보내는 그런 꼼수를 사용할수있겠더라구요</p>


<p data-ke-size="size16">공식문서에서도 login() 함수가 제거되고 authorize()가 남아있습니다</p>

<p data-ke-size="size16"><a href="https://developers.kakao.com/sdk/reference/js/release/Kakao.html" target="_blank" rel="noopener">https://developers.kakao.com/sdk/reference/js/release/Kakao.html</a></p>
<figure id="og_1691129648658" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Kakao Developers" data-og-description="카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다." data-og-host="developers.kakao.com" data-og-source-url="https://developers.kakao.com/sdk/reference/js/release/Kakao.html" data-og-url="https://developers.kakao.com/" data-og-image="https://scrap.kakaocdn.net/dn/LW1GW/hyTwc7KhQY/J7fNNeDVfbXfG0okVtMJIk/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bk6Sf0/hyTwiNFgGG/3YOgVW8nOSN8WDemHl7tL1/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000,https://scrap.kakaocdn.net/dn/CigNf/hyTxZeDlrJ/BgOCSFRKiBagVV5Qq6Erj0/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000"><a href="https://developers.kakao.com/sdk/reference/js/release/Kakao.html" target="_blank" rel="noopener" data-source-url="https://developers.kakao.com/sdk/reference/js/release/Kakao.html">

<div>
<p data-ke-size="size16">Kakao Developers</p>
<p data-ke-size="size16">카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.</p>
<p data-ke-size="size16">developers.kakao.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/LW1GW/hyTwc7KhQY/J7fNNeDVfbXfG0okVtMJIk/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bk6Sf0/hyTwiNFgGG/3YOgVW8nOSN8WDemHl7tL1/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000,https://scrap.kakaocdn.net/dn/CigNf/hyTxZeDlrJ/BgOCSFRKiBagVV5Qq6Erj0/img.png?width=3840&amp;height=1000&amp;face=0_0_3840_1000"></figure>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-08-04 오후 3.13.36.png" data-origin-width="466" data-origin-height="992">
    <span data-url="https://blog.kakaocdn.net/dn/z5EwP/btsp34XzXC7/yURi43OjKDajzzAWKGCDeK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/z5EwP/btsp34XzXC7/yURi43OjKDajzzAWKGCDeK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-08-04 오후 3.13.36.png" data-origin-width="466" data-origin-height="992">
    </span>
    
</figure>




<p data-ke-size="size16">카카오 로그인 구현할때 참고하세요</p>

            
            
                </div>
            

                                
                            </article>
                            
                                
                            
                            
                            
                                
                            
                            
                            
                            
                                
                            
                        </div>
                    </section>
                </main>
                
            </div></div>

나를 찾는 아이

Kyoung min, Kim

https://developers.kakao.com/docs/latest/ko/kakaologin/js
 
 
 
카카오로그인 javascript sdk에서
 
Kakao.Auth.login() 함수가 제거되었고
 
Kakao.Auth.authorize()를 사용해야합니다
 
 
레거시버전 v1 js sdk는 아래와 같은 메뉴얼을 제공하고 있습니다
 
 
login() 메서드를 통해 카카오 로그인을 팝업창을 통해 구현합니다
 
그런데 v2에서는 해당 메서드가 보안의 문제로 제거되었습니다
 
 
그리고 또하나의 문제가 있는데 login() 메서드는 팝업을 띄우는 방식이기 때문에
 
iOS에서 인스타그램, 페이스북 인앱브라우저상에서 웹사이트가 구동될때 카카오로그인을 정상적으로 사용할수 없습니다
 
 
여러분들은 authorize() 함수를 통해 인증을 구현하시면 됩니다
 
팝업창형태로 동작하지는 않지만 모든 환경에서 안전한 동작을 보장합니다
 
 
 
카카오 로그인을 구현할때 oauth flow에 의해 인가코드를 발급받을 redirect_uri를 지정해주어야 하는데요
 
그런데 카카오에서 제공하는 redirect_uri은 정적인 주소만 가능하기 때문에
 
동적으로 query string을 추가할수가 없습니다
 
그래서 동적으로 redirect_uri 정보를 만들고 싶을때 이걸 어떻게하지 하는 고민이 생기게 되는데요
 
 
https://devtalk.kakao.com/t/redirect-url/1753
 
 
꼼수로 state값을 이용하는 방법으로 다들 구현을 하고 계시는것 같습니다
 
실제 state 변수는 보안을 위해 값을 검증하는 용도의 optional한 파라메터인데
 
이 값에 인코딩한 url정보를 담아서 보내는 그런 꼼수를 사용할수있겠더라구요
 
 
공식문서에서도 login() 함수가 제거되고 authorize()가 남아있습니다
 
https://developers.kakao.com/sdk/reference/js/release/Kakao.html
 
 
 
 
 
카카오 로그인 구현할때 참고하세요

카카오 로그인을 사용하고 있다면 반드시 체크해야할것

댓글