본문 바로가기

ETC

Firebase 구글 인증하기

반응형

 

1. 인증방식 추가

2. 앱 추가

프로젝트 개요에서 앱 추가를 진행합니다. 또는 생성된 앱을 클릭하여 SDK 소스추가 부분으로 진행합니다.

 

3. 소스코드 복사

아래의 스크립트 부분을 복사하여 public/index.html 파일에 붙여넣습니다.

<index.html>

<!DOCTYPE html>
<html>
<head>
	<!-- jQuery  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
파이어베이스 웹서버 입니다.


<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>

<!-- 인증 에러시 아래 주석 해제 -->
<!-- <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script> -->

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCnowLA3wkZzoSX9kFHdq615-ZhUvdNj60",
    authDomain: "wjdb-647dc.firebaseapp.com",
    databaseURL: "https://wjdb-647dc-default-rtdb.firebaseio.com",
    projectId: "wjdb-647dc",
    storageBucket: "wjdb-647dc.appspot.com",
    messagingSenderId: "241186966612",
    appId: "1:241186966612:web:9843c62bd2c76613ae71c1",
    measurementId: "G-8HX4QXCKBQ"
  };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);        
firebase.analytics();
</script>
<script src="app.js"></script>
</body>
</html>

<app.js>


// 구글 인증 기능 추가
var provider = new firebase.auth.GoogleAuthProvider();

// 인증하기
firebase.auth().signInWithPopup(provider).then(function(result) {
	// This gives you a Google Access Token. You can use it to access the Google API.
	var token = result.credential.accessToken;
	// The signed-in user info.
	var user = result.user;
	
	console.log(user)		// 인증 후 어떤 데이터를 받아오는지 확인해보기 위함.
// ...
}).catch(function(error) {
	// Handle Errors here.
	var errorCode = error.code;
	var errorMessage = error.message;
	// The email of the user's account used.
	var email = error.email;
	// The firebase.auth.AuthCredential type that was used.
	var credential = error.credential;
	// ...
  console.log(errorCode, errorMessage, email);
});

 

저는 이대로만 진행할 경우 에러가 발생했습니다.

검색하던 중 stackoverflow에 누군가가 firebase-auth.js 파일이 필요하다고 쓴 글이 보여서..

이런 식으로 추가해주었습니다. 그랬더니 정상 작동했습니다. 

 

- 끝 -

반응형

'ETC' 카테고리의 다른 글

Firebase 이미지 저장하기(storage)  (1) 2021.07.30
Firebase 데이터 저장하기  (0) 2021.07.30
Firebase API 만들기  (0) 2021.07.27
Vivaldi Browser 사용기  (0) 2021.07.02
Heroku 기본 사용법  (0) 2021.06.14