Vue.js로 Firebase를 시작하겠습니다.사용자 로그인편

Firebase는 몇 가지 로그인 방법을 제공합니다.트위터, 페이스북 등 주류 제품은 이미 쉽게 사용할 수 있다.이번에는 간단하게 만들고 싶은데, auth 설정은 익명 로그인을 허용하고, 사용자는 모두 익명 사용자 로그인 프로그램으로 사용됩니다.

로그인 설정

Authentication 메뉴에서 로그인 메서드에 들어가서 익명을 선택합니다.이렇게 하면 익명으로 로그인할 수 있다.

프론트 데스크 환경의 시작

npm run dev

인증 여부 확인

App.vuecreated에 사용자 인증이 완료되었는지 확인하는 코드를 적으십시오

export default {
  ...
  created () {
    firebase.auth().onAuthStateChanged( user => {
      if (user) {
        // User is signed in.
        console.log('is login.')
      } else {
        // No user is signed in.
        console.log('No user is signed in.')
      }
    })
  },
}

아직 아무것도 하지 않았기 때문에 콘솔No user is signed in.이 나와야 한다.

익명 로그인 기능 구현

인증하지 않으면 아무것도 시작할 수 없으니 익명 로그인 버튼을 한 번 눌러보자.
template 탭에 단추 추가

<button type="button" class="btn btn-default" @click="login">
  匿名ユーザーでログイン
</button>

script 태그로 함수 구현login

export default {
  ...
  methods: {
    login () {
      firebase.auth().signInAnonymously().then(e => {
        // ログイン成功
        console.log(e)
      }).catch((error) => {
        // エラーメッセージ
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log('エラーメッセージ', errorCode, errorMessage)
      });
    },
  }
}

브라우저의 "익명 사용자 로그인"단추를 눌러 보십시오.통신 후 이렇게 돌아오면 로그인에 성공합니다.그리고 로그인하면 로컬 저장소에 정보가 남아 있기 때문에 다시 불러와도 로그인 상태를 유지합니다.

앞으로 모두 로그인한 상태에서 작업을 진행하기 때문에 로그인했는지 확인해 보세요.
Vue.js로 Firebase를 시작하겠습니다.보내보려는 편