FlutterFlow 앱에 대해 사용자 정의 비밀번호 찾기 화면을 어떻게 만드나요?

이 튜토리얼을 시작하기 전에 FlutterFlow, Firebase, Firestore 데이터베이스, 기본적인 프론트엔드 웹 개발에 대해 기본적인 지식이 있는지 확인해야 합니다.

다음은 FlutterFlow 애플리케이션에 맞춤형 비밀번호 찾기 기능을 만들기 위해 따라야 할 단계입니다:

Step 1: FlutterFlow 프로젝트 시작

첫 번째 단계에서는 FlutterFlow 계정에 로그인해야 합니다. 성공적인 로그인 후, 새 프로젝트를 생성하거나 비밀번호 찾기 기능을 구현하려는 기존 프로젝트를 열어야 합니다.

Step 2: Firebase Collection 생성

다음으로, Firebase 콘솔로 이동합니다. 'Cloud Firestore'를 클릭한 다음 '데이터베이스 생성'을 클릭합니다. 'Users'라는 새 컬렉션을 추가합니다. 이 컬렉션에는 이메일과 비밀번호 데이터가 저장됩니다.

Step 3: FlutterFlow 인증 설정

FlutterFlow 프로젝트 내부에서 사이드바 메뉴로 이동하여 '설정'을 클릭한 다음 '인증' 탭으로 이동합니다. 여기서 이메일 및 비밀번호 인증을 활성화하려면 버튼을 'ON'으로 전환해야 합니다. 변경 사항을 저장합니다.

Step 4: 사용자 인터페이스에 비밀번호 찾기 기능 구현

다음으로, 프로젝트의 로그인 화면으로 이동해야 합니다. '비밀번호 찾기' 버튼 속성의 '동작' 탭을 클릭합니다. 이 동작은 비밀번호 찾기 기능을 수행하는 함수로 설정해야 합니다. 이 함수를 '비밀번호 재설정'으로 설정합니다.

Step 5: 비밀번호 찾기 대화상자 커스터마이징

이후 로그인 화면으로 돌아가 대화상자를 위한 버튼을 클릭해야 합니다. 이것은 대화상자의 속성을 열게 됩니다. '필드' 섹션에서 기존의 모든 필드를 제거하고 새로운 필드를 추가합니다. 이 필드들은 이메일 필드('이메일 재설정'이라는 라벨이 있는 텍스트 필드)와 재설정 버튼으로 구성됩니다. 이메일 필드를 '이메일' 타입으로 설정하고 입력을 필요로 하게 설정합니다.

재설정 버튼의 경우, 그것의 동작을 '비밀번호 재설정'으로 설정하고, 매개변수를 이메일 재설정 필드에 입력된 텍스트로 설정합니다. '성공 시' 필드를 대화 상자를 닫게 설정하고, '오류 시' 필드를 오류 메시지를 표시하도록 설정합니다. 변경 사항을 저장합니다.

Step 6: Firebase에서 이메일 템플릿 커스터마이징

마지막으로, 앱의 외관과 느낌에 맞추어 비밀번호 재설정 이메일을 커스터마이징해야 합니다.

Firebase 콘솔로 이동하고, '인증' 및 '템플릿'을 클릭합니다. '비밀번호 재설정' 옵션을 선택합니다. 여기에서 제목, 메시지를 커스터마이징하고 원하는 외관과 느낌이 맞는지 확인하기 위해 테스트 메일을 보낼 수 있습니다.

또한 이메일에 앱 링크를 포함시켜 사용자가 비밀번호를 재설정 한 후 빠르게 액세스할 수 있게 할 수 있습니다. 완료되면 변경 사항을 저장합니다.

자, 이게 다입니다. 이제 FlutterFlow 앱을 위한 맞춤형 비밀번호 찾기 화면이 제대로 작동해야 합니다. 항상 기능이 예상대로 작동하는지 확인하기 위해 몇 번 테스트를 해야 합니다.