# kakaologin

agnusdei1207

C:\workspace\프로젝트\node_modules\capacitor3-kakao-login\android\build.gradle 위 경로로 이동 주석된 부분 주석 해제 또는 없다면 채워 넣기 C:\workspace\프로젝트명\android\app\src\main\java\com\프로젝트명\MainActivity.java 위 경로로 이동하여 import com.fumi.capacitor3kakaologin.Capacitor3KakaoLoginPlugin; 부분에서 `

kop981020

지난 글에서 카카오 Developers에 접속하여 설정하는 법에 대해 알아보았다. 이번 글에서는 필자가 프로젝트에서 사용하였던 코드와 간단한 설명을 덧붙히겠다. 우선 React 프로젝트를 실행하고 나면 .env 파일이 보일 것이다. 🔥 .env 파일은 반드시 최상위 디렉토리에 존재해야한다. 따라서 .gitignore 파일에서 위처럼 설정해주어야 후에 깃허브에 업로드 시 다른 사람들에게 보이지 않게 할 수 있다. 본론으로 돌아가보자. > ".env" 파일에서 REST API 키와 REDIRECT URI를 설정해준다. 보다 자세한 설명을 위해 코드 전체를 첨부하겠다. > REST API 키와 REDIRECT URI를 이용하여 KAKAO_URL을 설정해주었다. 또 하나의 중요한 과정이 필요한데 CallBack 해줄 js 파일을 하나 더 만들어야했다. 똑같이 코드 전문을 첨부하되, 일부 코

kop981020

오늘은 멋쟁이사자처럼 해커톤을 진행하면서 성공했던 소셜 로그인 3가지 중 가장 대중화되어있는 카카오 소셜 로그인에 대해 최대한 간결하게 설명해보려고 한다. 먼저, 카카오 Developers 사이트에 접속한다. 사진 상단의 중간쯤에 내 애플리케이션을 클릭한다. 개인 소유의 카카오 아이디로 로그인을 하게 되면 아래와 같은 창이 뜬다. > "애플리케이션 추가하기" 버튼을 클릭 <img src="https://velog.velcdn.com/images/

tykim1227

Oauth2를 이용한 카카오 로그인을 구현 원래는 API KEY, REDIRECT URL을 내가 설정해줘야 하지만 백엔드에서 카카오로그인 URL을 만들어줬고, 나는 백엔드에서 설정한 REDIRECT URL에서 토큰값만 받아와 적용시키면 되는 구조였다. 따라서 APIKEY 발급 등의 과정은 생략 Oauth2 카카오 로그인 a태그 vs axios 주석처리한 부분은 axios 통신을 이용해 요청을 보낸것 하지만 CORS 오류 발생.. Axios를 사용하여 POST 요청을 할 때 CORS 제한이 적용되는 XMLHttpRequest 기반 요청이었는데, 접속하려는 서버(카카오 서버)가 Access-Control-Allow-Origin응답에 적절한 CORS 헤더( )를 보내지 않아 동일 출처

tygerhwang

Firebase Dynamic Links 사용해 보기 Firebase Dynamic Links Documentation URL Scheme / Deeplink 설정 및 작동 방식 이해하기 firebase_core | Flutter Package firebasedynamiclinks | Flutter Package uni_links | Flutter Package [http | Da

luna_lee

Step 3: 사용자 로그인 처리 4. 로그아웃 아래는 로그아웃 처리를 하는 메소드인데, 마찬가지로 session을 이용한다는 가정 하에 작성한 로직이기 때문에 현재는 session과 JSESSIONID 쿠키를 지워주는 방식으로 로그아웃하고 있다. JWT 인증 방식으로 바꾸게 되면 JWT 토큰을 만료시키는 방식으로 로그아웃도 수정할 예정이다. 일단 중요한 건 카카오 로그인 api를 이용한 로그아웃이니 카카오 로그아웃 로직 위주로 살펴보자. 로그아웃 코드 중간 쯤에 위치한 이 부분이 카카오 로그아웃 로직이다. 로그아웃

luna_lee

Step 3: 사용자 로그인 처리 1. 토큰 유효성검증 토큰 유효성 검증은 카카오 로그인의 토큰정보보기(url: kapi.kakao.com/v1/user/accesstokeninfo) 기능을 이용하면 된다. request 헤더에는 Authorization: Bearer + ACCESS_TOKEN을 설정해준다. 파라미터는 없다. 그리고 HTTP_OK 응답을 받으면 id 및 토큰만료시간을 확인할 수 있다. 하지만 유효성 검증이 목적이므로 해당 데이터를 따로 사용하지는 않았다. 에러가 발생할 경우에는 각 에러에 맞게 처리해주면 된다. 참고로 아래는 카카오 개발자 문서에 있는 토큰 정보 에러 발생 시 응답 코드이다. 본인은 유효하지 않은 앱키나 액세스 토큰으로 요청한 경우(-401)일 때는 커스

luna_lee

개인 프로젝트를 만들면서 소셜 로그인 기능도 구현해보고 싶었다. 그래서 일단 제일 대중적인 카카오 로그인을 구현해보기로 결정! 우선은 라이브러리 없이 로그인을 구현해보고 나중에 OAuth2도 적용해 볼 예정이다. 그리고 JWT 토큰이랑 Spring Security도 입혀가보겠다 ㅎㅎ 사싷 카카오 로그인을 구현하기 위해 가장 먼저 해야할 일은 kakao developers 계정을 만들고, 클라이언트 키를 발급받고 등등이 있다. 이건 다른 분들이 참고할 만한 글을 많이 작성해 놓아서 따로 여기에는 정리하지 않으려 한다. 아래 사진은 카카오 개발자 사이트에서 정리해운 카카오 로그인 과정 시퀀스 다이어그램이다. 이걸 참고해서 차근차근 하나씩 구현해나가보자. 본격적으로 구현하기 전에 사실 문서를 보고

ksanagimotoko

What is kakao loing? OAuth 2.0 기반의 사용자 인증기능 카카오 개발자 센터 가입 "카카오 개발자 센터"에서 회원가입을 합니다. 내 어플리케이션 등록 "내 어플리케이션"을 들록하면, 카카오 개발자 센터에서 key를 하나 만들어 줍니다. 키의 종류 : 네이티브 앱키, 자바스크립트 키, REST API 키, Admin 키 플랫폼 설정하기 web/ android/ ios ... 중에서 선택합니다. ex) 웹 일경우 사이트 도메인을 등록합니다. Redirect URI 등록 카카오 로그인 활성화를 하고 Redirect URI 를 등록합니다. 사용자 동의 화면에서 "동의하고 계속하기" 버튼을 누르고 Redirect URI를 등록합니다. > Login.vue 파일을 만들어서 로그인을 구현할 경우 http://localhost:8080/login 을 입력하고 저장버튼을 누릅니다. 카카

ljm0726

📌 목표 spring-security로 OAuth2로그인을 하여 사용자를 인증하고 JWT토큰으로 관리. 나아가 custom handler가 필요한 kakao login으로 예제 구현 🛠tech stack Spring-Boot: 2.7.7 Vue3 JWT 📂 디렉터리 구조 ⏩ 순서 1. Spring-Security 2. 커스텀 메서드들 3. Kakao login 예제 + CustomHandler 🕛 Spring-Security > 💡 Spring Security란 인증 / 인가 및 보호 기능을 제공하는 프레임워크. Spring 기반 애플리케이션을 보호하기 위한 표준. 다양한 보안 솔루션을 제공한다. 다양한 인증방식 HTTP, Digest, OAuth2 등을 지원, CSRF와 같은 웹 공격 방어, SST/TLS 기능 제공 _Srping Secur

soyoung-dev

💌 [안드로이드/코틀린] KaKao Login API 활용 (카카오 로그인) https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android 📌 요구 사양 Android Studio 3.6.1 이상 API 21: Android 5.0(Lollipop) 이상 Java 8 이상 📌 Gradle 설정 💜 build.gradle에 추가 : Android Studio Artic Fox(최신) 외 버전 💜 settings.gradle에 추가 : Android Studio Artic Fox(최신) 버전 📌 필요한 모듈 설정 💜 build.gradle(Module) 에 추가 💜 AndroidManifest.xml 에 추가 📌 플랫폼 등록 링크 를 클릭하

mlmlmlmlz

카카오 로그인 기능 탑재 후 앱을 배포하여 베타 테스트 진행중 고객사 측에서 안드로이드에서 카카오 로그인 버튼을 눌러도 아무 반응이 없다는 컴플레인을 받았다.. 그럴리가 없..는데.. 하고 테스트 해보니 정말 아무 반응이 없었다. 로그를 찍어도 딱히 정보가 찍히지 않는 것이다.. 원인 및 해결 배포하면서 프로젝트를 release 모드로 바꾸면 kakao developer 플랫폼에서 키 해시를 추가로 등록해줘야 한다. 릴리즈 모드 해시값을 얻는 명령은 다음과 같다. 위 명령어의 결과로 나온 해시값을 kakao developer - 플랫폼 - Android 키 해시에 추가하면 이상 없이 정상 작동하는 것을 확인할 수 있다. 정리 앱 출시를 마치기 전 앱에 카카오 로그인 기능이 담겨있다면 아래의 값들이 kakao developer android 키 해시 항목에 추가되어 있어야 한다. 디버그 모드 해시값 릴리즈 모드 해시값

mlmlmlmlz

카카오 로그인을 구현하고 잘 되는지 테스트까지 마친 후였는데 ..!! 어느 날 보니 갑자기 기능이 작동하지 않았다... 앱 미설치 시 링크(AuthCodeClient.instance.request())를 통해 로그인하는 로직은 잘 동작하는데 문제는 앱을 통한 로그인 기능(AuthCodeClient.instance.requestWithTalk())이 말썽이었다. 정상적이라면 동의창이 뜨고 동의하면 다시 개발 중인 앱으로 돌아가야 하는데, 카톡으로 이동한 후 동의화면도 뜨지 않은 채 바로 개발중인 앱으로 돌아오는 것이었다.. kakao developer 문의 결과 서버 로그에는 내쪽으로 토큰이 잘 발급되고 있다는 피드백을 받았다. ..? 대체 왜 안 되는데 그럼 .. 🤯 원인 원인은 네이버 로그인을 추가하면서 카카오톡 로그인에 사용되는 url이 네이버 SDK에서 수신받아 처리되고 있는 것이었다. 네이버 로그인을 위해선 위와 같이 AppDelega

carloskim

이번 프로젝트에서는 로그인과 결제 화면을 맡았는데 로그인 부분은 이메일 패스워드로하는 로그인 말고, 소셜 로그인만 구현하기로 했고, kakao를 통한 로그인을 구현하기로했습니다. UI는 매우 간단하지만 토큰을 발행하고 백엔드쪽에 보내는 것에서 굉장히 애를 먹었습니다... 그렇다면 이제 한 번 알아보도록 합시다! 1.🏓카카오 디벨로퍼 들어가기 우리팀은 javascript SDK 방식이 아닌, REST API 방식으로 구현하기로 했기 때문에 REST API로 구현하기로 했습니다. https://developers.kakao.com/docs/latest/ko/getting-started/app 일단 웹사이트에 들어가셔서 내 애플리케이션 누르시고, 로그인을 하고 본인의 애플리케이션을 등록하면

tygerhwang

Social Login - Kakao Talk 이번 글에서는 카카오 로그인에 대해서 작성하려고 한다. 소셜 로그인 중에 국내에서 가장 많이 사용되고 있는 카카오 로그인에 대해서 개발자 센터 등록 부터 소스 코드까지 설명하겠다. 맥OS를 기준으로 작성하였으며 카카오 관련 SDK는 flutterkakaosdk를 사용하여 작성한 글이다. 카카오 로그인을 사용하기 위해서는 kakao developer에 앱 등록을 하여야 사용할 수 있다. kakao developer 사이트에 접속하여 카카오 계정에 로그인한 뒤 상단에 "내 애플리케이션" 탭에 진입 후 애플리케이션 추가하기를 눌러준다. 앱 아이콘/앱 이름/사업자명을 입력하게 되어있는데 나는 앱 이름과 사업자명에 "velogexample"라는 이름으로 생성하였다. ![](https://velog.velcdn.com/images/tygerhwang/post/e07a5c33-3dca-419a-b96b-ac692b74f7a3/ima

dab2in

Spring boot 소셜 로그인 - 카카오 jwt 토큰 방식을 이용해 카카오 로그인 구현하기 해당 프로젝트에서 회원가입은 Email, Nickname, Password로 하고, 로그인은 Email, Password로 한다. 따라서 RequestDto는 다음과 같이 구성이 된다. SocialUserInfoDto 컨트롤러는 code를 받아 kakaoUserService로 넘겨준다. SocailLoginController 카카오 로그인 과정을 전체적으로 보면 다음과 같다. KakaoUserService "인가코드"로 "액세스 토큰" 요청 엑세스 토큰을 요청하는 클래스에서는 HTTP Header, Body에 필요한 정보들을 담아준다. client_id에는 kakao developers에서 제공된 REST API키를 넣는다. redirect_uri에는 redirect할 callb

hyes-y-tag

소셜 로그인 유저가 탈퇴할 경우 우리 프로젝트와 유저의 kakao로 이어진 연결을 끊어주기 위해 unlink(by Admin Key)를 사용하였고 역시나 마주한 오류. 🧐 kakao Login Unlink ? > 연결 끊기는 앱과 사용자 카카오계정의 연결을 끊는 기능입니다. > 출처: Kakao Developers (https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#unlink) 연결 끊기는 두 가지 방식이 존재하며 > 연결시 발급한 access token kakao에서 주는 앱 admin key 프로젝트의 탈퇴 로직상 access_token 사용은 번거로워서 admin key를 이용하는 방식으로 진행을 했다. 근데 401에러 두둥- 😵 무엇이 문제였을까? axios.post에 알뜰살뜰히 정보를 넣어 보냈건만 401에러라니,, 아무래도 데이터가 안넘어가는듯 해서 `param

