Vue Firebase UI: 로그인 페이지 만들기 [Facebook/Google Auth]

이 Firebase + Vue 튜토리얼에서는 OAuth 공급자 Facebook 로그인, Google 로그인 및 이메일/비밀번호 로그인을 포함하여 FirebaseUI를 사용하여 관련 UI를 작성하지 않고 vue 앱에 로그인 시스템을 구현하는 가장 빠른 방법을 배우게 됩니다. 무엇이든 코딩하십시오.

대부분의 웹/모바일 로그인 화면을 보면 이메일과 비밀번호, 페이스북, 구글 등 가장 보편적인 로그인 방식 3가지를 볼 수 있습니다.

그것이 바로 이 기사에서 다루는 내용입니다!



시작하자!

Setting Up VueJs Starter Project

Add Firebase To The Vue.js app

Sign in with Facebook

Login with Google

Login with Email and Password

Protect Vue Routes/Navigation Items Upon Authentication

스타터 VueJs 프로젝트 설정

이미 샘플vue starter project을 생성하고 다운로드하여 원하는 경우 따라할 수 있습니다. 또한 컴퓨터에 node이(가) 설치되어 있다고 가정합니다.

다운로드가 완료되면 터미널/명령 프롬프트를 열고 시작 프로젝트 폴더로 이동한 다음 npm install 명령을 실행하여 프로젝트에 대한 종속성을 설치합니다.

그런 다음 npm run dev 명령을 사용하여 애플리케이션을 실행합니다.

그런 다음 localhost로 이동하면 아래 스크린샷과 같이 앱이 실행되는 것을 볼 수 있습니다.

보시다시피 이 샘플 앱에는 홈(/), 프로필(/profile) 및 로그인(/login)의 세 가지 탐색 항목이 있습니다.

꽤 직설적 인!

웹 앱에 Firebase 추가

첫 번째 단계는 프로젝트에 firebase 패키지를 설치하는 것입니다.

npm install firebase --save

그런 다음 Firebase으로 이동하여 아직 수행하지 않은 경우 프로젝트를 생성합니다.

이후…

계속해서 Firebase 대시보드 → 프로젝트 개요(왼쪽 상단) → 톱니바퀴 ⚙ 아이콘 클릭 → 프로젝트 설정을 클릭하여 구성 코드를 가져옵니다.

그런 다음 하단으로 스크롤 → Firebase SDK 스니펫 섹션 아래 → 구성 옵션을 선택하고 코드를 복사합니다.

If you haven’t seen the configuration page, you need to register the app by clicking </> web icon which will open up the window. Follow the instructions to complete the registration process.

Once you have registered, then you can come back to the above location and obtain the firebase configuration code.

다음으로 Firebase를 초기화하겠습니다.

그러려면 main.js 파일로 이동하여 상단에 firebase를 가져옵니다.

import firebase from 'firebase'

그런 다음 이전에 복사한 구성 코드를 붙여넣습니다.

const firebaseConfig = {
  apiKey: "*****",
  authDomain: "firebaseUIAuth-*****.firebaseapp.com",
  databaseURL: "https://****-709a3.firebaseio.com",
  projectId: "firebaseUIAuth-709a3",
  storageBucket: "",
  messagingSenderId: "2547636***397",
  appId: "1:254763***397:web:***c15c671b5c"
};

Make sure to obtain the config code from your firebase project as the above code will not work for your project.

마지막으로 Firebase를 초기화합니다.

firebase.initializeApp(firebaseConfig);

이 시점에서 앱을 실행하면 모든 것이 이전처럼 작동해야 합니다.

FirebaseUI를 사용하여 Facebook에 로그인

첫 번째 단계에서는 firebaseui 패키지를 프로젝트에 설치해야 합니다.

npm install firebaseui --save

다음 단계는 firebase, firebaseui 및 firebaseui.css 패키지를 Login.vue 구성 요소로 가져오는 것입니다.

import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";

그런 다음 Facebook으로 로그인 버튼이 표시될 컨테이너 요소인 내부에 ID가 있는 요소를 만듭니다.

<section id="firebaseui-auth-container"></section>

그런 다음 아래 코드와 같이 firebase.auth()를 전달하여 firebaseui 객체를 인스턴스화하고 mounted() 함수 내부의 ui라는 변수에 저장합니다.

아래 코드에서 볼 수 있듯이 두 가지 속성을 갖는 uiConfig라는 Javascript 개체를 정의했습니다.

mounted() {
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        var uiConfig = {
            signInSuccessUrl: "/profile",
            signInOptions: [firebase.auth.FacebookAuthProvider.PROVIDER_ID]
        };
        ui.start("#firebaseui-auth-container", uiConfig);
    }

첫 번째는 signInSuccessUrl이며/profile 경로의 값을 설정합니다. 이 속성은 로그인에 성공하면 프로필 페이지로 이동합니다.

두 번째 속성은 현재 Facebook 버튼이 있는 배열인 signInOption입니다. 이것은 나중에 더 많은 버튼을 추가할 곳입니다.

마지막으로 ui 객체에서 start() 메서드를 호출하고 #firebaseui-auth-container를 첫 번째 인수로 전달하고 uiConfig를 두 번째 인수로 전달합니다.

이제 로그인 페이지에서 Facebook으로 로그인 버튼을 볼 수 있습니다.

You can configure with more options than given inside uiConfig object. For example, if you want the sign in flow to be a popup window you can set signInFlow: “popup”. Find out more here.

멋진!

하지만 문제가 있습니다…

홈 또는 프로필 페이지로 전환하고 로그인 페이지로 돌아오면 Facebook으로 로그인 버튼이 표시되지 않고 브라우저 콘솔에 오류가 표시됩니다.

"Error: An AuthUI instance already exists for the key

단일 페이지 vue 애플리케이션을 실행 중이기 때문에/login 경로로 이동할 때마다 Firebase Auth UI 개체를 인스턴스화하려고 합니다.

이를 해결하기 위해 새 인스턴스를 만들기 전에 firebaseui 객체가 인스턴스화되었는지 여부를 쉽게 확인할 수 있습니다.

Continue Reading...