[Firebase] Web에서 Email, Google 로그인 사용하기

1. 왼쪽 메뉴에서 Authentication 을 선택해준다.

2. [로그인 방법 설정] 을 누른다.

3. 로그인 방법에서 이메일/비밀번호, Google 로그인 방법을 선택한다.

접속 테스트를 해볼 이메일 계정 하나를 생성한다.

4. 프로젝트 파일에서 app.js 파일을 연 후 2 줄을 추가해준다.

const mainRouter = require('./routes/main');

app.use('/main', mainRouter);

5.main.js 를 routes 에, main.ejs 를 views 에 생성한다.

6. main.js 에 firebase 관련 변수들을 선언해준다.

6. main.js 에 firebase 키값을 넣어주며 초기화 시켜준다.

firebase 키 값들 얻는 법

firebase overview 웹 화면에서 [프로젝트 설정] 을 눌러준다.

[일반] 탭을 누른 후 [내 앱] 항목의 자신의 웹 앱 프로젝트을 누른다.

그리고 Firebase SDK snippet 의 구성 값을 복사하여 main.js 의 "firebase 키 값" 부분에 넣어준다.

만약 자신의 웹 앱을 눌렀을때 Firebase SDK snippet 항목이 보이지 않는다면 잠시만 기다리면 등장한다.

[서비스 계정] 탭을 클릭 후 Firebase Admin SDK 의 [새 비공개 키 생성] 버튼을 클릭해준다.

json 파일이 하나 다운로드 받아지면 json 파일을 연 후 그 안의 내용을 복사하여 main.js 의 "firebase Admin 키 값" 부분에 붙여넣어준다.

위의 firebase 키 값에서 databaseURL: 과 storageBucket: 복사 한 후 firebase Admin 키 값 아래에 붙여넣어준다.

7. 로그인 화면을 구현한다.

views 폴더에 main/index.ejs, login.ejs 를 생성해준다.

main.js 에 진입점과

router.get('/login', function(req, res, next) {
  // 구글 로그인 시도
  res.render('main/login');
});

이메일 로그인을 처리해주는 부분을 만들어준다.

router.post('/login_', function(req, res, next) {
  // 유저가 입력한 정보가 맞는지 체크
  firebase.auth().signInWithEmailAndPassword(req.body.id, req.body.passwd)
	.then(function(firebaseUser)
	{
		res.render('main/index', {title : "이메일 로그인 완료!!!"});
	}).catch(function(err) // 로그인 실패시 다시 로그인 창으로...
	{
    	console.log(err);
		res.redirect('login');
	});
});

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Test & MySite</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-app.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/7.4.0/firebase-analytics.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-auth.js"></script>

<!-- 이메일/비밀번호 로그인 -->
<div id="main">
    <form name="form1" action="login_" method="POST">
            <table border="1" style="width:600px">
                <colgroup>
                    <col width='15%' />
                    <cl width='*%' />
                </colgroup>
                <tbody>
                    <tr>
                        <td>ID</td>
                        <td><input type="text" name="id" size="20" maxlength="20"</td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" name="passwd" size="20" maxlength="20"</td>
                    </tr>
                </tbody>
            </table>
            <a href="#" onclick="form1.submit()">Email Login</a>
            <input type="button" id="liGoogleBtn" value="Google Login">
    </form>
</div>

    <!-- 구글 로그인 부분 -->
    <script>

// firebase 중요 설정 키값
const firebaseConfig = {
  "firebase 키 값"
};
// firebase 초기화
firebase.initializeApp(firebaseConfig);
//firebase.analytics();

      var gmail = document.getElementById("liGoogleBtn");
      gmail.addEventListener('click', e => {
        var provider = new firebase.auth.GoogleAuthProvider();

        firebase.auth().signInWithPopup(provider).then(function(result) {
          var token = result.credential.accessToken;

          var user = result.user;

          console.log("Token : " + token + " user : " + user);
          console.log("구글 로그인 완료!!!");
        }).catch(function(err) {
          console.log(err);
        });
      });
    </script>
</body>
</html>

구글 로그인에 필요한 Firebase 키값은 apiKey 와 authDomain 이다.
만약 Google 애널리틱스(firebase.analytics()) 를 사용할 경우 Firebase 키값인 projectId, appId, measurementId 를 추가해야한다.

그리고 Firebase API 키의 경우 본질적으로 공개정보이며 프로젝트의 고유 식별자 일뿐이다.

자세한 내용은 Firebase 보안 규칙 을 참고하자.

node.js 서버를 실행한 후 http://localhost:3000/main/login 로 접속한다.

ID, Password 에 위에서 생성한 이메일 계정을 입력 후 [Email Login] 을 클릭 시 이메일 로그인을 한다.

[Google Login] 을 클릭 시 구글 로그인 팝업창이 나오며 로그인을 진행한다.

구글 로그인을 할 경우

사용자 계정 목록에 구글 아이디가 새롭게 등장한다.

로그인 한 유저를 관리하는 법은 https://firebase.google.com/docs/auth/web/manage-users?hl=ko 에 자세한 설명이 되어있다.

firebase.auth().currentUser 가 비어있는 안 비어있는지 체크함으로써 접속했는지 안 했는지 체크가 가능하다.

if (firebase.auth().currentUser)
{
  로그인한 유저가 있음
}
로그인 한 유저가 없음

참조 링크

https://firebase.google.com/docs/auth/web/google-signin?hl=ko

자바스크립트에서 Google 로그인을 사용하여 인증하기 | Firebase

앱에 Google 로그인을 통합하여 사용자가 Google 계정을 통해 Firebase에 인증하도록 할 수 있습니다. Google 로그인을 통합하려면 Firebase SDK를 사용해 로그인 과정을 진행해도 되고, Google 로그인 과정을 수동으로 진행하고 그 결과인 ID 토큰을 Firebase에 전달해도 됩니다. 시작하기 전에 자바스크립트 프로젝트에 Firebase를 추가합니다. Firebase Console에서 Google 로그인을 사용 설정합니다. F

firebase.google.com

'Programming > Firebase' 카테고리의 다른 글

[Firebase] Hosting 사용하기 (0)	2019.11.26
[Firebase] Web에서 Storage 사용하기 (2)	2019.11.20
[Firebase] Web에서 Database 사용하기 (0)	2019.11.18
[Firebase] Node.js 개발 환경 구축 (0)	2019.11.18
[Firebase] 시작하기 (0)	2019.11.18