Jutole's programming

[Flutter] Migrate to applying Gradle plugins with the declarative plugins block

주톨 — Fri, 28 Feb 2025 10:12:16 +0900

Flutter 버전 업그레이드 하니 Gradle 관련 수정하라고 나옵니다.
https://flutter.dev/to/flutter-gradle-plugin-apply

Deprecated imperative apply of Flutter's Gradle plugins

How to migrate your Flutter app's Android Gradle build files to the new, declarative format.

docs.flutter.dev

- Migrate

1.

android -> build.gradle 파일에서 AGP버전과 Kotlin버전을 찾아내야 합니다.

AGP버전 : com.android.tools.build:gradle 뒤에 나온 버전

Kotlin버전 : ext.kotlin_version 뒤에 나온 버전

2.

android -> settings.gradle 파일의 기존 내용을 전부 지우고 아래 코드를 복사해서 넣어줍니다.

pluginManagement {
    def flutterSdkPath = {
        def properties = new Properties()
        file("local.properties").withInputStream { properties.load(it) }
        def flutterSdkPath = properties.getProperty("flutter.sdk")
        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
        return flutterSdkPath
    }()

    includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")

    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "{agpVersion}" apply false
    id "org.jetbrains.kotlin.android" version "{kotlinVersion}" apply false
}

include ":app"

그리고 "{agpVersion}"과 "{kotlinVersion}"에 이전에 알아온 버전을 넣어줍니다.

3.

android -> build.gradle 파일에 buildScript내용을 전부 지워줍니다.

4.

android -> app -> build.gradle 파일에 저 부분이 있다면 지워주세요.

5.

android -> app -> build.gradle 파일에 저 부분을 아래와 같이 바꾸어 주시고 해당 코드를 맨 위라인으로 이동시켜 주세요.

gms.google-service와 firebase.crashlytics는 사용하시는 분만 있으실 겁니다. 없는 분들은 나머지 부분만 바꿔주시면 됩니다.

plugins {
    id "com.android.application"
    id "kotlin-android"
    id "dev.flutter.flutter-gradle-plugin"
}

6.

android -> app -> build.gradle 파일에 dependencies에 해당 코드가 있다면 지워줍니다.

7.

5번에서 gms.google-serviced와 firebase.crashlytics를 사용했다면 android -> settings.gradle에 해당 부분을 추가해줍니다.

버전은 본인이 사용하는 버전으로 하시면 됩니다.

[Flutter] List Builder: 효율적으로 사용하는 방법

주톨 — Sat, 22 Feb 2025 00:39:35 +0900

Flutter를 사용하면서 리스트(List Builder)를 많이 활용하고 계시죠? 하지만 여러분은 이 리스트 빌더를 정말 제대로 사용하고 계신가요? 이번 글에서는 Flutter에서 리스트 빌더를 올바르게 사용하는 방법과, 최적화가 부족한 부분은 무엇인지에 대해 알아보겠습니다.

- Why

List Builder를 왜 사용하시나요? 리스트 안에 담긴 아이템들을 쉽게 보여주기 위해서인가요? 코드가 짧아져서 편리하다고 느끼시나요? 이러한 이유들도 있지만, 가장 중요한 점은 성능 향상에 큰 도움이 되기 때문입니다.

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

Flutter 공식문서 ListView Builder에 관한 설명입니다. 해석하면 실제로 표시되는 위젯에 한해서만 빌드가 되기 때문에 많은 양의 리스트를 보여주기에 적합하다고 볼 수 있습니다. 비슷한 것으로 안드로이드에 RecyclerView라는 게 있습니다. 이것을 증명하기 위해 아래 코드를 실행해 보겠습니다.

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) {
          print('빌드: $index');
          return _buildItem();
        },
        itemCount: 30,
      ),
    );
  }

  Widget _buildItem() {
    return Container(
      width: double.infinity,
      height: 150,
      margin: const EdgeInsets.only(bottom: 10),
      color: Colors.deepOrangeAccent,
      alignment: Alignment.center,
      child: const Text('Hello, World!'),
    );
  }
}

--- 결과 ---
flutter: 빌드: 0
flutter: 빌드: 1
flutter: 빌드: 2
flutter: 빌드: 3
flutter: 빌드: 4
flutter: 빌드: 5
flutter: 빌드: 6

