mylog 로그인

Vue로 PWA 개발 - 그랜파 개발자

Vue 프로젝트 Beta Test : mylog, 일상의 기록

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.

mylog 로그인

 

마이로그 로그인은 먼저 이메일과 패스워드로 구글에 로그인하여 uid를 받아 이것으로 마이로그 users collection에서 회원 정보를 가져와 로그인 설정을 합니다.

 

1. 로그인

 

인증을 위하여 signInWithEmailAndPassword 함수를 사용하고, 이것은 Firebase Authentication에서 제공하는 함수로 이메일과 비밀번호를 사용하여 사용자를 로그인시키는 기능입니다. 주로 Firebase와 연결된 앱이나 웹사이트에서 사용자 인증을 처리할 때 사용됩니다. 이 함수는 사용자가 입력한 이메일과 비밀번호가 Firebase에 저장된 인증 정보와 일치하는지 확인한 뒤, 성공적으로 인증되면 사용자를 로그인 상태로 유지시킵니다.

signInWithEmailAndPassword 함수로 로그인을 성공하면 user 객체를 돌려줍니다. user객체의 uid로 users collection에 등록된 사용자 정보를 가져와 로그인 설정을 합니다.

// src/store/modules/auth.js
. . .
// -- 로그인 
async login({ commit, dispatch }, { email, password }) {    
  try {
    const { user } = await signInWithEmailAndPassword(auth, email, password);      
    // 웹앱의 계정 정보를 가져와 로그인 설정을 한다.
    dispatch('fetchUserWithUid', {uid: user.uid});
    router.push("/");   // home으로
  } catch (error) {
    //commit('setError', error.message);
    alert("Failed to log in: " + error.message);
  }
},

// 로그인은 google 계정으로 한다. user 정보는 mylog 계정 정보를 사용한다.
// 그러므로 구글 계정의 uid로 mylog 계정의 user 정보를 가져와야 한다.
async fetchUserWithUid({ commit, dispatch }, {uid}) {  
  try {
    const users = []; 
    const userRef = query(collection(db, "users"), where('uids', 'array-contains', uid));
    const querySnapshot = await getDocs(userRef);
    querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
       users.push({ id: doc.id, ...doc.data() });
    });
    // 로그인 설정을 한다.
    commit('setUser', users[0]);
  } catch (error) {
    alert('Error fetching user:', error);
  }            
},
. . .

 

2. 자동 로그인

 

Firebase Authentication에서 제공하는 함수로 사용자의 인증 상태 변화를 실시간으로 감지하는 onAuthStateChanged 라는 함수가 있습니다. 이 함수를 사용하면 사용자가 로그인하거나 로그아웃할 때마다 해당 상태 변화에 대한 콜백 함수를 실행하여 앱 내에서 자동으로 로그인 상태를 처리할 수 있습니다. 앱이 열릴 때 onAuthStateChanged 함수로 로그인 상태를 확인하여 자동 로그인할 수 있습니다.

// src/main.js
. . .
new Vue({
  . . .
  created() {
    // Set up Firebase auth state change listener
    const { dispatch } = this.$store;
    // Initialize Firebase authentication to check for the logged-in user
    dispatch('auth/initializeAuth');
    dispatch('auth/fetchUsers');
  }
}).$mount('#app')

// src/store/modules/auth.js
. . .
async initializeAuth({ commit, dispatch }) {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      // user.uid로 웹앱의 firestore DB에서 계정 정보를 가져온다.
      dispatch('fetchUserWithUid', {uid: user.uid});
    } else {
      commit("setUser", null);
    }
  });
},
. . .

 

3. 로그아웃

 

signOut은 Firebase Authentication에서 제공하는 함수로, 현재 로그인한 사용자를 로그아웃시키는 역할을 합니다. 이 함수를 호출하면 Firebase에서 사용자 세션을 종료하고, 인증 상태가 로그아웃 상태로 변경됩니다. 주로 사용자가 로그아웃 버튼을 클릭했을 때 이 함수를 호출하여 사용자가 안전하게 앱을 떠날 수 있도록 합니다.

// src/store/modules/auth.js
. . .
async logout({ commit }) {
  await auth.signOut();
  commit('setUser', null);
},
. . .

 

4. 비밀번호 재설정

 

마이로그는 Firebase Authentication를 사용합니다. 사용자가 비밀번호를 잊었을 때 Firebase는 비밀번호 재설정 이메일을 발송할 수 있는 sendPasswordResetEmail 메서드를 제공합니다. 이를 사용하여 비밀번호 재설정을 합니다.

// src/store/modules/auth.js
. . .
// 비밀번호 재설정
async PasswordReset({}, email) {  
  console.log(email);
  sendPasswordResetEmail(auth, email)
  .then(() => {
    alert("비밀번호 재설정 이메일이 발송되었습니다.");
  })
  .catch((error) => {
    alert("비밀번호 재설정 이메일 발송 중 오류 발생:", error);
  });
},
. . .

 

5. Google 계정으로 로그인

 

마이로그 계정에서 'GOOGLE 연동'을 해두면 '구글 계정으로 로그인'을 할 수 있습니다. Firebase Authentication에서 제공하는 signInWithPopup 함수로 구글 계정에 로그인하여 구글 계정의 uid를 받아, 마이로그 users 정보 항목 중 uids에 구글로부터 받은 uid가 있는 회원의 정보를 가져와 웹앱 로그인 설정을 합니다. signInWithPopup 함수는 팝업 창을 통해 사용자가 소셜 로그인 제공자(예: Google, Facebook, GitHub, Twitter 등)를 통해 인증할 수 있도록 합니다. 사용자는 새로운 페이지로 리디렉션되지 않고, 작은 팝업 창에서 로그인 절차를 완료하게 됩니다.

// src/store/modules/auth.js
. . .
// 구글 계정으로 로그인
async googleLogin({ commit }) {
  try {
    // 구글 계정에 로그인
    const provider = new GoogleAuthProvider();
    const { user } = await signInWithPopup(auth, provider);

    // 구글계정의 uid로 웹앱 계정의 정보를 가져옴.
    // 웹앱 계정은 사이트에 접속할 때 전체 회원 정보를 로드하였으므로 
    // 이미 로드된 회원 리스트에서 구글 계정 uid를 가진 myUser를 가져온다.
    const uid = user.uid;
    const myUser = state.users.find(user => user.uids && user.uids.includes(uid));
    if (myUser) {
      commit('setUser', myUser);
      router.push("/");   // home으로
    } else {
      alert('등록된 회원이 아닙니다.');
    }

  } catch (error) {
    commit('setError', error.message);
  }
},
. . .

Vue PWA 프로젝트, mylog 코드