mylog 계정 만들기

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

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

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

 

마이로그 계정 만들기는 먼저 이메일과 비밀번호로 구글 계정을 생성하고, 구글 계정을 생성할 때 구글로 부터 받은 uid를 uids에 저장한 후 마이로그의 users 컬렉션에 계정 만들기에서 입력한 사용자 정보를 저장합니다. 그러므로 마이로그는 users 컬렉션에 사용자의 비밀번호를 저장하지 않습니다.

 

1. 계정 등록 항목

 

마이로그 계정 만들기 항목들입니다.

1. 이름 : 회원의 이름입니다. 별명을 등록해도 됩니다.
2. 마이로그 이름 : 회원만의 마이로그를 모아볼 때 회원의 마이로그 이름을 나타냅니다. 회원별 서브홈의 이름입니다.
3. 이메일 : 회원의 id로 사용합니다.
4. 비밀번호 : 앱 접속을 위한 비밀번호 입니다.
5. uids : OAuth를 사용하기 위함으로, OAuth 사용할 때 각 OAuth의 회원 id를 저장합니다.

마이로그의 계정 만들기에서 구글 계정의 생성은 Firebase Authentication에서 제공하는 함수 createUserWithEmailAndPassword 기능을 통해 생성하는데, createUserWithEmailAndPassword는 이메일과 비밀번호를 통해 새로운 사용자를 생성하는 기능입니다. 이 함수는 주로 Firebase의 웹 SDK에서 사용되며, 사용자가 입력한 이메일과 비밀번호로 Firebase에 사용자 계정을 등록할 수 있게 해줍니다.

OAuth(Open Authorization)는 제3자 애플리케이션이 사용자의 자격 증명을 직접 저장하지 않고도, 다른 서비스의 API에 안전하게 접근할 수 있도록 권한을 부여하는 인증 및 권한 부여 프로토콜입니다. OAuth는 주로 사용자가 특정 서비스에 로그인하고, 이 서비스가 다른 서비스의 데이터를 읽거나 수정할 수 있도록 허용할 때 사용됩니다.

 

2. firestore

 

마이로그 계정 만들기는 이메일과 비밀번호로 구글 계정을 생성하고, 구글 계정의 uid와 계정 만들기 페이지에서 사용자가 입력한 정보를 마이로그 users collection에 저장함으로써 계정을 등록합니다. users collection은 클라우드에 있는 firestore에 있습니다.

Firestore는 구글 클라우드 플랫폼에서 제공하는 NoSQL 데이터베이스 서비스로, 특히 모바일, 웹, 서버 애플리케이션의 백엔드로 자주 사용됩니다. Firestore는 서버리스 아키텍처와 실시간 데이터 동기화가 필요한 애플리케이션에 매우 적합한 솔루션으로, 특히 사용자 간 데이터 공유, 실시간 데이터 업데이트, 높은 확장성이 필요한 환경에서 효과적입니다.

Firestore를 사용하기 위해서는 기본 설정부터 컬렉션과 문서 관리, 데이터 읽기와 쓰기, 보안 규칙 설정 등이 필요합니다

 

2-1 SDK 설치

npm install firebase

 

2-2 Firebase 초기화

 

firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

 

2-3 컬렉션과 문서

 

Firestore는 컬렉션(collection)과 문서(document) 구조로 데이터를 관리합니다.

• 컬렉션: 문서를 포함하는 최상위 레벨의 컨테이너
• 문서: 데이터를 저장하는 JSON 형태의 객체

 

2-4 환경변수

 

Vue에서 환경 변수(env)는 주로 민감한 정보나 환경별로 다른 설정값(API 키, API URL 등)을 관리하기 위해 사용됩니다. Vue는 .env 파일을 통해 환경 변수를 설정하며, 이 파일에 정의된 변수는 Vue 앱 내에서 사용할 수 있습니다.

Vue 프로젝트의 루트 디렉토리에 .env 파일을 생성하고, 필요한 변수를 정의합니다. 예를 들어, 개발 환경에서 사용할 API URL을 지정하려면 다음과 같이 작성합니다:

 

VUE_APP_API_URL=https://dev.api.example.com
VUE_APP_API_KEY=your_api_key_here

 

• 주의 : Vue에서는 VUE_APP_로 시작하는 변수만 애플리케이션 내에서 접근이 가능합니다. 다른 접두사를 사용하면 Vue가 인식하지 못합니다.

3. 계정 만들기 함수

auth.js 에서의 계정 등록 관련 actions 함수입니다.

register

createUserWithEmailAndPassword 함수로 구글 계정을 생성합니다. collection(db, "users")으로 마이로그의 users 컬렉션을 얻어, addDoc()으로 회원 정보를 저장 합니다.

fetchUsers

collection(db, "users") 에서 getDocs()로 등록된 모든 회원 정보를 로드합니다.

// -- 계정 만들기
  async register({ commit, dispatch }, { email, password, username, mylogname }) {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const uid = userCredential.user.uid;

      // Save additional user data to Firestore
      const userRef = collection(db, "users");
      const newUser = await addDoc(userRef, {
        email: email,
        uids: [uid],
        username: username,
        mylogname: mylogname
      });

      // 로그인 설정
      commit('setUser', newUser);
      dispatch('fetchUsers');

      router.push("/");   // home으로

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


// 전체 회원 정보를 로드한다.
  async fetchUsers({ commit }) {
    commit('setLoading', true);
    try {
      const users = [];
      const userRef = collection(db, "users");
      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('setUsers', users);
    } catch (error) {
      commit('setError', error.message);
    } finally {
      commit('setLoading', false);
    }
  },

Vue PWA 프로젝트, mylog 코드