WeWeb에서 Firebase를 사용하여 사용자 인증을 설정하는 단계별 가이드를 찾아보세요. 안전한 로그인을 보장하고 웹사이트의 사용자 관리를 향상시키는 방법을 배워보세요.
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.
프로시저를 시작하기 전에 모든 필요한 도구와 소프트웨어가 설치되어 있는지 확인하세요.꼭 필요한 것은 WeWeb 계정과 Firebase 계정뿐입니다.
1단계: Firebase 프로젝트 생성
Google 계정을 사용하여 Firebase 콘솔에 로그인하세요. Firebase 콘솔에서 "프로젝트 추가" 버튼을 클릭합니다. 프로젝트 이름을 입력하라는 메시지가 나타나면 이름을 입력한 후 "계속"을 클릭합니다. 프로젝트에 Google Analytics를 사용하려면 다음 단계에서 활성화할 수 있으니, 그렇게 하지 않으려면 "프로젝트 생성"만 클릭하면 됩니다. 이 과정은 몇 분 정도 걸릴 수 있으니, Firebase가 프로젝트를 설정할 때까지 기다리세요.
2단계: Firebase 인증 설정
프로젝트가 준비되면 Firebase 프로젝트 대시보드로 리디렉션됩니다. 여기서 사용자 인증을 설정해야 합니다. 왼쪽 메뉴에서 "인증" 섹션을 클릭하고, "로그인 방법" 탭을 선택하세요.
"로그인 방법" 탭에서 WeWeb의 인증에 사용하고자 하는 로그인 제공 업체를 활성화하세요. 예를 들어, 이메일/비밀번호 인증을 사용하려면 이메일/비밀번호를 클릭하여 활성화하고 "저장"을 클릭하세요.
3단계: WeWeb 앱에 Firebase 추가
Firebase 대시보드에서 Project Overview 옆의 톱니바퀴 아이콘을 클릭하여 프로젝트 설정으로 이동하세요. "일반" 탭에서 프로젝트 ID와 웹 API 키를 찾을 수 있습니다. 이 정보가 필요하므로 이 페이지를 계속 열어두세요.
WeWeb 계정에 로그인하고 프로젝트를 열어보세요. "설정" 메뉴로 가서 "통합"을 클릭하세요. 여기서 Firebase를 가능한 통합 목록에서 선택해야 합니다.
Firebase 프로젝트 ID와 웹 API 키를 요청받으면 Firebase 프로젝트 설정에서 이를 복사하여 WeWeb 통합 탭의 해당 필드에 붙여 넣으세요, 그리고 "저장"을 클릭하세요.
4단계: WeWeb에서 인증 구현
이제 Firebase가 WeWeb 앱에 연결되었으므로 사용자 인증을 구현할 수 있습니다. 웹 페이지에서 로그인 기능을 추가하려는 위치를 선택하세요. WeWeb의 기본 로그인 및 가입 기능을 사용할 수 있습니다.
추가하려는 페이지로 이동하고 "편집"을 클릭하세요. "컴포넌트 추가" 옵션을 선택하고 "사용자"를 검색하세요. WeWeb에서 사용 가능한 로그인, 가입 또는 다른 사용자 인증 양식 중에서 선택할 수 있습니다.
양식을 설정한 후에 디자인 사양에 따라 커스터마이징 할 수 있습니다. 그런 다음 컴포넌트의 속성 탭으로 이동하는데, 여기서 어떤 인증 서비스를 사용할 것인지 지정할 수 있습니다. Firebase를 선택하는 것을 잊지 마세요.
5단계: 인증 테스트
모든 것이 설정되었다면, 모든 것이 완벽하게 작동하는지 확인하기 위해 인증 프로세스를 테스트하는 것을 잊지 마세요. 새 사용자를 가입시켜 본 후 그 자격증명으로 로그인해 보세요.
모든 것이 올바르게 작동하면, 축하합니다! Firebase를 사용하여 WeWeb에서 사용자 인증을 성공적으로 설정했습니다.
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.