mylog 계정

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

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

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

 

계정 정보 수정은 이름과 마이로그 이름만 수정할 수 있고, 별도의 폼으로 비밀번호를 변경할 수 있습니다.

 

1. 계정 정보 변경

 

마이로그 계정 항목은 이름, 마이로그 이름, 이메일, 비밀번호, uids입니다. 계정 정보 수정은 이름과 마이로그 이름만 수정할 수 있습니다.

// src/store/modules/auth.js
. . . 
// 계정 정보 수정
async updateUserInfo({ commit }, updatedInfo) {
  try {
    const userDoc = doc(db, "users", updatedInfo.id);
    await updateDoc(userDoc, updatedInfo);

    commit("setUser", updatedInfo);

    alert("계정 정보를 수정하였습니다.");
  } catch (error) {
    alert("계정 정보 수정 실패: " + error.message);
  }
},
  . . .

 

2. 비밀번호 변경

 

비밀번호 변경 버튼을 누르면 비밀번호 변경 폼이 나타나고 현재 비밀번호와 새 비밀번호를 입력하여 변경할 수 있습니다. 비밀번호 변경은 민감한 작업이므로 Firebase Authentication의 reauthenticateWithCredential 함수를 사용하여 현재 비밀번호로 재인증한 후 현재 비밀번호와 새 비밀번호로 updatePassword 함수를 사용하여 비밀번호를 변경합니다.

// src/store/modules/auth.js
. . .
// 비밀번호 변경
async changePassword({}, { oldPassword, newPassword }) {  
  const credential = EmailAuthProvider.credential(
    auth.currentUser.email,
    oldPassword
  );

  reauthenticateWithCredential(auth.currentUser, credential)
  .then(() => {
    updatePassword(auth.currentUser, newPassword)
    .then(() => {
      alert("비밀번호가 성공적으로 변경되었습니다.");
    }).catch((error) => {
      alert("비밀번호 변경 실패 : " + error.message);
    });
  })
  .catch((error) => {
    alert("재인증 실패 : " + error.message);
  });
},
. . .

 

3. Google 연동

 

Firebase Authentication에서 제공하는 signInWithPopup 함수로 구글 계정에 로그인하여 구글 계정의 uid를 받아 마이로그 users 정보 항목 중 uids에 저장합니다. signInWithPopup 함수는 팝업 창을 통해 사용자가 소셜 로그인 제공자(예: Google, Facebook, GitHub, Twitter 등)를 통해 인증할 수 있도록 합니다. 사용자는 새로운 페이지로 리디렉션되지 않고, 작은 팝업 창에서 로그인 절차를 처리하여 줍니다.

// src/store/modules/auth.js
. . .
async addGoogleAccount({ commit, dispatch, getters }) {
  try {
    const provider = new GoogleAuthProvider();
    const { user } = await signInWithPopup(auth, provider);
    try {
      // 이미 연동된 회원의 경우 알림 메시지 출력한다.
      const uid = user.uid;
      const myUser = state.users.find(user => user.uids && user.uids.includes(uid));
      if (myUser) {
        // 이미 연동되어 있다.
        alert('이미 연동되어 있습니다.');
      } else {
        // 구글 연동을 진행한다.
        dispatch('addUidToUser', user.uid);
      }          
    } catch (error) {
      commit('setError','Error adding google uid');
    }
  } catch (error) {
    commit('setError', error.message);
  }
},

// 구글 계정의 uid를 받아 user collection의 uids에 넣는다.
async addUidToUser({ state }, newUid) {      
  //console.log('user.id:', state.user.id);
  if (state.user) {
    try {
      const userDoc = doc(db, "users", state.user.id);
      updateDoc(userDoc, {
        uids: arrayUnion(newUid)
      });
      // Update the local state if neededa
      state.user.uids = [...(state.user.uids || []), newUid];
    } catch (error) {
      console.error('Error adding UID to user:', error);
    }
  }
},
. . .

 

Vue PWA 프로젝트, mylog 코드