728x90
반응형
1. 로그인 버튼 만들기
<body>
<button class="bt-login btn-primary">Login</button>
<button class="bt-logout btn-danger">LogOut</button>
</body>/******************************* 글로벌 설정 ********************************/
var auth = firebase.auth(); //firebase의 auth(인증)모듈을 불러온다.
var googleAuth = new firebase.auth.GoogleAuthProvider(); //구글로그인 모듈을 불러온다.
/******************************* 사용자 함수 *******************************/
/******************************* 이벤트 등록 ******************************/
$('.bt-login').click(onLoginGoogle);
$('.bt-logout').click(onLogOut);
/******************************* 이벤트 콜백 *****************************/
function onLogOut(){
console.log("hi");
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
}
function onLoginGoogle(){
auth.signInWithPopup(googleAuth);
}2. 로그인 시 로그아웃 버튼만/ 로그아웃 시 로그인 버튼만 보여지게 하기
/******************************* 글로벌 설정 ********************************/
var auth = firebase.auth(); //firebase의 auth(인증)모듈을 불러온다.
var googleAuth = new firebase.auth.GoogleAuthProvider(); //구글로그인 모듈을 불러온다.
var user = null;
/******************************* 사용자 함수 *******************************/
/******************************* 이벤트 등록 ******************************/
auth.onAuthStateChanged(onChangeAuth);
$('.bt-login').click(onLoginGoogle);
$('.bt-logout').click(onLogOut);
/******************************* 이벤트 콜백 *****************************/
function onChangeAuth(r){
user = r;
if(user){
$('.bt-login').hide();
$('.bt-logout').show();
}
else{
$('.bt-login').show();
$('.bt-logout').hide();
}
}
function onLogOut(){
console.log("hi");
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
}
function onLoginGoogle(){
auth.signInWithPopup(googleAuth);
}
로그인 시 이메일 정보와 사용자 사진 불러오기
<div class="info-wrap">
<div class="photo">
<img src="" alt="사진">
</div>
<div class="email"></div>
</div>- img의 사진 크기를 자동으로 조절하여 .photo에 넣어준다.
```css
.info-wrap {
}
.info-wrap .photo {
width: 36px;
height: 36px;
overflow: hidden;
}
.info-wrap .photo img {
max-width: 100%;
height: auto;
display: block;
}
.info-wrap {
}
.info-wrap .photo {
width: 36px;
height: 36px;
overflow: hidden;
}
.info-wrap .photo img {
max-width: 100%;
height: auto;
display: block;
}
```위에서 작성한 함수 onChangeAuth에 넣어준다.
function onChangeAuth(r){
user = r;
console.log(user);
if(user){
$('.info-wrap .email').text(user.email);
$('.info-wrap .photo img').attr('src', user.photoURL);
$('.info-wrap').css('display','flex');
$('.bt-login').hide();
$('.bt-logout').show();
}
else{
$('.info-wrap .email').text('');
$('.info-wrap .photo').attr('src', '//via.placeholder.com/1x1/333/');
$('.info-wrap').css('display','none');
$('.bt-login').show();
$('.bt-logout').hide();
console.log('welcome');
}
}728x90
반응형
'Firebase 호스팅' 카테고리의 다른 글
| firebase 게시판 만들기(6)-읽기 권한 수정하기 (0) | 2023.06.24 |
|---|---|
| firebase 게시판 만들기(5)-게시판에 글쓰기 (0) | 2023.06.23 |
| firebase 게시판 만들기(3)-리얼타임 데이터 베이스 설정하기 (0) | 2023.06.22 |
| firebase 게시판 만들기(2)-라이브 서버 보기 (0) | 2023.06.21 |
| firebase 게시판 만들기(1)-설치 (0) | 2023.06.20 |
댓글