https://console.cloud.google.com/apis/
Google 클라우드 플랫폼
로그인 Google 클라우드 플랫폼으로 이동
accounts.google.com
firebase로 googleapi 키 만들어 준다.
https://firebase.google.com/?hl=ko
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
terminal에서
npm install firebase
파이어 베이스 설치해준다.
구글에 자동으로 firebase에서 생성된 키가 들어온다 도메인주소랑
Oauth ID 발급은
firebase console에서 -> Authentication->Sign in me 메소드로 이동하고
->새업체정보 추가->사용설정 버튼 활성화(오른쪽이동)->저장버튼 클릭->그러면 자동 발급->그 클라이언트 아이디를 반드시 사용
->API및 서비스로 이동->승인된 자바스크립트 원본에 (localhost:5500과 localhost등록:intellij안됨 포트번호 다름)
->403에러발생, Domain블라블라...클라이언트 ID문제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>구글 로그인-[모듈화사용: type="module"]</title>
</head>
<body>
<!-- type=text/javascript사용하는 경우와 module사용 경우 호환이 안되는 부분이 발생 -->
<!-- ECMAScript6기준으로 작업을 하는가? 와 WWW CommonJS기준으로 작업하는가 -->
<script type="module">
import { firebaseApp } from "../service/firebase.js";
import AuthLogic from "../service/authLogic.js";
console.log(firebaseApp);
const authLogic = new AuthLogic();
console.log(authLogic);
const btnGoogle = document.querySelector("#btnGoogle");
btnGoogle.addEventListener("click", (event) => {
//파라미터에 event넣어줌
/* button태그 사용시 디폴트 타입이 submit이어서 폼 전송이 일어나게 되며
이럴경우 해당 페이지가 리플레쉬가 발생함에 따라 이상동작이 발생하므로 반드시
button태그로 click이벤트 처리시에는 주의할 것 */
// console.log(e.target+e.currentTarget);//좌표찍을때
event.preventDefault();
authLogic.login("Google").then((snapshot) => {
console.log(snapshot);
});
});
//btnGoogle.onClick 은 한번만 버튼 클릭되므로 쓰지 않는다.
</script>
<button id="btnGoogle">구글로그인</button>
</body>
</html>'학원수업 > 2월' 카테고리의 다른 글
| 02/08 jQuery (0) | 2023.02.08 |
|---|---|
| 02/07 48회차 Ajax, 비동기 통신 (0) | 2023.02.07 |
| 02/03 47회차 수업 (0) | 2023.02.03 |
| 02/02 JavaScript (forEach, filter) (0) | 2023.02.02 |
| 02/01 naver API 이용신청하기 (0) | 2023.02.01 |
댓글