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실행 후 ) 대화를 연기 할 수 있습니다 . 그렇지 않으면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()
}
})
나는 이것을 React 및 react-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}}}
// />답변
이 시나리오에서는 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”이됩니다.
그게 전부입니다.
문안 인사
답변
또 다른 방법은 firebase가 사용하는 것과 동일한 것을 사용하는 것입니다.
예를 들어 사용자가 로그인하면 firebase는 아래 세부 정보를 로컬 저장소에 저장합니다. 사용자가 페이지로 돌아 오면 Firebase는 동일한 방법을 사용하여 사용자가 자동으로 로그인해야하는지 확인합니다.
ATTN : 이는 firebase에서 나열하거나 권장하지 않습니다. 이 방법을 비공식적 인 방법으로 호출 할 수 있습니다. 즉, 나중에 firebase가 내부 작업을 변경하면이 방법이 작동하지 않을 수 있습니다. 또는 간단히 말해서. 자신의 책임하에 사용하십시오! 🙂
답변
이것은 작동합니다 :
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
}
}답변
익명의 사용자와 이메일로 로그인 한 사용자를 허용하는 경우를 사용할 수 firebase.auth().currentUser.isAnonymous있으며 이는 true또는 false.