itemCount가 30개지만 빌드되는 것은 7번째 아이템까지만 빌드가 되는 것을 확인할 수 있습니다. 드래그를 하면 화면에서 사라진 위젯은 정리가 되고 화면에 나타난 위젯이 다시 그려지면서 Print가 계속 찍히는 것을 보실 수 있으실 겁니다. 그래서 뭐가 문제야?라고 할 수 있습니다. 우리가 UI를 개발할 때 저렇게 리스트만 있는 페이지로 개발을 할까요? 있을 수도 있습니다. 하지만 대부분 그렇지 않죠. 아래에 잘 사용한 예제와 그렇지 못한 예제를 보도록 하겠습니다.

- Good

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text(
              '이것은 Hello, World! 리스트 입니다.',
            ),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  print('빌드: $index');
                  return _buildItem();
                },
                itemCount: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItem() {
    return Container(
      width: double.infinity,
      height: 150,
      margin: const EdgeInsets.only(bottom: 10),
      color: Colors.deepOrangeAccent,
      alignment: Alignment.center,
      child: const Text('Hello, World!'),
    );
  }
}

- Bad

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Text(
                '이것은 Hello, World! 리스트 입니다.',
              ),
              ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  print('빌드: $index');
                  return _buildItem();
                },
                itemCount: 30,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildItem() {
    return Container(
      width: double.infinity,
      height: 150,
      margin: const EdgeInsets.only(bottom: 10),
      color: Colors.deepOrangeAccent,
      alignment: Alignment.center,
      child: const Text('Hello, World!'),
    );
  }
}

Good의 코드는 타이틀이 고정되어 있고 리스트를 보여주는 영역이 Expanded로 감싸져 있어 리스트를 보여줄 영역이 정확히 지정되어 있습니다.

Bad의 코드는 타이틀이 고정되어 있지 않고 스크롤 시 같이 올라가고 그로 인해 리스트를 보여줄 영역을 지정하지 않아서 shrinkWrap 속성을 사용해서 자식 Widget의 크기만큼 알아서 영역을 잡아라! 이렇게 만들어둔 코드입니다.

뭐가 문제야? Bad의 코드를 실행하면 아래와 같은 결과가 실행하자마자 나타납니다.

--- 결과 ---
flutter: 빌드: 0
flutter: 빌드: 1
flutter: 빌드: 2
 ...
flutter: 빌드: 27
flutter: 빌드: 28
flutter: 빌드: 29

결과로 보면 실행하자마자 모든 위젯을 빌드시키는 것을 확인할 수 있습니다. 이것은 ListView Builder의 실제로 표시되는 위젯에 한해서만 빌드가 된다 라는 장점을 잃어버린 코드라고 볼 수 있습니다.

물론 위의 코드처럼 Container에 Text 정도만 보여주는 경우라면 크리티컬 한 문제가 아닐 수 있습니다. 하지만 만약 이미지를 표시해야 한다면, 모바일 기기가 이미지를 그리는 데 필요한 CPU 자원을 감당하지 못해 튕겨버리는 경우가 발생할 수 있습니다.

- Why?

그렇다면 왜 Bad의 코드는 저런 현상이 나타나는 것 일 까요? Good의 코드와 같이 리스트를 그리는 영역이 고정적일 경우 ListView.builder는 정상적으로 동작합니다. 반면, Bad의 코드와 같이 shrinkWrap 속성을 사용하면 리스트의 크기가 동적으로 조정됩니다. 이 경우, 리스트의 전체 높이를 계산하기 위해 모든 아이템을 한 번에 빌드합니다.

성능을 신경 쓴다면 shrinkWrap의 사용은 자제하는 것이 좋습니다.

- Solution

그렇다면 Bad코드와 같이 리스트 영역 위에 따로 보여줄 영역이 있어야 하고, 스크롤 시에 같이 위로 올라가야 하는 상황에서는 어떻게 해야 하는지 많은 방법 중에 제일 간단한 방법을 설명하겠습니다.

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            print('빌드: $index');

            if (index == 0) {
              return Column(
                children: [
                  Text(
                    '이것은 Hello, World! 리스트 입니다.',
                  ),
                  _buildItem()
                ],
              );
            }

            return _buildItem();
          },
          itemCount: 30,
        ),
      ),
    );
  }

  Widget _buildItem() {
    return Container(
      width: double.infinity,
      height: 150,
      margin: const EdgeInsets.only(bottom: 10),
      color: Colors.deepOrangeAccent,
      alignment: Alignment.center,
      child: const Text('Hello, World!'),
    );
  }
}

