Web 에서 카카오 로그인 사용시 Redirect URI에서 confirm 버튼과 Back to browser 버튼이 표시되지 않음

Flutter
1

안녕하세요, 앱 ID는 162473 입니다.

카카오 톡이 미 설치 되어있는 기기에서(Iphone13), 카카오 로그인 사용환경시 테스트 케이스였습니다.

아래의 스크린샷 과같이 안내문구만 출력되고, 정상작동시 표시되어야할 확인 버튼(화면중앙)과 사용중인 브라우저로 돌아가기(화면 왼쪽상단) 버튼이 표시되지않는 현상이 발생했습니다.

구현코드상에서 빠진 부분이 있어서 발생한 이슈일까요?
Screen Shot 2023-05-12 at 12.17.20 pm

2

안녕하세요

구현하신 로그인 코드 첨부 부탁드립니다

3

아래와 같이 현재 loginWithScopes를 사용하여 로그인을 처리하고있습니다. 또 다른 테스트 케이스에서 문제가있는지 검증중에 있습니다.

Future<OAuthToken> _loginWithNewScopesWeb(List<String> scopes,
      {String? nonce}) async {
    String codeVerifier = AuthCodeClient.codeVerifier();
    final authCode = await AuthCodeClient.instance.authorizeWithNewScopes(
        scopes: scopes,
        codeVerifier: codeVerifier,
        nonce: nonce,
        webPopupLogin: true);
    final token = await AuthApi.instance
        .issueAccessToken(authCode: authCode, codeVerifier: codeVerifier);
    await TokenManagerProvider.instance.manager.setToken(token);
    return token;
  }

  Future<GenericResponse<kakao.OAuthToken?>> loginWithKakaoScopes(
      {required List<KakaoScopes> scopes}) async {
    kakao.User user = await kakaoUser();
    List<String> validScopes = _verifyScopes(scopes, user);
    try {
      if (kIsWeb) {
        OAuthToken token = await _loginWithNewScopesWeb(validScopes);
        return GenericResponse(token);
      }
      OAuthToken token = await UserApi.instance.loginWithNewScopes(validScopes);
      return GenericResponse(token);
    } catch (err) {
      return GenericResponse(null,
          error: GenericError(title: "Error", message: err.toString()));
    }
  }
4

서버 로그와 작성하신 코드를 보았을 때 플러터 웹으로 개발한 페이지를 모바일 디바이스에서 실행시켰고, 카카오 계정으로 로그인을 시도하고 싶은 상황이라고 이해했습니다.

말씀하신 '화면 중앙 확인 버튼’과 '왼쪽 상단 버튼’은 카카오톡으로 로그인하기 기능을 실행할 때만 보이는 것으로, '화면 중앙 확인 버튼’은 로그인 처리를 위해 카카오톡 앱으로 전환되었을 때 카카오톡 앱 내부에 있는 웹뷰에 띄워진 버튼이고 '왼쪽 상단 버튼’은 iOS에서 앱 동작 중에 다른 앱으로 전환되었을 때 자동으로 생성되는 버튼입니다. 따라서 별도의 앱 전환이 이루어지지 않는 카카오 계정으로 로그인에서는 해당 버튼들이 표시되지 않는 것이 정상입니다.

추가로 정확히 어떤 시나리오로 구현하고 계신건지 잘 모르겠지만 loginWithNewScopes 함수는 로그인이 성공한 후에 사용자에게 추가로 동의를 받아야할 때 사용하는 메소드라서 로그인 처리 자체는 loginWithKakaoTalk() 혹은 loginWithKakaoAccount()로 하는 것이 맞습니다.

이 점 참고하셔서 로그인 로직을 수정하시면 정상적으로 동작할 것 같습니다.

1개의 좋아요