포시코딩

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - Vue(1)) 참고 jwt 해석을 위해 모듈 하나를 받아주자 npm install vue-jwt-decode React에서는 jwt-decode를 통해 사용 가능하고 Vue에서는 vue-jwt-decode를 통해 사용 가능하다. 두 모듈 다 사용하지 않고도 jwt를 해석할 수 있는데, parseJwt(token) { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURIComponent(window.atob(base64).split..

Vue project로 만들 폴더에서 아래 코드 실행 vue create . 각각 Y와 걍 엔터 눌러서 설치 진행 설치가 완료되었다. 여기서 우리는 빨간네모쳐진 저 두 파일만 쓸거임 제일 먼저 public/index.html에 아래처럼 코드를 추가해준다. src/App.vue로 와서 다음과 같이 필요없는건 다 지워주고 클라이언트 ID에는 GCP에서 발급 받은 클라이언트 ID를 기입해주면 된다. 위와 같이 코드를 써주면 1차 테스트 준비 완료다. 과정에 대해 설명하자면 index.html에서 불러온 스크립트 때문에 google을 쓸 수 있게 됐고 mounted()를 통해 컴포넌트가 렌더링 되면 G_OAuth_btn를 id로 가진 div가 google.accounts.id.renderButton을 통해 구글..

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1))에서 결과물로 얻은 값은 jwt라고 하는데 jwt는 (Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이라고 한다. 자세한건 아래 블로그 참고 https://velog.io/@khy226/jwt로-로그인-기능-만들기-React-Rails jwt로 로그인 기능 만들기 (React + Rails ) jwt란? JWT(Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이다. velog.io 먼저 이전 포스팅에서 획득한 jwt의 해석을 위해 jwt-decode 설치 npm install ..

Google OAuth2 - React 연동 프로젝트로 사용할 폴더를 생성한 후 해당 폴더로 VSCODE 켜서 리액트 프로젝트화 시켜준다. npx create-react-app . 리액트 프로젝트가 만들어졌고 우리는 여기서 public/index.html src/App.js 이 두 파일만 사용할거임. index.html 파일에서 태그 안 태그 밑에 해당 코드를 작성해준다. 중간에 gsi 키워드가 들어가는게 포인트임. 다른 블로그들처럼 태그 쓰는건 옛날 방식이니 거르면 된다. index.html파일은 이게 끝 App.js 파일을 위와같이 정리해준 뒤 아래 코드를 따라 쓰자 import { useEffect } from 'react' import './App.css'; function App() { func..

프로젝트를 위해 google oauth2 로그인을 구현하던중 수많은 역겨운 수준의 블로그 포스팅들과 그마저 그대로 따라해도 안되는 샘플들 사이에서 위 안내처럼 거의 대부분의 구현 방법을 다룬 글들은 추후 쓰지 않는 방법이 될거란걸 알았다. google 공식 문서에서도 뒤죽박죽인 상황을 보고선 결국 요즘 구글링보다 더 결과에 만족을 느끼는 유튜브에서 원하는 내용을 찾을 수 있었다. 해당 포스팅에선 GCP (Google Cloud Platform) 에서 공통적으로 설정해야하는 부분을 짚고 React와 Vue 각각의 진행 방법에 대해 따로 포스팅할 예정이다. 정리 겸 올리는 글이기 때문에 내가 참고한 영상 그대로 해보고 싶으면 아래 링크를 통해 따라만 하면 React에서 구글 로그인을 구현할 수 있다. htt..