1, 2번 과정을 선행한다.
1. Firebase 프로젝트 추가
파베 콘솔 페이지로 들어가서 구글 로그인을 한다. https://console.firebase.google.com/ 그리고, 그림만으로 설명을 끝낼 수 있다. 사실 이 포스트가 필요가 없을 정도지만, 작업기록이다 생각하고 포스
swjman.tistory.com
2. Firebase SDK 를 웹페이지(웹앱)에 추가해보기
파베 콘솔 페이지로 들어간다. https://console.firebase.google.com/ 아까 추가했던 프로젝트를 클릭해 들어간다. 프로젝트 개요(대문) 화면이 나온다. 아래 그림에 표시해둔 태그 모양 아이콘을 클릭한다
swjman.tistory.com
파베 콘솔 페이지로 들어간다.
https://console.firebase.google.com/
처음 인증을 연동하려고 할 때, 아래 그림에서 왼쪽 바에 'Authentication' 을 누르면 '오른쪽' 시작하기 화면이 나온다.
시작하기 버튼을 누르면 아래와 같이 Sign-in 방법을 활성화하는 화면이 나온다. 나는 구글을 사랑하니까 구글 란을 클릭했다.
구글 활성화 탭이 나오는데, 사용 설정을 켜고, 본인의 이메일을 적당히 넣으면, 저장이 활성화되니 눌러준다.
아래처럼 '사용 설정됨'으로 상태가 바뀌었다. 이제, 웹에 어떻게 연동하는지는 문서를 봐야겠다. 우상단의 '문서로 이동' 링크를 눌러 설명서를 보러 가자.
아래와 같이 잘 정리된 가이드 페이지가 나온다. 아래처럼 인증 문서를 보러 따라가자.
따라가면 아래 그림처럼 왼쪽 사이드바가 표시되는데, 그 안에서 '웹 -> Google 로그인' 을 선택해 들어가면 원하는 설명서가 나온다.
이제, 이 설명서가 시키는대로 코딩을 하면 된다. 사실 나는 웹이나 클라우드에 문외한이라 시작도 전에 겁에 질려 있었기에 문서를 보기가 두려웠다. 봐도 이해 못할 것 같았기 때문이다. 하지만, 그냥 생각 없이 쭉 따라가면 거짓말같이 인증 기능이 완성되더라.
팝업인증과 리다이렉션인증에 대한 예제 html 코드를 붙여 놓는다. 그리고, 직접 구동시킬 수 있는 예제를 첨부한다. 그런데, 그냥 html만 실행하면 정책 위반으로(file 프로토콜로 인증시도) 받아주지 않는다. 때문에, 웹서버를 구동해서 접근해야 하기 때문에, 가벼운 웹서버까지 동봉한다.
접근권한을 받기 위한 설정정보는 2번 과정에서 다뤘었다. 그걸 아래 코드에 이용하면 된다.
<html>
<body>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script>
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: // your code,
authDomain: // your code,
projectId: // your code,
storageBucket: // your code,
messagingSenderId: // your code,
appId: // your code,
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var provider = new firebase.auth.GoogleAuthProvider();
function authpop() {
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;
// ...
}).catch(function(error) {
alertmsg = 'errorCode: ' + error.code + '\r\n';
alertmsg += 'errorMessage: ' + error.message + '\r\n';
alertmsg += 'email: ' + error.email + '\r\n';
alertmsg += 'credential: ' + error.credential + '\r\n';
alert(alertmsg);
console.log(alertmsg);
});
}
function authredirect() {
firebase.auth().signInWithRedirect(provider);
firebase.auth().getRedirectResult().then(function(result) {
if (result.credential) {
// 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;
}).catch(function(error) {
alertmsg = 'errorCode: ' + error.code + '\r\n';
alertmsg += 'errorMessage: ' + error.message + '\r\n';
alertmsg += 'email: ' + error.email + '\r\n';
alertmsg += 'credential: ' + error.credential + '\r\n';
alert(alertmsg);
console.log(alertmsg);
});
}
</script>
<button type="button" onclick="authpop()">popup auth</button>
<button type="button" onclick="authredirect()">redirect auth</button>
</body>
</html>
바로 위에서 얘기했지만, 이 코드를 실행하는 걸로는 정책 위반으로 걸려 진행을 할 수 없다. 아래 첨부파일을 받은 후, 안내를 따라가면 예제를 실행해 볼 수 있다.
- 위 첨부파일을 다운 받는다.
- 적당한 곳에 압축을 푼다.
- wwwroot/index.html 을 열어서 firebaseConfig 변수에 권한설정용 정보들을 입력한다.
- build-ini.bat를 한번 실행한다.
- TinyServer.exe 를 실행한 후(오류가 나면 관리자 권한으로 실행), Start Server 버튼을 누른다.
- 웹브라우저를 열고, localhost:8080 으로 접속한다.
위 과정을 따라하면 아래의 페이지가 보이고, 각 버튼을 눌러서 테스틀 해 볼 수 있다. 위 과정에서 만약, 3번을 놓쳤다면 브라우저 캐시를 지우고 재시도 해야 한다. 이 작은서버가 캐시를 깨는 헤더를 포함하지 않기 때문에 변경사항 반영이 안되기 때문이다.
'Tech Study > Firebase' 카테고리의 다른 글
| 4. Firebase DB - Firestore or Realtime Database? (2) | 2021.06.06 |
|---|---|
| 2. Firebase SDK 를 웹페이지(웹앱)에 추가해보기 (0) | 2021.05.17 |
| 1. Firebase 프로젝트 추가 (0) | 2021.05.17 |
| 파이어베이스(Firebase)와 서버리스(Serverless) (2) | 2021.05.16 |
