나는 FlutterFlow의 내장 인증 기능을 어떻게 사용할 수 있을까요?

1단계: 계정 생성으로 시작하십시오

FlutterFlow의 내장 인증 기능을 구현하기 시작하기 전에 해당 계정이 필요합니다. FlutterFlow 웹사이트로 가서 새 계정을 등록하거나 이미 가지고 있다면 로그인하십시오.

2단계: 새 프로젝트 생성

FlutterFlow에 로그인 한 후 대시보드 페이지에서 "New Project" 버튼을 클릭하십시오. 이렇게 하면 프로젝트 생성 페이지로 이동합니다. 이곳에서 프로젝트의 이름을 입력하고 프로젝트에 적절한 옵션을 선택하십시오.

3단계: Firebase 탭으로 이동

프로젝트가 성공적으로 생성되면 메인 편집 인터페이스로 리디렉션됩니다. 이 인터페이스에서 화면 왼쪽에 있는 "Firebase" 탭을 클릭합니다. 이곳에서 프로젝트의 Firebase 서비스, 인증 설정을 할 수 있습니다.

4단계: 프로젝트에 Firebase 활성화

Firebase 탭에서 "Enable" 버튼을 클릭합니다. Firebase 프로젝트를 설정하기 위해 여러 필드를 작성해야 합니다. 이는 Firebase API 키, Auth 도메인, 프로젝트 ID, 스토리지 버킷 및 앱 ID가 포함됩니다. 이 값은 Firebase 콘솔의 Firebase 프로젝트 설정에서 찾을 수 있습니다.

5단계: 인증 방법 설정

애플리케이션에서 Firebase를 활성화한 후 "Authentication" 하위 탭을 찾기 위해 아래로 스크롤하십시오. 여기서 애플리케이션에 사용하려는 인증 방법을 선택할 수 있습니다. FlutterFlow는 현재 이메일과 비밀번호, 구글 로그인, 익명 로그인 방법을 지원합니다. 방법을 활성화하려면 그 옆에 있는 스위치를 토글하십시오.

6단계: 이메일과 비밀번호 로그인 설정

이메일과 비밀번호 로그인 방법을 사용하기로 결정하면 "Create User"와 "Sign In" API 콜을 제공해야 합니다. Create User API 콜은 새 사용자가 계정을 생성하려는 경우에 사용되며, Sign In API 콜은 기존 사용자가 계정에 로그인하려는 경우에 사용됩니다.

7단계: Google 로그인 설정

Google 로그인 방법을 사용하기로 결정하면 Google 로그인 API 콜을 제공해야 합니다. 이 API 콜은 사용자를 Google 계정을 사용하여 인증하는 데 사용됩니다.

8단계: 로그인 및 가입 화면 생성

인증 방법을 성공적으로 설정한 후 애플리케이션에 가입 및 로그인을 위한 UI를 만들 차례입니다. FlutterFlow에서 프로젝트로 돌아가 'Design' 탭으로 이동하십시오. 가입을 위한 한 화면과 로그인을 위한 다른 화면을 만듭니다.

9단계: 가입 화면 디자인

가입 화면에서 사용자 정보를 위해 필드를 만듭니다. 이는 일반적으로 이메일, 비밀번호 및 제출 버튼을 위한 필드를 포함합니다. Firebase 인증 설정의 해당 값에 이메일과 비밀번호 필드가 연결되어 있는지 확인하십시오.

10단계: 로그인 화면 디자인

로그인 화면에서 이메일과 비밀번호를 입력하고 제출 버튼을 만듭니다. Firebase 인증 설정의 해당 값에 이런 필드가 연결되어 있는지 확인하십시오.

11단계: 인증 테스트

이제 인증 기능을 테스트할 수 있습니다. 화면 오른쪽 상단의 "Preview" 버튼을 클릭하십시오. 이렇게하면 애플리케이션을 미리 보기 모드에서 엽니다. 여기서 애플리케이션에 가입하고 로그인하는 것을 테스트하여 모든 것이 제대로 설정되고 인증이 올바르게 작동하는지 확인할 수 있습니다.

이제 FlutterFlow의 내장 인증 기능을 애플리케이션에 성공적으로 추가했습니다.