Vue - 프로그래시브 웹앱(PWA) 설정 + 로그인

목차

1. Firebase 배포

2. Firebase 로그인

 

 

권한이 있는 터미널에서 Firebase login 명령어를 입력하시고 구글 로그인 합니다.

로그인을 성공하면 아래와같은 페이지가 뜹니다.

 

Firebase init

데이터베이스와 호스팅을 사용

설정상에서 public 폴더 사용할꺼냐(디폴트) 해서 Y 눌렀더니 나중에 배포했을 때 빌드된 파일을 찾지 못했습니다.

 

firebase.json public을 dist로 변경 

빌드가 된 Vue 프로젝트가 dist 에 저장되기 때문에 설정을 수정해야함

 

 

Firebase deploy

 

무료로 호스팅 해주는 것을 볼 수 있습니다

 

서비스워커도 잘 돌아가는 것을 볼 수 있습니다.

서비스 워커란?

서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며, 웹페이지 또는 사용자 상호작용이 필요하지 않은 기능에 대해 문호를 개방합니다. 현재 푸시 알림 및 백그라운드 동기화와 같은 기능은 이미 제공되고 있습니다. 향후 서비스 워커는 주기적 동기화 또는 지오펜싱과 같은 다른 기능을 지원할 수 있습니다. 이 가이드에서는 프로그래밍 방식의 응답 캐시 관리를 비롯하여 네트워크 요청을 가로채고 처리하는 핵심 기능에 대해 설명합니다.

기본적으로 PWA는 https 에서만 실행되며 로컬 호스트에서는 안됩니다 !

 

 

Firebase 인증을 들어가기 전에 모듈을 설치합니다.

npm install --save firebase

그리고 설정을 적어둔 js 파일을 저장합니다.

설정은 firebase console 들어가서 프로젝트 설정에 있습니다.

 

자신 프로젝트의 설정들을 적어줍니다.

ex)

 

 

 

인증 구현 입니다.

Firebase console 에서 설정 합니다.

 

로그인 할 경우 about 페이지로 보내는 로직을 구현했습니다.

<template>
  <div class="login_container">
      <button class="google_btn" type="button" @click="loginGoogle">구글 로그인</button>
  </div>
</template>

<script>
import * as firebase from 'firebase/app';
import "firebase/auth";
import firebaseConfig from '../../firebaseConfig';


export default {
    created(){
        firebase.initializeApp(firebaseConfig);
    },
    methods: {
      async loginGoogle(){
        const provider = new firebase.auth.GoogleAuthProvider();
        await firebase.auth().signInWithPopup(provider);
        this.$router.push('/about');
      }
    }
}
</script>

<style scoped>
    .google_btn{
      background-color: #F15F5F;
      width: 120px;
      height: 40px;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 15px;
    }
    .google_btn:hover{
      background-color: #c0392b;
    }
</style>

 

 

로그인을 하면 사용자 기록이 남습니다.

firebase console

 

* 번외

안드로이드 핸드폰으로 들어가니 홈화면에 추가하는 기능이 있습니다.