위의 코드처럼 0번째 인덱스에서 타이틀을 함께 반환하는 방식으로 사용하면 ListView.builder는 정상적으로 동작합니다. 하지만 이러한 방법은 시각적으로 매력적이지 않으며, 만약 위에 보여줄 위젯들이 많아진다면 더욱 어색해질 수 있습니다. 이러한 문제를 해결하기 위해, 다음 포스트에서는 CustomScrollView를 사용해 해당 문제를 해결해 보겠습니다.

그리고 추가적으로 본인 프로젝트에서 ListView Builder는 제 역할을 하는지 한번 점검해 보시고 효율적으로 사용하시길 바라겠습니다.

[Flutter] Cursor로 간단하게 개발하기

주톨 — Thu, 30 Jan 2025 09:54:15 +0900

https://jutole.tistory.com/162

[Flutter] Cursor로 프로젝트 세팅하기

안녕하세요. 이번에는 현재 매우 각광받고 있는 Cursor를 사용해서 Flutter 프로젝트를 세팅 해보도록 하겠습니다. Cursor?Cursor는 AI와 협업을 중심으로 설계된 통합 개발 환경(IDE)으로,

jutole.tistory.com

지난 글에서 Cursor Ide로 프로젝트 세팅을 끝냈습니다. 이번에는 Cursor의 기능을 이용해서 직접 개발을 해보겠습니다.

Accept a tab

main.dart의 모든 코드를 지우고 시작해 보겠습니다.

해당 파일에 Flutter 프로젝트의 시작 코드인 void main()을 작성하면, 옅은 회색으로 미리 완성된 코드가 보입니다. 이는 AI가 이전에 작성된 코드를 기반으로, 다음에 작성할 코드를 예측하여 보여주는 기능입니다. 만약 예측된 코드가 실제로 작성하려는 코드와 일치하면, 키보드에서 Tab 키를 눌러 자동완성을 할 수 있습니다.

자동완성을 한 다음 엔터를 눌러보세요. 또 다음 자동완성을 제공해 줍니다.

엔터와 탭만 눌렀더니 5초 만에 flutter 기본 실행코드가 완성됐습니다.

Symbol

아직 위의 코드는 실행이 되지는 않는 상태입니다. Flutter에서 Material 디자인 위젯을 사용하려면 기본적으로 material.dart를 임포트해야 하는데 아직 Cursor에 Flutter플러그인이 설치되어 있지 않은 것 같습니다.

자 막혔어요. 이제 어떡할까요? 저번 글에서 사용했던 채팅을 열어서 해결해 봅시다. "Command + l"을 눌러서 채팅창을 열어보겠습니다.

채팅창에 @(symbol)을 입력하면 여러 옵션들이 뜹니다. 저는 Files를 눌러서 main.dart를 지정해 보겠습니다.

그럼 이렇게 main.dart 파일이 지정됩니다. 이렇게 되면 ai에게 질문할 때 해당 파일의 코드를 기반으로 질문하기 때문에 더 확실한 정보를 얻을 수 있습니다.

또 하라는 대로 했더니 드디어 Flutter가 인식된 거 같아요. import 해주고 실행해 보겠습니다.

자 이렇게 Cursor가 제공한 코드들로 실행된 화면입니다.

Composer

이제 Composer라는 기능을 사용해 보겠습니다. 이전 글에서 잠깐 설명드렸지만 Composer는 코드에 바로 적용시켜 줍니다. "Command + i"를 누르면 Composer를 열 수 있습니다. 여기서도 똑같이 위에 사용한 @(symbol) 기능을 이용해서 main.dart파일의 "Hello, World!" 텍스트의 색상을 빨간색으로 변경해 달라고 해보겠습니다.

Composer는 바로 코드에 적용시켜 주기 때문에 코드 부분이 바로 변경되는 모습을 볼 수 있습니다. Git등에서 볼 수 있는 변경점 같이 빨간색으로 이전코드와 초록색으로 변경된 코드를 보여줍니다. 어떤 부분이 바뀌었는지 한눈에 볼 수 있습니다. 변경된 코드를 적용하려면 "Command + y" 적용하지 않으려면 "Command + n"를 누르면 됩니다.

변경된 코드를 적용하고 확인해 보면 텍스트 색상이 빨간색으로 변경된 것을 확인할 수 있습니다. 이로써 우리는 Flutter를 하나도 모르는 상태였어도 화면에 텍스트를 뿌리고 색상을 변경하는 등 간단한 코드를 작성할 수 있게 되었습니다.

