Firebase Vue JS #STEP에 로그인/등록
- DDD원래의
- 2024-10-27 07:01:29332검색
저는 최근에 제 프로젝트에 구현할 수 있는 이 놀랍고 간단한 인증 도구를 발견했습니다. 여러분의 프로젝트에서도 사용할 수 있도록 모든 기능과 단계별 기능을 공유하고 싶습니다.
저는 프론트엔드 개발자이고, 물론 백엔드에 대한 지식이 매우 모호합니다. 특히 사용자가 개인 정보를 개발하면서 민감하고 암호화된 정보를 저장해야 하는 로그인/등록 화면을 구현하는 경우에는 더욱 그렇습니다. 응용 프로그램에서 이 놀랍고 사용하기 쉬운 도구가 옵션으로 등장했으므로 더 이상 고민하지 말고 예제와 설명을 살펴보겠습니다.
이 첫 번째 게시물에서는 Firebase에서 프로젝트를 생성하고 프로젝트 작동에 필요한 모든 것을 구성할 것이므로...
Firebase에 로그인할 때 프로젝트 만들기 옵션으로 이동하세요.
그런 다음 프로젝트 이름을 지정하고(저의 경우에는 login-app 이름을 입력하는 것이 좋습니다) 계속을 클릭하세요.
-
다음 단계는 프로젝트에 대해 Google Analytics를 활성화할지 여부입니다. 제 경우에는 활성화하지 않겠습니다. 그러나 선택은 귀하에게 달려 있습니다. 그런 다음 프로젝트 만들기.
- 로드가 완료될 때까지 기다린 후
계속을 클릭하세요.
- 정상적으로 진행되었다면 이런 화면이 나타날 것입니다.
- 이제 다음 단계로
인증 옵션으로 이동하세요.
- 여기에서
시작하기로 이동하세요.
이메일/비밀번호 옵션을 선택하세요.
그런 다음 로그인 옵션을 활성화하고 설정을 저장하세요.
이제 이미지와 같이 인증 메인 화면에 선택한 옵션이 표시되는 것을 확인할 수 있습니다.
이제 새 공급업체 추가 옵션으로 이동하여 Google 로그인도 구성하겠습니다.
Google 옵션을 선택하세요.
그런 다음 활성화해야 합니다. 그 직후에 프로젝트의 공개 이름이 포함된 탭이 열리고 여기서 임의의 이름이 생성되지만 내 예를 들어 login-app 프로젝트와 동일한 이름을 입력하면 지원을 위한 이메일도 요청할 것입니다. 여기서는 일반적으로 Google에서 이메일을 찾고 선택하고 마지막으로 저장.
그리고 다시 한 번 두 활성 공급자가 표시된 기본 인증 화면으로 리디렉션됩니다.
이번 프로젝트 생성과 피팅룸 구성이 드디어 끝났습니다 ✨, 곧 손을 더럽혀서 모든 작업을 완료할 것을 약속드립니다.
이제 Firebase 홈페이지로 돌아가서 Firebase를 프로젝트에 통합하는 데 필요한 코드를 코드로 가져와야 합니다.
여기 프로젝트 개요에서 웹.
앱을 선택해 보겠습니다.
그래서 이 앱에 닉네임을 지정하겠습니다. 다시 한 번 이름을 login-app으로 입력한 다음 앱 등록을 클릭합니다.
이 작업이 완료되면 Firebase 설치 명령부터 웹 앱 설정까지 프로젝트에 SDK를 추가하는 데 필요한 모든 것이 제공됩니다.
SDK를 추가하는 이 부분에서는 npm 또는 스크립트 태그를 사용하도록 선택할 수 있습니다. 제 경우에는 이를 Vue JS 프로젝트에 통합하여 어쨌든 NPM을 사용하겠습니다.
이제 마지막으로 중요한 코드인 CODE에 대해 알아보겠습니다.
위 내용은 Firebase Vue JS #STEP에 로그인/등록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!