INTRO
Google API 에서 지원하는 소셜 로그인 기능을
Vue.js에 적용해보기
| 1. Vue.js 프로젝트 생성 |
--> create 명령어를 통해 vue 프로젝트를 생성한다.
--> 생성 방법은 아래 글 참고
rangsub.tistory.com/82?category=966512
[vue.js] vue.js란? 개발 환경 만들기
Evan you가 만들었다. 2014년 릴리즈를 시작으로 꾸준히 발전하는 자바스크립트 프레임워크. github.com/vuejs/vue vuejs/vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for bu..
rangsub.tistory.com
| 2. google cloud platform 에 접속하여 프로젝트 생성하기 |
-->console.cloud.google.com에 접속하여 프로젝트를 생성.
-->프로젝트 이름을 입력하고 만들기
--> 생성 완료하면 아래와 같은 화면으로 진입.
--> 여기서 OAuth 동의 화면 탭에 진입한다.
-->외부에서 접근 가능해야하므로, [외부] 선택
--> 앱 정보에는 아래와 같이 앱 이름과, 본인 구글 이메일 주소를 입력. 로고는 선택사항
--> 앱 도메인은 공개할 도메인을 입력하라는 의미인듯 하다.
--> 입력하지 않고 넘어가도 괜찮음.
--> 승인된 도메인에는 githubpages 주소를 넣어주었다.
--> localhost:8080 으로 입력하면 안넘어간다.
--> 입력하지 않고 넘어가도 된다.
--> 범위도 아무것도 건드리지 않고 넘어감
--> 생성 직후, 테스트 상태가 되는데 이 때 사용할 테스터 계정을 입력하라는 말.
--> 그냥 넘어가도 된다.
--> 이후 앱 게시 버튼을 통해 프로젝트를 외부로 노출시킨다.
| 3. OAuth2.0 클라이언트 ID 생성하기 |
--> 사용자 인증 정보 탭으로 진입한다.
--> 사용자 인증 정보 만들기 -> OAuth 클라이언트 ID 클릭
--> 웹 어플리케이션을 선택하고, 클라이언트 ID의 이름을 입력한다.
--> 승인된 자바스크립트 원본에는 github pages 의 root 디렉토리를,
--> 승인된 리디렉션 URI에는 github pages의 실제 주소를 입력했다.
--> 리디렉션 되는 곳은 본인이 자유롭게 입력해도 될 것 같다.
-->이후 ID가 만들어진 것을 확인할 수 있다.
| 4. vue.js 에 정보 입력 |
--> public/index.html의 <head>태그 안애 아래와 같이 2줄을 추가해준다.
--> [클라이언트 ID] 부분에는 3번에서 생성한 본인의 클라이언트 ID를 입력하면 된다.
<meta name="google-signin-client_id" content="[클라이언트 ID]" />
<script src="https://apis.google.com/js/platform.js"></script>
--> 이후 본인이 원하는 곳에 아래와 같이 입력한다.
-->정상 구동을 확인한다.
-->로그인 버튼을 클릭하면 정상 동작하는 것을 확인할 수 있고, 콘솔 로그에 정보들이 잘 넘어오는 것도 확인할 수 있다.
-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!
'DevOps > [Firebase]' 카테고리의 다른 글
| [Firebase] Android Kotlin으로 Push(Firebase Cloud Message)기능 사용해보기(Android push using FCM) (0) | 2021.05.19 |
|---|---|
| [Firebase] Vue.js 앱을 Firebase Hosting 기능을 사용하여 배포하기 (0) | 2021.04.02 |
