사용자가 이미 Firebase에 로그인했는지 어떻게 감지하나요?


104

Google 로그인을 위해 내 자바 스크립트 파일에서 firebase 노드 API를 사용하고 있습니다.

firebase.initializeApp(config);
let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);

이것은 잘 작동하며 사용자는 Google 자격 증명으로 로그인 할 수 있습니다. 사용자가 페이지를 다시 방문하면 팝업이 다시 열리지 만 이미 로그인했기 때문에 사용자의 개입없이 팝업이 닫힙니다. 팝업을 표시하기 전에 이미 로그인 한 사용자가 있는지 확인할 수있는 방법이 있습니까?

답변:


115

https://firebase.google.com/docs/auth/web/manage-users

인증 상태 변경 관찰자를 추가해야합니다.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

3
이것은 나에게 일관성이 없습니다. stackoverflow.com/questions/39395158/...
댄 P.에게

2
onAuthStateChanged를 사용하여 사용자가 새 사용자인지 알 수있는 방법이 있습니까?
Brennan

예,하지만 onAuthStateChanged. 4.6.0에 추가되었습니다. firebase.google.com/support/release-notes/js#4.6.0 로그인 방법 또는 currentUser.metadata(마지막 로그인 시간 및 생성 시간) 에서 가져올 수 있습니다 ...
bojeil

@bojeil 나는이 방법에 대한 경고가 있다고 생각합니다. 이 코드를 한 페이지에 넣을 수 있으며 해당 페이지에 있지 않아도 트리거됩니다. AuthState가 변경되면 트리거됩니다. 다른 페이지에서 변경되면 원치 않을 때 효과적으로 트리거됩니다. 적어도 그것은 지금 나에게 일어나고있는 일입니다.
thevengefulco 2011

1
다른 탭에서 로그인 이벤트를 감지합니다. 의도 한대로 작동합니다. Firebase 인증은 여러 창에 로그인 이벤트를 전파합니다.
bojeil

84

currentUser 가 있는지 확인할 수도 있습니다.

var user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

8
이것은 즉시 로그인 한 후에도 나를 위해 null을 반환합니다.
Aarmora

8
이상합니다. 저에게 효과적입니다. 아마도 auth가 비동기이고 _ currentUser_가 아직 업데이트되지 않았기 때문일 수 있습니다.
Daniel Passos

1
문서에서 : auth 개체가 초기화를 완료하지 않았기 때문에 currentUser도 null 일 수 있습니다. 관찰자를 사용하여 사용자의 로그인 상태를 추적하는 경우이 경우를 처리 할 필요가 없습니다.
cheshireoctopus

당신은 그것에 의지 할 수 없습니다. 공식 문서 참조 : "getCurrentUser가 null이 아닌 값을 반환하는 경우가 있습니다 ..."
Andrew

null이 발생하면 아직 초기화되지 않았기 때문일 수 있습니다.
Arnaldo Capo

28

이다 수없는 사용자 여부를 알려 의지 작업은 약하지만 거기, 페이지가 로딩이 시작될 때 서명.

당신은 할 수 있습니다 마지막으로 인증 상태를 기억 세션 사이에 탭 사이를 유지하는 로컬 스토리지에.

그런 다음 페이지가로드되기 시작하면 사용자가 자동으로 다시 로그인 될 것이라고 낙관적으로 가정하고 확신 할 수있을 때까지 (즉, onAuthStateChanged실행 후 ) 대화를 연기 할 수 있습니다 . 그렇지 않으면localStorage 키가 비어 있으면 즉시 대화 상자를 표시 할 수 있습니다.

firebase onAuthStateChanged이벤트는 페이지로드 후 약 2 초 후에 시작됩니다.

// User signed out in previous session, show dialog immediately because there will be no auto-login
if (!localStorage.getItem('myPage.expectSignIn')) showDialog() // or redirect to sign-in page

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User just signed in, we should not display dialog next time because of firebase auto-login
    localStorage.setItem('myPage.expectSignIn', '1')
  } else {
    // User just signed-out or auto-login failed, we will show sign-in form immediately the next time he loads the page
    localStorage.removeItem('myPage.expectSignIn')

    // Here implement logic to trigger the login dialog or redirect to sign-in page, if necessary. Don't redirect if dialog is already visible.
    // e.g. showDialog()
  }
})



나는 이것을 Reactreact-router 와 함께 사용 하고 있습니다. 위의 코드 componentDidMount를 내 앱 루트 구성 요소에 넣었습니다 . 거기에, 렌더링에서PrivateRoutes

<Router>
  <Switch>
    <PrivateRoute
      exact path={routes.DASHBOARD}
      component={pages.Dashboard}
    />
...

그리고 이것이 내 PrivateRoute가 구현되는 방법입니다.

export default function PrivateRoute(props) {
  return firebase.auth().currentUser != null
    ? <Route {...props}/>
    : localStorage.getItem('myPage.expectSignIn')
      // if user is expected to sign in automatically, display Spinner, otherwise redirect to login page.
      ? <Spinner centered size={400}/>
      : (
        <>
          Redirecting to sign in page.
          { location.replace(`/login?from=${props.path}`) }
        </>
      )
}

    // Using router Redirect instead of location.replace
    // <Redirect
    //   from={props.path}
    //   to={{pathname: routes.SIGN_IN, state: {from: props.path}}}
    // />

