[Flutter] Kakao 소셜로그인 구현

우선! kakao developers에 애플리케이션 생성 및 flutter 프로젝트에 api 설정하는 과정들은 아래 포스팅에서 보고 따라하면 된다. ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

https://cording-cossk3.tistory.com/209

[Flutter] 카카오내비 앱 연동하기 (1) - Android

 

---

 

아래 사이트에 접속 후 로그인하면, 내가 만든 애플리케이션 목록이 뜰 것이다.

https://developers.kakao.com/console/app

카카오계정 로그인

 

 

 

내가 사용할 프로젝트에 들어가면 아래와 같이 화면이 뜬다.

여기서 좌측 상단에 메뉴 아이콘을 클릭하자.

 

 

 

그럼 네비게이션 메뉴가 뜰텐데, 여기서 중간 쯤에 [카카오 로그인] 메뉴가 보일 것이다. 클릭하자

 

 

 

중간 쯤 [활성화 설정] 상태를 보면 OFF로 되어 있을 것이다.

클릭해서 ON으로 해주면 된다.

 

 

 

---

이제 flutter project에서의 설정이다

 

 

 

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
  # kakao api
  kakao_flutter_sdk: ^1.0.0 # 전체 추가

 

 

 

dart 파일

CupertinoButton(
    onPressed: () {_getKakaoLogin();},
    color: Colors.yellow,
    child: Text('카카오 로그인'),
)

Future<void> _getKakaoLogin() async {
    String authCode = await AuthCodeClient.instance.request();
    print(authCode);
}

 

 

 

---

추가로, 카카오톡 앱 설치 여부와 그에 따른 처리 로직을 공유한다.

Future<void> _getKakaoLogin() async {
    bool result = await isKakaoTalkInstalled();
    if (result) {
        //카카오 앱을 통한 로그인
        String authCode = await AuthCodeClient.instance.requestWithTalk();
        var token = await AuthApi.instance.issueAccessToken(authCode: authCode);
        print(token.accessToken);
    } else {
        //카카오 퉵을 통한 로그인
        String authCode = await AuthCodeClient.instance.request();
        print(authCode);
    }
}