티스토리 자동 로그인 풀린 후 로그인 안될 때

티스토리 자동 로그인 풀린 후 로그인 안될 때

Kakao Developers 설정하기 1 Kakao Developers 설정 2 Flutter SDK 설정 3 로그인 로직 작성의 3단계로 작성되어있어 부득이하게 포스팅의 길이가 깁니다. 저는 Flutter SDK 중에 네이티브앱 서비스 방법을 이용합니다. 해당 포스팅은 로그인 설정 절차만 기재되어 있으니, 로그인 작동 방식에 관해서는 상단의 Kakao Developers 사이트를 참고해 주세요. 내 애플리케이션에 쓸 앱 아이콘, 앱 이름, 사업자 명을 등록해 줍니다.

추후에도 일반 페이지에서 수정할 수 있으니 초반에 너무 고민하실 필요는 없습니다. 애플리케이션을 등록하고 들어오면 앱키들이 보입니다.

카카오 싱크란?

아래 SNS 연동 로그인은 여러 쇼핑몰이나 회원가입 창에서 SNS연동 회원가입을 가능캐하여 회원가입을 유도합니다. 이런 기능들이 어떠한 방식으로 모든 사이트에서 여러가지 sns로 연결되어 로그인이 가능했을까요. 그 기능에는 오픈 AP 기능이 숨겨져 있는데, 그 중 카카오에서 로그인을 연결하는 API 기능 이름을 카카오 싱크라고 불립니다. 카카오 싱크의 핵심 기능은 다음 두 가지간편가입, 더 여러가지 이용자 정보 활용 입니다.

기능을 목록별로 정리해보자면 아래와 같습니다. 카카오 로그인 이용자 정보 가져오기 카카오톡에서 자동 로그인 선택 약관 눌러 동의 받기 선택 카카오톡 공유 선택 싱크 플러그인 선택 카카오 싱크를 마주친 사용자의 실행 절차는 13과 같습니다.

1 플랫폼 등록하기 Web, AOS, iOS

앱 설정 플랫폼 탭에서 설정할 수 있습니다. 앱으로 배포할 거라면 Android iOS 부분을 설정해주어야 합니다. 패키지명은 Android app src main AndroidManifest.xml 의 package 명을 입력하면 됩니다. ex. com.example.app 테스트만 할 거라면 당장에 해시를 등록할 필요는 없습니다. 키 해시를 발급받는 방법은 아래 글을 내용에서 확인할 수 있습니다.

웹으로 테스트하기 위해서는 Web의 도메인도 함께 등록해야합니다. 서버 도메인이 있으면 해당 도메인을 입력해주시면 됩니다. 크롬 웹에서 Flutter 프로젝트를 띄울 때는 포트를 고정해주어야 하는데, run 명령어는 다음과 같습니다.

서비스 로그인 과정

이용자 클라이언트와 서비스 서버, 카카오 인증 서버, 카카오 API 서버의 과정에서 단계별로 로그인을 하는 과정입니다. 앱에 등록된 Uri를 전달하고, 조회 및 검증을하면 카카오 API에서 요청 검증 및 처리를 합니다. 그렇게 제공 받은 사용 정보로 서비스 회원 여부까지 확인하여 신규 사용자라면 회원가입 처리가 완료됩니다. 과거 가입자라면 이용자 토큰을 카카오 API로 요청하여 토큰을 전달하여 로그인 화면을 보여줍니다.

만약 미가입자라면 로그인하지 않은 화면을 노출합니다.

1번 openSSL 사용하는 방법

openSSL을 설치하고 환경변수 설정 등 연관 세팅을 해준 뒤 터미널을 통해 구합니다. openSSL 과 연관된 설정은 아래 글이나 다른 정보를 참고하기 바란다. 위 글대로 openSSL 을 설정하고 터미널창에서 keytool exportcert alias androiddebugkey keystore USERPROFILE.androiddebug.keystore storepass android keypass android openssl sha1 binary openssl base64

이 명령어를 실행하면 키 해시 값이 나옵니다.

3 로그인 정보 구현

KakaoLoginViewModel의 User를 활용하여 간단하게 프로필 사진과 별명 받아올 수 있습니다. 그 외 정보들은 상단에 능력은 User 클래스를 활용하시면 됩니다. 작업물의 결과는 위와 같습니다. 글 주제와 연관이 없어서 사용하진 않았지만, 서비스로 적용하기 위해서는 상태관리 및 경우에 따라 데이터베이스화를 적용해야 합니다. 로그인으로 받아온 결괏값을 ViewModel이 아닌 상태관리툴을 이용하여 어떠한 방식으로 관리할지에 대해서는 다음 포스팅에서 다루도록 하겠습니다.

선택 3 AOS iOS 커스팀 스킴

상세한 정보는 를 참고해 주세요. iOS Flutter 프로젝트 Android app src main AndroidManifest.xml 를 수정합니다. 하위에 카카오 로그인 Redirect URI 설정을 위한 예제를 아래와 같이 추가합니다. Android12 API31 이상을 타깃으로 하는 앱은 exported 속성을 반드시 true로 선언해야 합니다.

자주 묻는 질문