이전 글에서, 나는 OAuth를 통해 로그인할 수 있도록 Firebase를 설정했다.이것은 이렇게 하는 데 필요한 최저 코드를 대표하지만, 여전히 많은 절차가 필요하다. 그 중에서 가장 중요한 것은 로그인한 모든 사용자에게 우리는 로그인 과정에서 트위터 API 표시를 받지만, 이러한 표시는 자동으로 저장되지 않는다는 것이다.나중에 로봇이 트윗을 보낼 때 제공된 API 토큰을 사용할 수 있도록 저장해야 한다.
이 글과 일치하는 제출은 계속할 수 있습니다. here

Firestore 구성 파일 저장소

API 키는 등록 전송 값에서만 사용할 수 있으므로 여기에 저장해야 합니다.코드는 store/auth/index.ts 에 위치하고 관련 텍스트는 다음과 같이 전재됩니다.

  login({commit}) {
    const provider = new firebase.auth.TwitterAuthProvider();
    console.log("start login");
    firebaseAuth.signInWithPopup(provider)
    .then((firebaseUserCredential: firebase.auth.UserCredential) => {

      const uid = firebaseUserCredential?.user?.uid;
      const profile: any = firebaseUserCredential?.additionalUserInfo?.profile; // eslint-disable-line @typescript-eslint/no-explicit-any
      const credential: any = firebaseUserCredential?.credential; // eslint-disable-line @typescript-eslint/no-explicit-any

      if(!uid || !profile || !credential) {
        throw new Error();
      }

      const userData: UserData = {
        profileImage: profile.profile_image_url_https,
        name: profile.name,
        handle: profile.screen_name,
        id: profile.id_str,
        accessToken: credential.accessToken,
        secret: credential.secret
      }
      commit('setUid', uid);
      commit('setUserData', userData);

      return firestore.collection("users").doc(uid).set(userData, { merge: true });
    }).catch((error) => {
      console.error(error);
    });
  },

등록이 완료되면 (완료되지 않으면 .catch() 에 떨어지고, 프로필 데이터와 증빙 데이터를 꺼내 Firestore에 삽입합니다.응용 프로그램이 사용할 수 있도록 uid와 프로필을 vuex 상태로 제출합니다.
Firstore의 UI 콘솔에서 데이터를 볼 수 있습니다.

자체 단백질

Autologin을 실현하기 위해서 우리는 약간 이상한 일을 해야 한다. (나는 이것이 현재의 가장 좋은 실천이라고 확신하지 못한다. 지금은 더 좋은 방법이 있을 수 있으니 잠시 후에 연구를 진행해야 한다.)Firebase 라이브러리가 로드되면 자동으로 로그인할 수 있습니다.그러나 Vue 인스턴스는 로그인되지 않은 상태로 로드됩니다.따라서 먼저 Firebase를 로드한 다음 Vue를 로드해야 합니다.좀 이상하지만 편리한 방법은 main.ts 의 Vue 실례화를 다음 코드의 주 입구점으로 변경하는 것이다.

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
});

가다

const unsubscribe = auth.onAuthStateChanged(() => {
  new Vue({
    router,
    store,
    vuetify,
    render: h => h(App),
    created () {
      auth.onAuthStateChanged((firebaseUser: firebase.User | null) => {
        if (firebaseUser && !store.getters['auth/isAuthenticated']) {
          store.dispatch('auth/autoLogin', firebaseUser)
        }
      })
    }
  }).$mount('#app');
  unsubscribe()
})

이것은 OnAuthStateChanged에서 실행할 수 있도록 Firebase의 Auth 모듈에 새 함수를 등록하는 것입니다. Firebase가 불러오기가 완료되면 이렇게 합니다.그리고 이 함수는 세 가지 일을 완성한다.

Vue 객체 인스턴스화...

내부에도 created()lifecycle hook에 자신의 신분 검증 상태 탐지기를 등록하여 Vue가 autologin