Prompt an edit

코드를 이렇게 드래그해 보세요. 2가지 옵션이 뜹니다.

Chat : 드래그한 코드를 챗에 붙여 넣고 사용합니다.

Edit : 드래그한 코드에 바로 수정사항을 말하면 고쳐줍니다.

"Command + K"를 눌러서 바로 Edit을 사용해 보겠습니다.

이렇게 지정한 영역 위에 창이 뜨고 해당창에 원하는 동작을 입력하면 Composer처럼 동작합니다.

바로 코드를 수정해 주고 이전코드와 변경된 코드를 한눈에 보여줍니다. 적용하려면 "Command + enter" 취소하려면 "Command + Backspace"를 누르라고 뜨네요.

이 외에도 글로 작성할 수 없을 만큼 많은 기능을 제공하고 있습니다. 저의 글로 Cursor에 흥미가 생기셨다면 다른 많은 기능도 찾아보시는 게 어떠신가요?

[Flutter] Cursor로 프로젝트 세팅하기

주톨 — Thu, 30 Jan 2025 08:25:17 +0900

안녕하세요. 이번에는 현재 매우 각광받고 있는 Cursor를 사용해서 Flutter 프로젝트를 세팅 해보도록 하겠습니다.

이 커서 아닙니다..

Cursor?

Cursor는 AI와 협업을 중심으로 설계된 통합 개발 환경(IDE)으로, 코드 작성, 디버깅, 수정 등 다양한 개발 작업을 AI의 도움으로 효율화할 수 있는 툴이다. 다양한 AI 모델을 지원하여 개발자들에게 혁신적인 개발 경험을 제공한다.

설치

https://www.cursor.com/

Cursor - The AI Code Editor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

www.cursor.com

해당 사이트 접속 후 설치하시면 됩니다. 별다른 어려운 과정이 없습니다.

Cursor 간단 사용

설치 후 Cursor를 실행하면 해당 화면처럼 뜹니다. 본인이 원하는 위치에 폴더하나를 만들고 해당 폴더를 열어주세요

그러면 저처럼 이렇게 빈 화면이 뜨게 됩니다. 여기서 단축키 "command + l" 단축키를 눌러서 채팅창을 열어주세요.

채팅창을 열고 flutter 프로젝트를 생성하고 싶다고 채팅을 쳤더니 flutter 프로젝트를 생성하는 방법을 알려줍니다. 여기까지는 가장 유명한 Chatgpt도 가능한 부분입니다. 이제 Cursor가 빛을 발휘하는 개발자와 협업하는 기능 중 하나를 사용해 보겠습니다.

채팅창에 있는 명령어에 마우스를 올려보면 "Ask", "Copy", "Run"라는 기능이 보입니다. 이 것 말고도 더 많지만 해당 코드에서는 저 3가지가 뜨네요.

Ask : 해당 답변에 대해서 추가 질문을 할 수 있습니다.

Copy : 해당 코드를 복사합니다.

Run : 터미널에 해당코드를 실행시킵니다.

Run을 눌러서 프로젝트를 생성해 보세요. 그리고 추가로 2번과, 3번, 4번을 동일하게 Run을 눌러서 실행해 보세요.

저는 4번 과정 Ios시뮬레이터로 실행하는 와중에 에러가 발생했습니다. 자 이렇게 터미널에서 에러가 발생할 경우 Cursor는 어떻게 우리와 협업을 할까요?

에러가 발생한 문구를 클릭하면 오른쪽에 "Add to Composer", "Add to Chat"이라는 버튼들이 뜨게 됩니다.

Add to Composer : 발생한 오류의 해결 방법을 찾아 바로 적용한다.

Add to Chat : 발생한 오류의 해결 방법을 찾는다.

저는 Add to Chat을 눌러서 해결 방법을 찾아보겠습니다. 해당 버튼을 누르면 "Command + l" 단축키로 열었던 채팅창에 해당 에러가 자동으로 붙여 넣기가 됩니다. 이제 추가적인 요구사항과 함께 찾아보도록 합시다.

제시해 준 방법대로 진행합니다. 저는 시뮬레이터를 실행한 다음 Flutter 앱을 실행했지만 계속 에러가 발생했습니다. 그래서 추가로 확인할 사항들에 있는 flutter doctor 명령어를 실행했습니다.

