우리의 단계별 가이드를 통해 FlutterFlow에서 사용자 정의 인증 시스템을 만드는 방법을 배우십시오. 로그인부터 새 프로젝트를 만드는 것까지 시스템을 테스트하는 방법까지.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: FlutterFlow에 로그인합니다
FlutterFlow에 로그인하십시오. 계정이 없다면 하나를 만들어야 합니다. 홈페이지에서 오른쪽 상단의 "로그인" 버튼을 클릭하고 로그인 정보를 입력하세요.
2단계: 새 프로젝트를 생성합니다.
로그인 한 후 새 프로젝트를 만듭니다. 대시보드에서 "+ 새 프로젝트" 버튼을 클릭하세요. 나타나는 팝업에서 프로젝트의 이름과 필요하다면 설명을 입력하세요.
3단계: 인증 섹션으로 이동합니다
프로젝트를 작성한 후, "인증" 섹션으로 이동합니다. 이 버튼은 화면 왼쪽 "도구 모음"에서 찾을 수 있습니다. 보통 디자인 탭과 데이터베이스 탭 아래에 있습니다.
4단계: FlutterFlow 인증을 활성화합니다
"FlutterFlow Auth 활성화" 옵션 옆의 스위치를 탭하여 켭니다. FlutterFlow 인증이 활성화되면, 여러분이 사용자 지정할 수 있는 여러 옵션들을 확인할 수 있습니다.
5단계: 필요한 필드들을 추가합니다
**"로그인/가입 필드"**로 표시된 섹션을 확인하실 수 있습니다. 여기서 사용자 지정 인증 필드를 만듭니다. "+ 필드 추가" 버튼을 클릭하고 모든 필요한 필드를 만듭니다. 각 필드에 대해 이름, 플레이스홀더, 타입을 지정해야 합니다.
타입은 "텍스트" 필드, "이메일", "비밀번호", 또는 "숫자"일 수 있습니다. 필요한 필드를 "필수 필드" 상자를 체크하여 필수로 표시하세요.
6단계: 로그인 및 가입 페이지를 사용자 지정합니다
다음 섹션, **"로그인/가입 페이지"**로 스크롤하십시오. 로그인 및 가입 과정을 위한 두 개의 새로운 페이지를 "로그인 페이지" 및 "가입 페이지"의 "+ 페이지 추가" 버튼을 클릭하여 만듭니다. 각각에 대해 올바른 페이지 유형을 선택하십시오.
7단계: 사용자 인터페이스를 사용자 지정합니다
같은 "로그인/가입 페이지" 아래에 사용자 인터페이스 옵션이 있을 수 있습니다. 이들을 당신의 취향과 앱 요구 사항에 맞게 수정하세요. 옵션에는 버튼 색 바꾸기, 버튼 테두리, 호버 색 등이 포함될 수 있습니다.
8단계: 비밀번호 잊어버린 이메일 설정
세팅의 다음 단계는 "비밀번호 잊음 이메일"입니다. 여기서 사용자가 비밀번호를 리셋하는 이메일을 받을 때 볼 "보낸 사람"과 "보낸 이메일"을 올바르게 설정하세요. 마찬가지로, 리셋 비밀번호 URL을 설정하는 것도 중요합니다. 이 URL은 사용자가 이메일에서 "비밀번호 재설정" 버튼을 클릭하면 리디렉션되는 곳입니다.
9단계: 인증 테스트
마지막으로, 사용자 설정 인증 시스템을 테스트하세요. 앱 디자인으로 돌아가서 로그인 및 가입 페이지로 연결되는 버튼을 추가하세요. 개발 모드와 프로덕션 모드 모두에서 인증 시스템을 철저히 테스트하고, 모든 생성된 필드가 예상대로 작동하는지 확인하세요.
이 단계들을 거치면 FlutterFlow에서 맞춤 인증 시스템을 만든 것입니다. 이 시스템은 여러분의 특별한 요구 사항과 디자인 기대치에 완벽하게 맞춰져야 합니다.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.