이걸 도와 주 시겠어요? 답변 상단에있는 자동 로그인 리디렉션을 시도했지만 이제 제거 할 수없는 것 같습니다. 내 로컬 저장소를 완전히 지 웠지만 지속적인 리디렉션으로 인해 로그 아웃 된 내 Firebase 사이트에 여전히 액세스 할 수 없습니다.
hego64

@ hego64 실제로 firebase 앱에서 로그 아웃 했습니까? 이 솔루션은 로그인을 수행하지 않습니다. 사용자가 이전 세션에서 로그 아웃하지 않은 경우에만 로그인 양식을 건너 뛸 수 있습니다. / 편집 : 리디렉션 루프에 있습니까? 답변을 업데이트하겠습니다.
Qwerty

예, 더 명확해야했습니다. 리디렉션 루프에 갇혀있었습니다. 로그 아웃하고 앱으로 돌아가는 대신 로그인 페이지로 바로 돌아갔습니다. 이전 배포로 롤백하여 문제를 해결할 수 있었지만 그 외에는 문제를 해결하기 위해 무엇을해야할지 모르겠습니다.
hego64

1
@ hego64 로그인하지 않은 사용자는 자유롭게 돌아 다닐 수 없으므로 로그인 페이지로 리디렉션하는 것은 정확하지만 인증없이 사용할 수있는 경로가있는 경우 논리를 라우터로 이동해야합니다. 또는 내 PrivateRoute 래퍼 예제에서와 같이 특정 경로 대신. 따라서 사용자가 제한된 페이지에 있고 로그 아웃하면 로그인 페이지로 리디렉션됩니다. 다른 경로에는이 논리가 구현되지 않습니다.
Qwerty

나는 이것에 약간 붙어 있었다 ...이 방법은 꽤 잘 작동합니다. 감사합니다.
spetz83

17

이 시나리오에서는 onAuthStateChanged () 함수를 사용할 필요가 없습니다.

다음을 실행하여 사용자가 로그인되었는지 여부를 쉽게 감지 할 수 있습니다.

var user = firebase.auth().currentUser;

"null 반환"문제에 직면 한 사용자는 firebase 호출이 완료 될 때까지 기다리지 않기 때문입니다.

페이지 A에서 로그인 작업을 수행 한 다음 페이지 B를 호출한다고 가정 해 보겠습니다. 페이지 B에서 다음 JS 코드를 호출하여 예상되는 동작을 테스트 할 수 있습니다.

  var config = {
    apiKey: "....",
    authDomain: "...",
    databaseURL: "...",
    projectId: "..",
    storageBucket: "..",
    messagingSenderId: ".."
  };
  firebase.initializeApp(config);

    $( document ).ready(function() {
        console.log( "testing.." );
        var user = firebase.auth().currentUser;
        console.log(user);
    });

사용자가 로그인되면 "var user"에 예상 JSON 페이로드가 포함되고, 그렇지 않은 경우 "null"이됩니다.

그게 전부입니다.

문안 인사


3
@Mauricio Silvestre 맞나요? 사용하면 firebase.auth.currentUser로그인 여부에 관계없이 undefined가 반환됩니다. auth () 만 로그인하면 올바른 결과를 반환합니다.
tsujp

5

또 다른 방법은 firebase가 사용하는 것과 동일한 것을 사용하는 것입니다.

예를 들어 사용자가 로그인하면 firebase는 아래 세부 정보를 로컬 저장소에 저장합니다. 사용자가 페이지로 돌아 오면 Firebase는 동일한 방법을 사용하여 사용자가 자동으로 로그인해야하는지 확인합니다.

여기에 이미지 설명 입력

ATTN : 이는 firebase에서 나열하거나 권장하지 않습니다. 이 방법을 비공식적 인 방법으로 호출 할 수 있습니다. 즉, 나중에 firebase가 내부 작업을 변경하면이 방법이 작동하지 않을 수 있습니다. 또는 간단히 말해서. 자신의 책임하에 사용하십시오! :)


5

이것은 작동합니다 :

async function IsLoggedIn(): Promise<boolean> {
  try {
    await new Promise((resolve, reject) =>
      app.auth().onAuthStateChanged(
        user => {
          if (user) {
            // User is signed in.
            resolve(user)
          } else {
            // No user is signed in.
            reject('no user logged in')
          }
        },
        // Prevent console error
        error => reject(error)
      )
    )
    return true
  } catch (error) {
    return false
  }
}

1

익명의 사용자와 이메일로 로그인 한 사용자를 허용하는 경우를 사용할 수 firebase.auth().currentUser.isAnonymous있으며 이는 true또는 false.



-3

먼저 다음을 가져옵니다.

import Firebase
import FirebaseAuth

그때

    // Check if logged in
    if (Auth.auth().currentUser != null) {
      // User is logged in   
    }else{
      // User is not logged in
    }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.