을 실행할 수 있도록 한다.

우리가 방금 등록한 첫 번째 전화를 취소합니다.나는 한참이 걸려서야 이해했지만, auth.onAuthStateChanged() 함수가 되돌아왔습니다. 이 함수를 호출해서 취소할 수 있습니다.우리는 이 리셋을 const unsubscribe 에 저장한 다음, 리셋 내부에서 그것을 호출할 것이다.내가 그것을 처음 보았을 때, 이 이상하게 보이는 역인용은 나를 순환에 빠뜨렸다.

실제 autologin이 시작되면 auth/autoLogin라는 vuex 작업을 다음과 같이 보냅니다.

  autoLogin({commit}, firebaseUser: firebase.User) {
    const uid = firebaseUser.uid;

    return firestore.collection("users").doc(uid).get()
    .then(doc => {
      if (doc.exists) {
        commit('setUserData', doc.data());
        commit('setUid', uid);
      }
    })
  },

FirebaseonAuthStateChanged() 함수는 Firebase 사용자 프로파일을 사용하여 콜백을 트리거합니다.그런 다음 UID를 사용하여 Firestore 구성 파일 데이터를 가져오고 상태를 로드할 수 있습니다.
이렇게!이것이 바로 우리가 필요로 하는 기본적인 오토매틱 술이다.

소방대 규칙

보시다시피 전체 과정에서 우리는 데이터베이스(Firestore를 NoSQL 데이터베이스로 하고 모드를 설정할 필요가 없음)를 언제든지 설정하지 않았습니다. 우리는 전방 응용 프로그램의 라이브러리를 통해 데이터에 직접 접근합니다.하지만...어떤 사용자가 다른 사용자의 개인 자료를 마음대로 방해하는 것을 막을 수 있습니까?
이것은 서버 데이터베이스가 없는 관건적인 특성 중 하나입니다. 접근 규칙입니다.일반적인 오래된 SQL 서버는 일반적으로 사용자 이름/비밀번호의 어떤 조합을 사용하여 보호하고 사용자가 전체 테이블에 접근할 수 있도록 하며, 보통 추가 백엔드 프로그램이 접근 규칙을 강제로 실행해야 한다.Firestore는 Firebase 인증(로그인 데이터는 데이터베이스 요청에 자동으로 포함)과 통합되고 세립도 접근 규칙을 사용하여 로그인 사용자만 데이터에 접근할 수 있으며 이 사용자들은 데이터를 볼 수 있어야 한다.
액세스 규칙은 firestore/firestore.rules 에 저장됩니다.나는 다음과 같은 규칙을 제정했다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isSignedIn() {
      return request.auth != null && request.auth.uid != null && request.auth.uid != "";
    }

    function isUser(uid) {
      return isSignedIn() && request.auth.uid == uid;
    }

    match /users/{uid} {
      allow read, write: if isUser(uid);
    }

    match /{document=**} {
      allow read, write: if false;
    }
  }
}

즉, /users/{uid}가 True로 돌아가면 (삭제를 포함하여) 데이터베이스 경로에 읽기 및 쓰기 권한이 모두 허용됩니다.이 함수는 요청이 유효한 로그인 사용자를 포함하는지, 그리고 이 사용자isUser(uid)가 로그인 사용자의 uid와 일치하는지 확인합니다. (요청 메타데이터를 보고 일부 JWT를 확인하여 유효한 로그인 사용자가 있는지 확인할 수 있습니다.)
이것은 유효한 사용자만 데이터베이스에서 자신의 데이터를 볼 수 있다는 것을 의미한다.다른 사용자(또는 잘못된 사용자)는 다른 사람의 데이터를 보거나 조작할 수 없습니다.uid를 사용하여 이러한 규칙을 배치할 수 있습니다.
이 기능들은 프로필 저장과 로그인 시스템을 공동으로 구성한다!