인증 연동

아이디/비밀번호 인증 및 생체로그인, 애플로그인, 구글로그인, 카카오톡 로그인, 네이버 로그인 등 다양한 로그인 방법을 샘플소스와 함께 안내합니다.

인증 및 연동은 모바일 애플리케이션에서 매우 중요한 부분입니다. Flutter 애플리케이션에서 다양한 인증 방법을 통해 로그인하는 방법을 안내합니다. 이메일/비밀번호 인증, Google 로그인, KakaoTalk 로그인, Naver 로그인 및 Apple 로그인에 대해 알아보세요.

이메일/비밀번호 인증

SNS 로그인

Google

pubspec.yaml에 google_sign_in 패키지를 추가하세요.

yamlCopy codedependencies:
  google_sign_in: ^5.7.0

구현 방법

GoogleSignIn 클래스를 사용하여 Google 로그인을 처리하세요. 코드에서 _loginWithGoogle 메서드를 확인하세요.

Future<void> _loginWithGoogle() async {
    try {
      await _googleSignIn.signIn();
      if (await GoogleSignIn().isSignedIn()) {
        UiUxData.navigatorKey!.currentContext
            ?.read<AuthService>()
            .isAuthenticated = true;
        widget.onLoginResult?.call(true);
        print('구글 로그인 성공');
      } else {
        print('구글 로그인 실패');
      }
    } catch (error) {
      print(error);
    }
  }

KakaoTalk

pubspec.yaml에 kakao_flutter_sdk 패키지를 추가하세요.

yamlCopy codedependencies:
  kakao_flutter_sdk: ^0.10.0

구현 방법

kakao_flutter_sdk 패키지의 UserApi 클래스를 사용하여 KakaoTalk 로그인을 처리하세요. 제공된 코드의 _loginWithKakao 메서드를 확인하세요.

Future<void> _loginWithKakao() async {
    if (await isKakaoTalkInstalled()) {
      try {
        await UserApi.instance.loginWithKakaoTalk();
        UiUxData.navigatorKey!.currentContext
            ?.read<AuthService>()
            .isAuthenticated = true;
        widget.onLoginResult?.call(true);
        print('카카오톡으로 로그인 성공');
      } catch (error) {
        print('카카오톡으로 로그인 실패 $error');

        if (error is PlatformException && error.code == 'CANCELED') {
          return;
        }

        try {
          await UserApi.instance.loginWithKakaoAccount();
          UiUxData.navigatorKey!.currentContext
              ?.read<AuthService>()
              .isAuthenticated = true;
          widget.onLoginResult?.call(true);
          print('카카오계정으로 로그인 성공');
        } catch (error) {
          print('카카오계정으로 로그인 실패 $error');
        }
      }
    } else {
      try {
        await UserApi.instance.loginWithKakaoAccount();
        UiUxData.navigatorKey!.currentContext
            ?.read<AuthService>()
            .isAuthenticated = true;
        widget.onLoginResult?.call(true);
        print('카카오계정으로 로그인 성공');
      } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
      }
    }
  }

Naver

pubspec.yaml에 flutter_naver_login 패키지를 추가하세요.

yamlCopy codedependencies:
  flutter_naver_login: ^4.0.0

구현 방법

FlutterNaverLogin 클래스를 사용하여 Naver 로그인을 처리하세요. 코드에서 _loginWithNaver 메서드를 참조하세요.

Future<void> _loginWithNaver() async {
    try {
      await FlutterNaverLogin.logIn();
    } catch (error) {
      print(error);
    }

    NaverAccessToken res = await FlutterNaverLogin.currentAccessToken;

    if (res.accessToken != '') {
      UiUxData.navigatorKey!.currentContext
          ?.read<AuthService>()
          .isAuthenticated = true;
      widget.onLoginResult?.call(true);
      print('네이버 로그인 성공');
    } else if (res.accessToken == '') {
      print('네이버 로그인 실패');
    }
  }

Apple

pubspec.yaml에 sign_in_with_apple 패키지를 추가하세요.

yamlCopy codedependencies:
  sign_in_with_apple: ^3.0.0

구현 방법

SignInWithApple 클래스를 사용하여 Apple 로그인을 처리하세요. 코드에서 _loginWithApple 메서드를 확인하세요.

Future<UserCredential> _loginWithApple() async {
    final rawNonce = generateNonce();
    final nonce = sha256ofString(rawNonce);

    final appleCredential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
      webAuthenticationOptions: WebAuthenticationOptions(
        clientId: 'com.dubhesoft.aliothv2',
        redirectUri: Uri.parse(
            'https://flutter-sign-in-dc1ef.firebaseapp.com/__/auth/handler'),
      ),
      nonce: nonce,
    );

    final oauthCredential = OAuthProvider("apple.com").credential(
      idToken: appleCredential.identityToken,
      rawNonce: rawNonce,
    );

    return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
  }

Flutter 애플리케이션에서 다양한 인증 방법을 통해 로그인하는 방법을 제공합니다. 코드를 특정 사용 사례에 맞게 조정하고 각 라이브러리에서 제공하는 추가 설정 지침을 따라 앱 개발에 활용해보세요.