Programing

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

crosscheck 2020. 10. 29. 07:50
반응형

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


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

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

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


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.
  }
});

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

var user = firebase.auth().currentUser;

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

이 시나리오에서는 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"이됩니다.

그게 필요한 전부입니다.

문안 인사


이다 수없는 사용자가인지 말할 것입니다 작업은 약하지만 거기, 페이지가 로딩이 시작될 때 서명.

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

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

firebase onAuthStateChanged이벤트는 페이지로드 후 2 초 후에 실행됩니다.

// optimistically assume user will be logged in automatically
// e.g. if (!!localStorage.getItem('myPage.expectSignIn')) showDialog()

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    localStorage.setItem('myPage.expectSignIn', '1')
  } else {
    localStorage.removeItem('myPage.expectSignIn')
    // Implement logic to trigger the login dialog here or redirect to sign-in page.
    // 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가 사용하는 것과 동일한 것을 사용하는 것입니다.

For example when user logs in, firebase stores below details in local storage. When user comes back to the page, firebase uses the same method to identify if user should be logged in automatically.

enter image description here

ATTN: As this is neither listed or recommended by firebase. You can call this method un-official way of doing this. Which means later if firebase changes their inner working, this method may not work. Or in short. Use at your own risk! :)


use Firebase.getAuth(). It returns the current state of the Firebase client. Otherwise the return value is nullHere are the docs: https://www.firebase.com/docs/web/api/firebase/getauth.html


First import the following

import Firebase
import FirebaseAuth

Than

    // Check if logged in
    if Auth.auth().currentUser == nil {
      // Do smth if user is not logged in   
    }

참고URL : https://stackoverflow.com/questions/37873608/how-do-i-detect-if-a-user-is-already-logged-in-firebase

반응형