hyes-y-tag

소셜 로그인(kakao) 구현 코드를 보던 중 저 axios 첫번째 인자의 길이가 생각보다 길어서 수정을 했는데 거기서 또 오류를 맞이했다. 1작성 1오류,,? 🧐 axios가 뭐지? axios는 Javascript로 API 통신을 한다 하면 대표적으로 등장하는 promise기반 HTTP 클라이언트 이다. 참고 문서: Axios Docs 리액트에 대해 아무것도 모르는 채로 프로젝트에 적용해야 했었을 때가 있었는데 그때 폭풍 검색으로 처음 접한 axios 이제는 API 통신이 필수인 시대여서 js로 진행하는 프로젝트시 도움을 많이 받고 있다. 😵 문제가 무엇인가.. 무튼 문제가 무엇이냐 일단 axios의 기본 사용방법은 아래와 같고 axios로 카카오와 통신하는 코드를 작성했고 그 코드는 아래와 같았는데

kdh10806

1. kakao log-in 소셜 로그인으로 카카오 로그인을 구현하려고 했다. 프론트에서 인가 코드를 받아서 access_token을 kakao auth 서버에 요청하려고 하는데 계속 가 뜬다. 뭐가 문제지 싶어서 access_token을 출력했는데 뭐...뭐지? 왜 None이지? 요청을 보내서 토큰을 못받아 온다. 그래서 카카오 로그인 API 공식 문서를

tiatiahwang

🤡 Kakao Login 1. 카카오 API 등록 카카오 API 등록 링크 접속 후, 카카오 아이디로 로그인 화면 상단에 내 애플리케이션 클릭 후 아래 화면에서 애플리케이션 추가하기 클릭 앱이름과 사업자명 정보 입력후 저장 버튼 클릭!! ![](https://images.velog.io/images/tiatiahwang/post/38bd38f