Logto 를 사용하는 플러터플로우 커스텀 인증

소개#

FlutterFlow 는 Flutter 애플리케이션을 시각적으로 구축할 수 있는 로우 코드 플랫폼입니다. 이 플랫폼은 드래그 앤 드롭 인터페이스를 제공하여 앱의 UI 를 디자인하고 해당 Flutter 코드를 생성합니다. 공식 문서 에 따르면 세 가지 다른 인증 통합 옵션을 제공합니다:

1. 내장된 Firebase 인증을 통한 인증
2. 내장된 Supabase 인증을 통한 인증
3. 커스텀 인증

첫 번째와 두 번째 방법은 FlutterFlow 와 Firebase 또는 Supabase 의 무결한 통합을 제공합니다. 프로젝트를 Firebase 또는 Supabase 로 설정하고 FlutterFlow 에서 인증 설정을 구성해야 합니다. 그러나 다른 인증 제공자를 사용하려면 직접 인증 로직을 구현해야 합니다.

커스텀 인증 의 경우, FlutterFlow 은 단일 커스텀 인증 API 에 의존하여 모든 인증 제공자와 통합할 수 있는 방법을 제공합니다.

그러나 클라이언트와 인증 서버 간의 직접적인 사용자 자격 증명 교환은 최신 보안 표준에 따라 권장되지 않습니다. 대신에, OAuth 2.0 또는 OpenID Connect (OIDC) 와 같은 안전한 인증 흐름을 사용하여 사용자를 인증해야 합니다. Auth0, Okta, Logto 와 같은 최신 OAuth 2.0 또는 OIDC 기반의 IdP 를 사용하는 경우 리소스 소유자 비밀번호 자격 증명 (ROPC) 부여 유형은 보안상의 이유로 권장되지 않거나 금지됩니다. 자세한 내용은 Deprecated ropc grant type 를 참조하세요.

표준 OAuth 2.0 또는 OIDC 인증 흐름은 클라이언트 애플리케이션, 권한 서버, 사용자의 브라우저 간의 여러 단계와 리디렉션을 포함합니다. 이 게시물에서는 Logto Flutter SDK 를 사용하여 FlutterFlow 애플리케이션에 안전한 인증 흐름을 구현하기 위해 CustomAuthManager 클래스를 맞춤화하는 방법을 배워보겠습니다.

사전 준비 사항#

• Logto Cloud 계정 또는 자체 호스팅 Logto 인스턴스 (Logto 인스턴스를 생성하는 방법은 ⚡ 시작하기 가이드를 참조하세요)
• FlutterFlow 를 사용하여 생성된 Flutter 애플리케이션
• Logto 콘솔에 Flutter 애플리케이션 등록
• FlutterFlow 에서 커스텀 코드를 관리하기 위한 GitHub 저장소
• Flutter SDK 통합 가이드 확인

Step 1: FlutterFlow 에서 커스텀 코드 관리 기능 활성화#

CustomAuthManager 클래스를 맞춤화하려면 FlutterFlow 에서 커스텀 코드 기능을 활성화해야 합니다. Manage Custom Code In GitHub 가이드를 따라 FlutterFlow 프로젝트와 GitHub 을 연결하고 동기화하세요.

작업이 완료되면 GitHub FlutterFlow 저장소에서 세 가지 다른 브랜치를 얻게 됩니다:

1. main: Flutter 프로젝트의 메인 브랜치입니다. 이 브랜치는 프로젝트를 배포하는 데 필요합니다.
2. flutterflow: FlutterFlow 가 UI 편집기에서 코드베이스로 변경 사항을 동기화하는 브랜치입니다.
3. develop: 사용자 정의 코드를 수정할 수 있는 브랜치입니다.

Step 2: FlutterFlow 에서 커스텀 UI 흐름 디자인 및 생성#

페이지 빌드하기#

FlutterFlow 에서 UI 를 생성하세요. 요구 사항에 따라 UI 를 생성하기 위해 FlutterFlow 문서 를 참조할 수 있습니다. 이 튜토리얼에서는 최소 요구 사항으로 두 개의 페이지가 있다고 가정합니다:

1. 로그인 버튼이 있는 간단한 HomePage 입니다. (로그인 양식은 필요하지 않습니다. 사용자 인증 흐름은 Logto 쪽에서 처리됩니다. 자세한 내용은 customize sie 가이드를 참조하세요.)

2. 사용자 정보를 표시하고 로그아웃 버튼이 있는 user 프로필 페이지입니다.

FlutterFlow 에서 커스텀 인증 활성화#

App Settings - Authentication 페이지로 이동하여 커스텀 인증을 활성화합니다. 이렇게 하면 FlutterFlow 프로젝트에 CustomAuthManager 클래스와 관련 파일이 생성됩니다.

Step 3: FlutterFlow 프로젝트를 GitHub 과 동기화하기#

커스텀 UI 를 생성하고 FlutterFlow 에서 커스텀 인증을 활성화한 후에 프로젝트를 GitHub 과 동기화해야 합니다. integrations - GitHub 페이지로 이동하여 Push to Repository 버튼을 클릭합니다.