Xcode 몇몇 설정이 안 되어있어 문제 되는 거 같습니다. 해당 설정도 "Add to Chat"으로 물어보고 해결해 보겠습니다.

계속 제시해 주는 방법으로 진행하고 에러 뜨면 물어보고 해결하고 반복하였습니다.

결국 Ios 시뮬레이터로 flutter 실행을 성공적으로 마무리했습니다!! 개인마다 뜨는 오류는 다양각색이지만 계속 물어보면서 제시하는 방법대로 하다 보면 실행될 것입니다. 다음 글에서는 Cursor를 사용해서 직접 개발해 보겠습니다.

https://jutole.tistory.com/163

[Flutter] Cursor로 간단하게 개발하기

https://jutole.tistory.com/162 [Flutter] Cursor로 프로젝트 세팅하기안녕하세요. 이번에는 현재 매우 각광받고 있는 Cursor를 사용해서 Flutter 프로젝트를 세팅 해보도록 하겠습니다. Cursor?Cursor는 AI

jutole.tistory.com

[Flutter] Web Image Cors 문제

주톨 — Wed, 8 Jan 2025 17:36:48 +0900

이런 식으로 web으로 빌드해서 실행해 보면 네트워크 이미지가 안 보이는 문제가 발생하는 경우가 있습니다. 이는 Cors문제로 브라우저에서 그리지 않는 문제입니다. 이를 강제로 해결하기 위한 방법으론 Flutter Web은 기본적으로 두 가지 렌더링 엔진을 사용합니다: CanvasKit과 HTML 렌더러입니다. Flutter Web의 기본 렌더러는 CanvasKit입니다. CanvasKit은 WebAssembly 기반의 렌더러로, 더 나은 성능과 그래픽 효과를 제공하지만, 일부 경우 네트워크 리소스를 제대로 처리하지 못해 위와 같은 문제가 발생합니다.

기본 렌더러 설정을 HTML로

<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>

해당 코드는 Flutter Web에서 사용하는 렌더러를 CanvasKit에서 HTML로 강제로 변경하는 역할을 합니다.

index.html 파일 body태그 안에 붙여 넣고 확인해 보시면 이미지가 잘 나오는 것을 확인할 수 있습니다.

3.27이상 버전에서는 안됩니다.

Flutter 3.27 이상 버전에서부터는 html 랜더링 방식이 deprecate가 되어서 더 이상 지원하지 않는 방법입니다. 해당 코드는 동작하지 않으니 지우셔도 됩니다.

[Flutter] Google Login 구현

주톨 — Thu, 10 Oct 2024 04:24:10 +0900

https://jutole.tistory.com/159

[Flutter] Google Login 설정 - feat.Firebase

시작에 앞서 Firebase 기본 설정은 맞추셔야 합니다. 1. Firebase 로그인 제공업체 추가 Authentication -> 로그인 방법 -> 새 제공업체 추가 -> Google 선택 중요 메시지를 확인하고 사용 설정을 선택

jutole.tistory.com

설정이 안 되어 계신다면 설정먼저 하고 와주세요.

1. google_sign_in 패키지 설치

https://pub.dev/packages/google_sign_in

google_sign_in | Flutter package

Flutter plugin for Google Sign-In, a secure authentication system for signing in with a Google account.

pub.dev

2. firebase_auth 패키지 설치

https://pub.dev/packages/firebase_auth

firebase_auth | Flutter package

Flutter plugin for Firebase Auth, enabling authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitter.

pub.dev

3. 구현

Google Login을 하기 위한 준비가 끝났습니다.

(구현 예시 코드입니다.)

import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

GoogleSignIn().signIn()

구글 로그인 화면을 열고 로그인을 진행합니다. 사용자가 로그인을 진행하지 않고 복귀 시에는 null을 반환합니다. 사용자가 로그인을 진행하였으면 아래와 같은 정보들을 가지고 옵니다.

googleUser.authentication

로그인으로 얻은 정보를 가지고 *idToken과 accessToken*을 받아오기 위한 작업입니다. 해당 토큰으로 Google 서비스와 상호작용할 수 있도록 하는 중요한 단계입니다.

GoogleAuthProvider.credential

Google에서 받은 토큰을 가지고 Firebase에서 사용할 수 있도록 변환하는 과정입니다.

FirebaseAuth.instance.signInWithCredential

최종적으로 Firebase에서 사용자를 로그인 처리하고, 성공 시 해당 사용자의 정보를 가져옵니다.

