로메오의 블로그

[Firebase] Firebase Auth 사용하기 - jQuery용 본문

Frontend/Firebase

[Firebase] Firebase Auth 사용하기 - jQuery용

romeoh 2023. 2. 17. 15:47
반응형

Firebase 목록

React 목록

파일 설정

$ mkdir firebase
$ cd firebase
$ mkdir public
$ mkdir public/js
$ touch public/js/fireauth.js
$ touch public/index.html
$ touch App.js

 

 

Node 서버 구성

App.js

$ npm install express
const express = require('express')
const app = express();
const port = 3001;

app.use(express.static('public'));
app.get('', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

app.listen(port, () => {
    console.log('Example app port: ' + port);
})

 

 

 

 

프론트 

index.html

<!doctype html>
<html lang="ko" class="web fzoom">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"/>
    <style>
        .form-signin {
            max-width: 330px;
            padding: 15px;
        }
    </style>
</head>

<body class="text-center">
    <main class="form-signin w-30 m-auto">
        <form onsubmit="return false">
            <div class="form-floating">
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
                <label for="email">Email</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" placeholder="Password">
                <label for="password">Password</label>
            </div>
            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnJoin">회원가입</button>
            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnLogin">로그인</button>
            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnLogout">로그아웃</button>
            <hr>

            <div class="form-floating">
                <input type="text" class="form-control" id="displayName" placeholder="사용자이름">
                <label for="displayName">사용자이름</label>
            </div>
            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnUpdate">사용자이름 업데이트</button>
            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnDelete">탈퇴하기</button>
            <hr>

            <button class="w-100 mt-4 btn btn-lg btn-primary" id="btnGoogle">구글로 로그인</button>
        </form>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <script type="module" src="./js/fireauth.js"></script>
</body>
</html>

 

 

 

 

js/fireauth.js

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js'
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-analytics.js"
import { 
  getAuth, 
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  updateProfile,
  deleteUser,
  GoogleAuthProvider,
  signInWithPopup,
} from 'https://www.gstatic.com/firebasejs/9.17.1/firebase-auth.js'

class Gaeyou {
  
  constructor() {
    this.firebaseInit()
    this.init()
    this.eventInit()
    this.checkState()
  }

  /**
   * Firebase 설정
   */
  firebaseInit() {
    const firebaseConfig = {
      apiKey: "[]",
      authDomain: "[]",
      projectId: "[]",
      storageBucket: "[]",
      messagingSenderId: "[]",
      appId: "[]",
      measurementId: "[]"
    }
    const app = initializeApp(firebaseConfig)
    getAnalytics(app)
    this.auth = getAuth();
    this.provider = new GoogleAuthProvider();
  }

  /**
   * 초기화
   */
  init() {
    this.$email       = $('#email')
    this.$password    = $('#password')
    this.$displayName = $('#displayName')
    this.$btnJoin     = $('#btnJoin')
    this.$btnLogin    = $('#btnLogin')
    this.$btnLogout   = $('#btnLogout')
    this.$btnUpdate   = $('#btnUpdate')
    this.$btnDelete   = $('#btnDelete')
    this.$btnGoogle   = $('#btnGoogle')
  }

  /**
   * 이벤트 할당
   */
  eventInit() {
    this.$btnJoin.on('click'    , this.joinEmail.bind(this))
    this.$btnLogin.on('click'   , this.loginEmail.bind(this))
    this.$btnLogout.on('click'  , this.logout.bind(this))
    this.$btnUpdate.on('click'  , this.updateName.bind(this))
    this.$btnDelete.on('click'  , this.deleteMember.bind(this))
    this.$btnGoogle.on('click'  , this.loginGoogle.bind(this))
  }

  /**
   * 로그인 체크
   */
  checkState() {
    onAuthStateChanged(this.auth, (user) => {
      if (user) {
        const uid = user.uid
        const displayName = user.displayName
        const email = user.email
        const photoURL = user.photoURL
        const emailVerified = user.emailVerified

        console.log(uid, displayName, email, photoURL, emailVerified)
      } else {
        console.log('로그인 안함')
      }
    });
  }

  /**
   * 이메일 회원가입
   */
  joinEmail() {
    const email = this.$email.val()
    const password = this.$password.val()
    if (!email) return;
    if (!password) return;

    createUserWithEmailAndPassword(this.auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user)
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode, errorMessage)
      });
  }

  /**
   * 이메일 로그인
   */
  loginEmail() {
    const email = this.$email.val()
    const password = this.$password.val()
    if (!email) return;
    if (!password) return;

    signInWithEmailAndPassword(this.auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user)
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode, errorMessage)
      });
  }

  /**
   * 로그아웃
   */
  logout() {
    signOut(this.auth).then(() => {
      console.log('로그아웃 성공')
    }).catch((error) => {
      console.error(error.message)
    });
  }

  /**
   * 사용자이름 업데이트
   */
  updateName() {
    const displayName = this.$displayName.val()
    if (!displayName) return

    updateProfile(this.auth.currentUser, {
      displayName: displayName,
      photoURL: "https://example.com/jane-q-user/profile.jpg"
    }).then(() => {
        console.log('updated')
    }).catch((error) => {
        console.error('오류')
    })
  }

  /**
   * 사용자 탈퇴
   */
  deleteMember() {
    deleteUser(this.auth.currentUser).then(() => {
      console.log('회원삭제 성공')
    }).catch((error) => {
      console.error(error.message)
    });
  }

  /**
   * 구글로 로그인
   */
  loginGoogle() {
    signInWithPopup(this.auth, this.provider)
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        const user = result.user;
        console.log(credential, token, user)
      }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.customData.email;
        const credential = GoogleAuthProvider.credentialFromError(error);
        console.error(errorCode, errorMessage, email, credential)
      });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  window.gaeyou = new Gaeyou();
});

 

 

 

서버구동

$ node App
Example app port: 3001

 

 

 

Firebase 목록

React 목록

반응형

'Frontend > Firebase' 카테고리의 다른 글

firebase functions 설정  (0) 2024.05.19
[Firebase] FireStore 사용하기 - jQuery용  (0) 2023.02.16
[Firebase] Dynamic Links 설정  (0) 2022.12.16
[Firebase] GCP 리소스 위치  (2) 2020.05.14
[Firebase] 도메인 연결 - Cafe24 서브도메인 연결하기  (3) 2020.02.06
'Frontend/Firebase' Related Articles more
Comments