CurateBot은 Twitter와 긴밀하게 통합되므로 Twitter의 OAuth 로그인을 사용하는 것이 좋습니다. 이는 사용자가 계정을 만들고 처리할 추가 사용자 이름/비밀번호를 갖도록 강요할 필요가 없다는 것을 의미하며, 사용자가 로그인만 하면 자신의 계정으로 트윗할 수 있는 권한을 공유할 수 있음을 의미합니다! 편리함의 극치입니다. 이 게시물의 코드는 저장소의 상태와 일치합니다at this commit.

다행스럽게도 Firebase는 이를 위한 지원 기능을 내장하고 있으며 몇 번의 클릭만으로 이를 수행할 수 있습니다. 하지만 먼저 등록해야 합니다.

OAuth 설정

Twitter에서 개발자 계정을 설정한 후 새 프로젝트를 만드는 과정을 거치고 완료되면 일부 API 키가 팝업되어 복사합니다. 그렇게 하면 앱 설정 페이지에서 활성화할 수 있는 OAuth 설정이 있습니다.



동시에 Firebase에서 Twitter 로그인을 활성화합니다.



이 Firebase 화면과 Twitter Oauth 설정 사이에서 Twitter에서 Firebase로 API 키를 교환합니다. Firebase에서 Twitter로의 콜백 URL입니다. 완료되면 내 프로젝트와 Twitter 간에 OAuth를 설정하는 데 필요한 전부였습니다!

로그인 코드 추가

우리 프로젝트에서 공유 상태 관리를 위해 vuex를 사용하고 있으며 사용자 데이터/로그인 기능이 실제로 특정 보기/구성 요소에 해당하지 않기 때문에 vuex에 유지하는 것을 좋아합니다. 약간의 상용구 코드가 필요하지만 핵심 Vuex 모듈( store/auth/index.ts 파일) login 작업은 다음과 같습니다(코드 here 참조):

const actions: ActionTree<AuthState, RootState>= {
  login({commit}) {
    const provider = new firebase.auth.TwitterAuthProvider();
    firebaseAuth.signInWithPopup(provider)
    .then((result: firebase.auth.UserCredential) => {
      commit('setUser', result.user)
    })
  },
}

이것이 기본 로그인에 필요한 전부입니다! firebase 모듈에서 제공하는 기능으로 트위터 로그인 페이지로 바로 연결되는 팝업창을 띄웁니다. 현재 반환된 사용자를 vuex 상태로 저장하고 있지만 Firestore에 프로필 저장소도 만들어야 합니다. 다음 게시물에서 보여드리겠습니다.

이러한 편리함은 Firebase를 사용하는 일반적인 방법입니다. 사용하려면 이러한 흐름이 작동하는 방식과 Firebase에서 이를 사용하는 방식에 대해 약간의 이해가 필요하기 때문에 벅차게 보일 수 있지만(모든 자습서 및 가이드가 잘 설명하지 못하는 것일 수 있음) 일단 이를 해결하면 속도를 크게 높일 수 있습니다. 웹 개발.