4. 확인

로그인을 성공하고 나면 Firebase에서 위에 사진처럼 SocialLogin 한 유저를 확인할 수 있습니다.

[Flutter] Google Login 설정 - feat.Firebase

주톨 — Thu, 10 Oct 2024 02:07:17 +0900

시작에 앞서 Firebase 기본 설정은 맞추셔야 합니다.

1. Firebase 로그인 제공업체 추가

Authentication -> 로그인 방법 -> 새 제공업체 추가 -> Google 선택

중요 메시지를 확인하고 사용 설정을 선택하시고 저장을 눌러주세요.

2. SHA 인증서 지문 추가

1번 과정에서 *중요* 작업을 해야 합니다.

Firebase -> 프로젝트 설정 -> 내 앱 -> Android -> 디지털 지문 추가

https://developers.google.com/android/guides/client-auth

클라이언트 인증 | Google Play services | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 클라이언트 인증 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 특정 Google Play 서비스 (예: Google 로그

developers.google.com

디지털 지문을 찾는 방법은 위 사이트에 설명되어 있습니다.

SHA-1, SHA-256 둘 다 추가해 주시면 됩니다.

3. IOS Client Id 추가

Firebase -> 프로젝트 설정 -> 내 앱 -> iOS -> GoogleService-Info.plist 파일을 다운로드하여 줍니다.

해당 파일을 열어서 CLIENT_ID를 복사하고 프로젝트 root폴더 -> ios -> Runner -> Info.plist에 아래처럼 추가해 줍니다.

<key>GIDClientID</key>
<string>2602rla9aje8.apps.googleusercontent.com</string>

4. IOS URL Schemes 추가

이번에는 GoogleService-Info.plist 해당 파일에서 REVERSED_CLIENT_ID를 복사하고 3번과 똑같이 Info.plist에 추가해 줍니다.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>[Your REVERSED_CLIENT_ID]</string>
        </array>
    </dict>
</array>

전부 복사해서 REVERSED_CLIENT_ID만 붙여 넣어주세요.

5. 구현

https://jutole.tistory.com/160

[Flutter] Google Login 구현

https://jutole.tistory.com/159 로그인 방법 -> 새 제공업체 추가 -> Google 선택 중요 메시지를 확인하고 사용 설정을 선택" data-og-host="jutole.tistory.com" data-og-source-url="https://jutole.tistory.com/159" data-og-url="

jutole.tistory.com

[Apple Login] 비공개 이메일로 메일 발송 안될 때

주톨 — Mon, 30 Sep 2024 03:42:42 +0900

Email Source 추가

일반적으로 사용자의 이메일로 메일을 보내거나 하는 이벤트는 정상적으로 이루어집니다. 하지만 AppleLogin에서 사용자가 *이메일 가리기* 기능을 선택해 비공개 이메일로 설정되어 비공개 이메일로 메일을 보내면 정상적으로 메일이 가지 않습니다.

일반 이메일 : jutoleofficial@gmail.com

비공개 이메일 : ABCDEFG@privaterelay.appleid.com

https://developer.apple.com/account/resources/services/list

로그인 - Apple

idmsa.apple.com

이런 상황에서 해결 방법은 위에 사이트를 들어가서 *Sign in With Apple for Email Communication* -> *Configure* -> *Email Sources* 추가 버튼을 눌러줍니다.

그러면 위와 같은 창이 뜨는데 *Domains and Subdomains*에 메일을 보낼 domain을 입력하고 저장하면 됩니다.

* gmail.com 같은 도메인은 추가도 안되고 발송도 안 되는 것 같습니다.

* 되시는 분 있으면 알려주세요.

* 회사 도메인 추가하면 회사 도메인으로 메일 발송시 정상적으로 발송됩니다.

[Flutter] Apple Login 심화 구현 - Ios App

주톨 — Mon, 30 Sep 2024 03:39:12 +0900

https://jutole.tistory.com/156

[Flutter] Apple Login 구현 - Ios App

설정이 안 된 분은 아래글을 통해 설정을 하고 와주세요. https://jutole.tistory.com/154 [Flutter] Apple Login 설정 - Ios AppIos App 환경에서 apple 로그인을 하기 위한 설정 입니다. 1. App IDs 등록 이러

jutole.tistory.com

이전에 Apple Login 간단하게 구현해 보았습니다. 이번 글에서는 조금 더 심화 구현을 해보겠습니다.

1. Nonce

Nonce는 Apple 로그인 (Sign in with Apple) 과정에서 사용하는 중요한 보안 요소입니다. Apple 로그인의 Nonce는 암호화된 임의 문자열로, 요청을 보낼 때 이를 사용하여 인증 과정의 보안을 강화합니다. 주로 *replay attack(재전송 공격)*을 방지하는 용도로 사용됩니다.

return SignInWithAppleButton(
  onPressed: () async {
    final result = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
      nonce: _getNonce(),
    );
  },
);

