Flutter web에서 kakao Login 연결

문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS) 및 디벨로퍼스 앱ID를 알려주세요.


flutter로 web프로젝트를 만들고있습니다. kakao login을 구현하고 있는데 인가코드 받는 방식이 아닌 토큰을 받는 방식으로 구현했고, 토큰 잘 받아옵니다. 문제는 로컬에선 잘 작동하는데 (카카오 로그인 후 서버에 토큰 보내서 인증하고 response받는 것까지 다됨) 배포하면 작동을 안하네요ㅜ (배포 한 url 추가 했습니다. h1test.dplanit.co.kr)

질문1. 인가코드 받는 방식 말고 토큰 받는 방식을 웹에서 구현하면 안되나요?

질문2. 구현할수있다면 아래 코드 중 어디에 문제가있을까요?ㅜ


코드

class KakaoSignInService {
  Future signIn() async {
    final UserApi api = UserApi.instance;
    if (await isKakaoTalkInstalled()) {
      try {
        api.loginWithKakaoTalk().then((response) {
          return kakaosinginrepo(response.accessToken); // 정상 작동 되는지 확인 필요
          // return api.me();
        });
      } catch (error) {
        print('카카오톡으로 로그인 실패 $error');

        // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
        // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
        if (error is PlatformException && error.code == 'CANCELED') {
          print('error is PlatformException');
          return false;
        }
        // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
        try {
          final response = await UserApi.instance.loginWithKakaoAccount();
          return kakaosinginrepo(response.accessToken);
        } catch (error) {
          print('카카오계정으로 로그인 실패 $error');
          return false;
        }
      }
    } else {
      try {
        final response = await UserApi.instance.loginWithKakaoAccount();
        return kakaosinginrepo(response.accessToken);
      } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
        return false;
      }
    }
  }

  Future<Map<String, dynamic>> kakaosinginrepo(String accessToken) {
    final kakaoLoginRepo = KakaoLoginRepo();
    final response = kakaoLoginRepo.kakaoLoginRepo(accessToken);
    return response;
  }

안녕하세요.

웹의 경우 리디렉션 방식의 기능 사용 부탁드립니다.

Flutter | Kakao Developers Flutter - 카카오톡으로 로그인: 웹

bool talkInstalled = await isKakaoTalkInstalled();

// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (talkInstalled) {
  // 카카오톡으로 로그인
  try {
    await AuthCodeClient.instance.authorizeWithTalk(
      redirectUri: '${REDIRECT_URI}',
    );
  } catch (error) {
    print('Login with Kakao Talk fails $error');
  }
} else {
  // 카카오계정으로 로그인
  try {
    await AuthCodeClient.instance.authorize(
      redirectUri: '${REDIRECT_URI}',
    );
  } catch (error) {
    print('Login with Kakao Account fails. $error');
  }
}