코딩의 기초와 웹,앱 프로그래밍 9!

- 24. 파이어베이스로 로그인기능 구현하기

• 로그인 기능의 이해

  • 회원가입 : 이름 , 사는 곳 ,나이 (처음만났을때)
  • 로그인 : 이름 , 사는곳 , 나이 (다시 만났을때)
  • 로그인 이후 : 기억
  • Token : 모든것을 담고있는 데이터

• Firebase란 ?

  • Back-end 를 쉽고 빠르게 구축할수 있는 서비스
    -기능 : cloud storage , hosting , cloud messaging , cloudfirestore , authentication

• 기능구현

• 파이어 베이스 프로젝트 생성

• 

• 파이어 베이스 SDK 설정(물론 내가 조금 바꿔서 업로드하엿다)

  <script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-analytics.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyDdyaycq5asdfaMNE4yEmMb-4QkeoWs",
    authDomain: "easy-login-8d901.firebaseapp.com",
    projectId: "easy-login-8d901",
    storageBucket: "easy-login-8d821.appspot.com",
    messagingSenderId: "1010577508345",
    appId: "1:1010577508335:web:b7877b33ce6ac791c4181a",
    measurementId: "G-J56M51XVTC"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  	</script>
   

• html

  <form action="">
  <h1> 회원가입 </h1>
  <div> email : <input type="email" id="signUpEmail"/></div>
  <div> password : <input type="password" id="signUpPassword"/></div>
  <button type="submit" id="signUpButton"> 회원가입 하기 </button>
  <button> 로그인 가기 </button>
  </form>
    ```
  <form action="">
  <h1> 로그인 </h1>
  <div> email : <input type="email" id="signInEmail"/></div>
  <div> password : <input type="password" id="signInPassword"/></div>
  <button type="submit" id="signInButton"> 로그인 하기 </button>
  <button> 회원가입 하러 가기 </button>
  </form>
  

• Scrpit

<script type="module">
  " 파이어 베이스 연동 "
  console.log("app",app)
  console.log("파이어 베이스 연동 성공")

  import {getAuth,createUserWithEmailAndPassword , signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-auth.js";

  const auth = getAuth();

  document.getElementById('signUpButton').addEventListener('click',(e)=>{
      e.preventDefault()
      const signUpEmail = document.getElementById('signUpEmail').value
      const signUpPassword = document.getElementById('signUpPassword').value
      console.log(signUpEmail,signUpPassword)

      createUserWithEmailAndPassword(auth, signUpEmail, signUpPassword)
          .then((userCredential) => {
              console.log(userCredential)
              const user = userCredential.user;
          })
          .catch((error) => {
              console.log('error')
              const errorCode = error.code;
              const errorMessage = error.message;
          });
  })
  document.getElementById('signInButton').addEventListener('click',(e)=>{
      e.preventDefault()
      const email = document.getElementById('signInEmail').value
      const password = document.getElementById('signInPassword').value
      console.log(email,password)

      signInWithEmailAndPassword(auth, email, password)
          .then((userCredential) => {
              console.log(userCredential)
              const user = userCredential.user;
          })
          .catch((error) => {
              console.log('로그인 실패')
              const errorCode = error.code;
              const errorMessage = error.message;
          });

  })
</script>

• UI 보다는 기능에 중점을 두었던 수업이다!(UI는 손안봐서 찔림... ㅋㅋ)

• 

• firebase에 저장또한 잘~된다!

•