자바스크립트에서 커스텀 인증 시스템을 사용하여 Firebase에 인증

사용자가 정상적으로 로그인할 때 커스텀 서명 토큰을 발행하도록 인증 서버를 수정하면 Firebase Authentication에 커스텀 인증 시스템을 통합할 수 있습니다. 그러면 앱이 이 토큰을 받아 Firebase 인증에 사용합니다.

시작하기 전에

자바스크립트 프로젝트에 Firebase를 추가합니다.
다음과 같이 프로젝트의 서버 키를 가져옵니다.
1. 프로젝트 설정의 서비스 계정 페이지로 이동합니다.
2. 서비스 계정 페이지의 Firebase Admin SDK 섹션 하단에서 새 비공개 키 생성을 클릭합니다.
3. 새 서비스 계정의 공개 키/비공개 키 쌍이 자동으로 컴퓨터에 저장됩니다. 이 파일을 인증 서버에 복사합니다.

Firebase에 인증

사용자가 앱에 로그인하면 사용자의 로그인 인증 정보(예: 사용자 이름과 비밀번호)를 인증 서버로 전송하세요. 서버가 사용자 인증 정보를 확인하여 정보가 유효하면 커스텀 토큰을 반환합니다.

인증 서버에서 커스텀 토큰을 받은 후 다음과 같이 이 토큰을 signInWithCustomToken에 전달하여 사용자를 로그인 처리합니다.

WebWeb

import { getAuth, signInWithCustomToken } from "firebase/auth";

const auth = getAuth();
signInWithCustomToken(auth, token)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });auth_sign_in_custom.js

firebase.auth().signInWithCustomToken(token)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });custom.js

다음 단계

사용자가 처음으로 로그인하면 신규 사용자 계정이 생성되고 사용자가 로그인할 때 사용한 사용자 인증 정보(사용자 이름과 비밀번호, 전화번호 또는 인증 제공업체 정보)에 연결됩니다. 이 신규 계정은 Firebase 프로젝트에 저장되며 사용자의 로그인 방법과 무관하게 프로젝트 내의 모든 앱에서 사용자 본인 확인에 사용할 수 있습니다.

앱에서 사용자의 인증 상태를 파악할 때 권장하는 방법은 Auth 객체에 관찰자를 설정하는 것입니다. 그러면 User 객체로부터 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리를 참조하세요.
Firebase Realtime Database와 Cloud Storage 보안 규칙의 auth 변수에서 로그인한 사용자의 고유 사용자 ID를 가져온 후 이 ID를 통해 사용자가 액세스할 수 있는 데이터를 관리할 수 있습니다.

인증 제공업체의 사용자 인증 정보를 기존 사용자 계정에 연결하면 사용자가 여러 인증 제공업체를 통해 앱에 로그인할 수 있습니다.

사용자를 로그아웃시키려면 signOut을 호출합니다.

WebWeb

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js