String _getNonce() {
  const charset =
      '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';

  final random = List<int>.generate(
    32,
    (_) => charset.codeUnitAt(
      (Random().nextDouble() * charset.length).floor(),
    ),
  );

  final bytes = utf8.encode(
    String.fromCharCodes(random),
  );

  /// import 'package:crypto/crypto.dart'; 패키지 추가 사용
  final sha256Nonce = sha256.convert(bytes).toString();

  return sha256Nonce;
}

이전 구현에서 했던 기본적인 AppleLogin 방법에서 nonce를 추가할 수 있습니다. 클라이언트가 임의로 생성한 무작위 값을 Apple로그인과 함께 보내고 Apple에서는 해당 값을 identityToken에 같이 실어서 보내줍니다.

2. IdentityToken

Apple에서 발급하는 JWT 형식의 신원 확인 토큰.

result.identityToken

AppleLogin을 하고 받은 응답값에는 identityToken이 있습니다. 해당 토큰은 Apple에서 발급한 JWT 형식의 토큰이기 때문에 디코딩을 하면 해당 유저의 신원을 확인할 수 있습니다.

https://jwt.io/

JWT.IO

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

jwt.io

(디코딩 사이트)

{
  /// 토큰 발급한 주체
  "iss": "https://appleid.apple.com",
  
  /// 토큰의 수신자
  "aud": "jutole.app.customer",
  
  /// 토큰 만료 시간
  "exp": 1727718782,
  
  /// 토큰 발급 시간
  "iat": 1727632382,
  
  /// userIdentifier 유저 고유 식별자
  "sub": "001381.71cebe533162466fd6229190b49d4329.0111",
  
  /// 보안 용도로 사용되는 고유한 문자열
  "nonce": "d6ead4b4e3cb70c1deeec1d2429a4ac5a0b4b819dab04b45f0cf5d403e52525a",
  
  /// 인증 코드가 안전하게 전송되었음을 검증하는 데 사용
  "c_hash": "PQiQDbxZCaTz1kuiHkjG5B",
  
  /// 사용자의 이메일 주소
  /// 용자의 실제 이메일을 보호하기 위해 Apple이 제공하는 사설 이메일 주소
  "email": "ABCDEFG@privaterelay.appleid.com",
  
  /// 사용자의 이메일 주소가 검증되었는지를 나타내는 불리언 값
  "email_verified": true,
  
  /// 사용자가 개인 이메일 보호 기능을 사용하고 있는지 여부
  "is_private_email": true,
  
  /// 사용자가 마지막으로 인증된 시간
  "auth_time": 1727632382,
  
  /// Nonce 지원 여부
  "nonce_supported": true,
  
  /// 사용자가 실제 사용자임을 나타내는 상태 코드
  /// 0 : 사용자에 대한 정보가 불확실하거나 제공되지 않음.
  /// 1 : 실제 사용자가 아니거나 테스트 계정
  /// 2 : 실제 사용자
  "real_user_status": 2
}

identityToken을 디코딩하면 위와 같은 데이터를 알 수 있습니다. 1번에서 보낸 nonce가 응답값으로 오는 게 확인이 됩니다. 이것으로 클라이언트에서 보낼 때의 nonce와 응답으로 온 nonce값을 비교해서 중간에 위변조가 되었는지 여부를 알 수 있습니다.

identityToken에 userIdentifier도 포함하고 있어 해당 토큰만 서버에 전달하면 서버에서 해당 토큰을 디코딩해서 처리할 수 있습니다.

(identityToken에 사용자 이름은 포함되어 있지 않기 때문에 따로 보내야 합니다.)

3. Email Source 추가

일반 이메일 : jutoleofficial@gmail.com

비공개 이메일 : ABCDEFG@privaterelay.appleid.com

https://developer.apple.com/account/resources/services/list

로그인 - Apple

idmsa.apple.com

