본문 바로가기
ETC

Firebase 구글 인증하기

by Wilkyway 2021. 7. 29.

 

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 구글 인증하기  (0) 2021.07.29
Firebase API 만들기  (0) 2021.07.27
Vivaldi Browser 사용기  (0) 2021.07.02
Heroku 기본 사용법  (0) 2021.06.14

댓글0