Step 4: CustomAuthManager 코드 맞춤화#

GitHub 저장소에서 develop 브랜치로 전환하고 flutterflow 브랜치의 최신 변경 사항을 머지합니다. 이렇게 하면 페이지 위젯과 미리 빌드된 CustomAuthManager 클래스 등을 포함한 모든 UI 변경 사항이 develop 브랜치로 동기화됩니다.

Logto SDK 종속성 설치#

프로젝트에 Logto SDK 종속성을 추가합니다.

UserProvider 클래스 업데이트#

UserProvider 클래스는 사용자 인증 상태를 관리하는 역할을 합니다. Logto SDK 에서 제공하는 사용자 인증 정보를 저장하기 위해 속성을 맞춤화해야 합니다.

id_token 클레임을 인증된 사용자의 idToken 속성에 저장하는 OpenIdClaims 타입의 속성을 추가합니다.

OpenIdClaims 클래스는 Logto SDK 에서 정의된 클래스로, 인증된 사용자의 OIDC 표준 id_token 클레임을 제공합니다.

CustomAuthManager 클래스 맞춤화 및 Logto 클라이언트 초기화#

initialize 메서드는 Logto 클라이언트 인스턴스를 초기화하고, 로컬 저장소에 저장된 사용자 인증 상태로 현재 사용자 스트림을 업데이트합니다.

Logto SDK 는 사용자 인증 데이터를 안전하게 저장하기 위해 flutter_secure_storage 패키지를 사용합니다. 사용자가 인증되면 id_token 클레임이 로컬 저장소에 저장됩니다.

Logto 클라이언트를 사용하여 로그인 메서드 구현#

LogtoClient.signIn 메서드를 호출하면 표준 OIDC 인증 흐름이 시작됩니다. Logto 로그인 페이지가 웹뷰에서 열립니다. 웹뷰 기반 인증 흐름은 flutter_web_auth 에 의해 지원됩니다.

LogtoClient 는 인증, 토큰 교환, 사용자 정보 조회 단계를 처리합니다. 사용자가 인증되면 idTokenClaims 가 로컬 저장소에 저장됩니다.

LogtoClient 에서 idTokenClaims 를 가져와 현재 사용자 스트림을 업데이트합니다.

로그아웃 메서드 구현#

signOut 메서드는 로컬 저장소에 저장된 사용자 인증 데이터를 지우고 현재 사용자 스트림을 업데이트합니다.

인증 유틸리티 메서드 업데이트#

• CustomAuthManager 인스턴스에 액세스 할 수 있는 authManager getter 추가
• 현재 사용자의 uid 를 가져오는 currentUserUid getter 추가
• 현재 사용자 데이터를 가져오는 currentUserData getter 추가
• Logto 클라이언트 인스턴스에 액세스할 수 있는 logtoClient getter 추가

Step 5: UI 에서 로그인 및 로그아웃 버튼 업데이트#

홈 페이지#

사용자가 로그인 버튼을 클릭하면 authManager.signIn 메서드를 호출하여 인증 흐름을 시작합니다.

redirectUri 는 Logto 로그인 페이지에서 인증 콜백을 캡처하는 데 사용되는 콜백 URL 입니다. 로그인 구현 에서 redirectUri 에 대한 자세한 내용을 참조하세요.

사용자가 성공적으로 인증되면 user 페이지로 리디렉션됩니다.

사용자 프로필 페이지#

현재 사용자 데이터와 Logto 클라이언트 인스턴스에 액세스하기 위해 인증 유틸리티 getter 를 사용합니다.

예를 들어, 여러 Text 위젯을 사용하여 사용자 정보를 표시하려면 다음과 같이 할 수 있습니다:

사용자가 로그아웃 버튼을 클릭하면 로그아웃 메서드를 호출하고 사용자를 홈 페이지로 리디렉션합니다.

테스트#

에뮬레이터에서 FlutterFlow 애플리케이션을 실행합니다. 홈 페이지에서 로그인 버튼을 클릭하여 인증 흐름을 시작합니다. Logto 로그인 페이지가 웹뷰에서 열립니다. 인증이 성공적으로 완료되면 사용자는 프로필 페이지로 리디렉션됩니다. 프로필 페이지에서 사용자 정보가 표시될 것입니다. 로그아웃 버튼을 클릭하여 사용자를 로그아웃하고 다시 홈 페이지로 리디렉션하세요.

develop 브랜치를 다시 main 브랜치에 병합하고 GitHub 저장소에 변경 사항을 푸시하는 것을 잊지 마세요.

추가 자료#

Logto SDK 는 Logto API 와 상호작용할 수 있는 더 많은 메서드를 제공합니다. Logto SDK 를 사용하여 더 많은 기능을 구현하기 위해 CustomAuthManager 클래스를 추가로 맞춤화할 수 있습니다.

• 사용자 정보 엔드포인트
• 리소스 액세스 토큰 가져오기
• 조직 액세스 토큰 가져오기