이런 상황에서 해결 방법은 위에 사이트를 들어가서 *Sign in With Apple for Email Communication* -> *Configure* -> *Email Sources* 추가 버튼을 눌러줍니다.

그러면 위와 같은 창이 뜨는데 *Domains and Subdomains*에 메일을 보낼 domain을 입력하고 저장하면 됩니다.

* gmail.com 같은 도메인은 추가도 안되고 발송도 안 되는 것 같습니다.

* 되시는 분 있으면 알려주세요.

* 회사 도메인 추가하면 회사 도메인으로 메일 발송시 정상적으로 발송됩니다.

[Flutter] Apple Login 구현 - Ios App

주톨 — Mon, 30 Sep 2024 02:14:59 +0900

설정이 안 된 분은 아래글을 통해 설정을 하고 와주세요.

https://jutole.tistory.com/154

[Flutter] Apple Login 설정 - Ios App

Ios App 환경에서 apple 로그인을 하기 위한 설정 입니다. 1. App IDs 등록 이러한 페이지로 오게 됩니다. 여기서 2개의 Identifier를 등록해주어야 합니다.추가버튼을 누르면 여러 항목들이 쭉

jutole.tistory.com

1. sign_in_with_apple 패키지 설치

https://pub.dev/packages/sign_in_with_apple

sign_in_with_apple | Flutter package

Flutter bridge to initiate Sign in with Apple (on iOS, macOS, and Android). Includes support for keychain entries as well as signing in with an Apple ID.

pub.dev

2. Apple Login Button 생성

class _AppleLoginButton extends StatelessWidget {
  const _AppleLoginButton();

  @override
  Widget build(BuildContext context) {
    return SignInWithAppleButton(
      onPressed: () {},
      style: SignInWithAppleButtonStyle.black, /// 색상 지정 가능
      height: 44, /// 버튼 높이 지정 가능
      borderRadius: BorderRadius.circular(8), /// 모서리 지정 가능
      iconAlignment: IconAlignment.center, /// 아이콘 위치 지정 가능
      text: 'Sign in with Apple', /// 텍스트 지정 가능
    );
  }
}

위 코드와 같이 sign_in_with_apple패키지에서 제공하는 SignInWithAppleButton을 사용하면 AppleLoginButton 디자인을 자동으로 생성해 줍니다. 버튼 디자인이 애플이 규정하는 디자인에 맞지 않으면 앱 심사에서 거절당하니 해당 기능으로 버튼을 만들어주는 게 좋습니다.

3. Login Event

return SignInWithAppleButton(
  onPressed: () async {
    final result = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    /// 사용자 이메일
    /// 사용자 설정에 따라서 비공개 이메일이 올 수 있음.
    /// 첫 로그인시에만 오고 그 후로는 null 반환.
    print(result.email ?? '');

    /// 사용자 이름 (성)
    /// 첫 로그인시에만 오고 그 후로는 null 반환.
    print(result.familyName ?? '');

    /// 사용자 이름 (이름)
    /// 첫 로그인시에만 오고 그 후로는 null 반환.
    print(result.givenName ?? '');

    /// Apple에서 발급하는 해당앱의 유저 고유 식별자.
    print(result.userIdentifier ?? '');

    /// Apple에서 발급하는 JWT 형식의 신원 확인 토큰.
    print(result.identityToken);

    /// 짧은 기간 유효한 인증 코드로, 서버에서 Apple과 통신해 사용자 인증을 확인할 때 사용됩니다. 
    print(result.authorizationCode);
  },
);

기본적으로 Apple Login 방법은 SignInWithApple.getAppleIDCredential()를 사용해 할 수 있습니다.

해당 방법으로 로그인을 하면 이러한 화면이 뜨면서 로그인이 가능합니다.

- (아이폰에서만 됩니다. 웹이나, 안드로이드에서는 다르게 구현해야 합니다.)

심화 구현

받아온 정보들로 회원가입 또는 로그인 처리를 하시면 됩니다. 조금 더 심화 구현을 보고 싶다면 다음 글로 와주세요.

https://jutole.tistory.com/157

[Flutter] Apple Login 심화 구현 - Ios App

https://jutole.tistory.com/156 [Flutter] Apple Login 구현 - Ios App설정이 안 된 분은 아래글을 통해 설정을 하고 와주세요. https://jutole.tistory.com/154 [Flutter] Apple Login 설정 - Ios AppIos App 환경에서 apple 로그인을

jutole.tistory.com