아프리카TV 다양한 계정으로 로그인 하는 방법 알려드립니다

아프리카TV 여러가지 계정으로 로그인 하는 방법 알려드립니다

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

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

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

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

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

1 동의 항목 설정

좌측 탭에 상품 설정 카카오 로그인 동의 항목 탭에서 설정할 수 있습니다. 로그인 이용시 유저로부터 제공받을 항목을 설정하는 단계입니다.

필수로 동의받아야 할 항목과 선택적으로 동의받아야 할 항목을 각각 설정하며, 동의 목적은 아래 예시와 같이 명료하게 적어주시면 됩니다. 선택적 제공을 했을 경우 null 값이 들어올 수 있으므로 별도로 널처리를 할 것도 염두에 두셔야 합니다.

3 로그인 정보 구현

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

STEP 인가 코드 받기

1. GET oauthauthorize 처음 GET 요청을 보낸다. 다음 url에 접속하면 GET 요청이 보내진다. RESTAPIKEY는 요약 정보에서 확인 가능하며 REDIRECTURI는 우리들이 등록한 URI입니다. kauth.kakao.comoauthauthorize?clientidRESTAPIKEYredirecturiREDIRECTURIresponsetypecode

2. 카카오계정 로그인 요청 위 URI에 접속하면 아래처럼 카카오 로그인 화면이 렌더링 될 것입니다.

계정이 존재하면 3. 카카오계정 로그인 자신의 카카오 계정으로 로그인 합니다.

선택 3 AOS iOS 커스팀 스킴

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

자주 묻는 질문