Firebase Authentication : 가입기능 만들기

0:00 이미지 업로드 성공/실패시 코드 실행하려면

4:18 이미지 url도 함께 DB에 저장

6:27 가입기능만들기

오늘의 숙제 : 

index.html 메인페이지에 상품 이미지도 잘 보여주도록 코드짜오십시오.

Firebase 쓰시면 가입기능에 대한 이해 그런거 필요없이

그냥 다짜고짜 회원가입기능을 만들 수 있습니다.

저번시간에 이미지 업로드한걸 DB에 저장하는 것부터 마무리해보도록 합시다. 

이미지업로드 성공시/실패시 뭔가 코드를 실행하려면

하단과같은 코드를 작성합니다.

그냥 Firebase Storage 사용법일 뿐이라 복붙만 합시다. 

업로드작업.on( 'state_changed', 
    // 변화시 동작하는 함수 
    null, 
    //에러시 동작하는 함수
    (error) => {
      console.error('실패사유는', error);
    }, 
    // 성공시 동작하는 함수
    () => {
      업로드작업.snapshot.ref.getDownloadURL().then((url) => {
        console.log('업로드된 경로는', url);
      });
    }
);

업로드작업.on( 'state_changed') 이걸 붙이면 파일 업로드작업 중간에 뭔가 실행이 가능한데

파라미터로 3개까지 함수를 추가할 수 있습니다.

첫째함수는 업로드중 계속

둘째함수는 업로드 실패시

셋째함수는 업로드 성공시

실행됩니다. 둘째 셋째만 써봅시다. 

이미지 업로드가 성공하면 이미지가 저장된 url도 알 수 있는데

그건 업로드작업.snapshot.ref.getDownloadURL() 이렇게 쓰면 알 수 있습니다. 

그리고 그 url을 DB에 함께 저장하면 이미지 저장기능 끝입니다.

1. 이미지 저장 성공시

2. 업로드된 이미지의 url과 함께 DB에 게시물 저장하라고 코드 알아서 짜오십시오. 

가입기능을 만들기 위해 login.html 만들기

HTML 파일 하나만 만들어봅시다. 파일명은 login.html 이 어떨까요. 

그리고 기존에 있던 html파일에 있던 내용을 그대로 복붙하고 필요없는거 지웁시다.

그리고 가입 폼 디자인이 필요한데 그건 만들어왔습니다.

<div class="container mt-3">
    <div class="mb-3">
      <input type="text" class="form-control" placeholder="name" id="name-new">
    </div>
    <div class="mb-3">
      <input type="email" class="form-control" placeholder="email" id="email-new">
    </div>
    <div class="mb-3">
      <input type="password" class="form-control" placeholder="pw" id="pw-new">
    </div>
    <button type="submit" class="btn btn-primary" id="register">가입하기</button>
 </div>

이거 복붙하면 이름, 이메일, 패스워드 입력란이 이쁘게 생깁니다. 디자인 끝

Firebase 회원가입기능 만들고싶으면 

firebase.auth().createUserWithEmailAndPassword(abc@naver.com, 123456)

이거 한줄쓰면 됩니다.

소괄호안에 유저가 입력한 이메일, 패스워드를 입력하면 계정 만들어줍니다.

그래서 님들이 짤 코드는 이게 끝입니다. 

1. 버튼누르면

2. 사용자가 입력한 이메일, 패스워드를 저 함수에 집어넣으셈

3. 성공하면 콘솔창에 출력해보기?

자바스크립트 기초 알면 누구나 가능하니까 빨리 알아서 해보십시오. 

JS 기초강의 6강까지 듣고오셔도 알아서 할 수 있을 듯

$('#register').click(function(){
  
  var 이메일 = $('#email-new').val();
  var 패스워드 = $('#pw-new').val();

  firebase.auth().createUserWithEmailAndPassword(이메일, 패스워드).then((result)=>{
    console.log(result.user)
  })
})

오늘의 상식 : 

유저정보를 출력해보면 { uid : F6VImsrwdvMLOV4Swfr } 이런게 저장되어있는데

uid가 유저의 영구번호라고 생각하면 되겠습니다. 

이걸로 유저를 구분합니다.