이번엔 Nodemailer와 GMail + G Oauth2.0을 활용해 Contact 폼을 작성하려고한다. 가장 먼저 해야할 일은 Google 개발자 콘솔에서 프로젝트를 생성해야한다.

Google Oauth 2.0 설정

프로젝트 생성

Google 개발자 콘솔에 접속하여 상단 네비게이션 바 오른쪽에 위치한 부분을 클릭해서 프로젝트를 생성해준다.

프로젝트 명을 짓고 확인 이후에 다시 열어서 해당 프로젝트로 전환한다.

OAuth 동의 화면

왼쪽 사이드 네비게이션에 API 및 서비스 선택

OAuth 동의화면을 클릭한다. 사용자 인증 정보를 클릭해도 반드시 거쳐야하는 절차이기 때문에 먼저 해놓자..

사용자 유형을 외부를 선택해준다.

앱 정보는 다른건 굳이 건들 필요없이 이 두가지만 작성해준다.

범위 설정은 아직은 필요하지 않으며, 추후에 다룰 내용이기 때문에 이 부분은 Skip!, 저장 후 계속 클릭

테스트 할 사용자에서는 본인 이메일을 작성해 주고 다음으로 넘어간다. 추가적인 테스트 할 사용자가 있으면 추가해주면 된다.

추가 했으면 저장 후 계속

사용자 인증 정보

Mail 통신을 위해 거쳐야하는 절차이며 추후에 소셜 로그인 기능을 구현할때도 필요한 Oauth2.0 클라이언트 ID를 생성해주자.

왼쪽 사용자 인증 정보를 선택해준다.

그리고 상단에 보이는 + 사용자 인증 정보 만들기를 클릭하면 카테고리가 뜨는데 2두번쨰 OAuth 클라이언트 ID를 클릭한다.

웹에서 Mail을 전송하는 프로젝트이므로 웹 어플리케이션을 선택 후 원하는 이름을 작성한다

이 부분은 생략하고

해당 주소를 복사하여 넣어준다. https://developers.google.com/oauthplayground
오타나 잘못입력하면 OAuth Playground에서 URI 에러 발생을 구경할 수 있다.

그리고 만들기 클릭

클라이언트 ID와 Serect 번호를 제공해준다. 유출안되게 조심하자.

Gmail API 사용

다시 왼쪽에 라이브러리 클릭

검색에 Gmail을 입력하여 검색하게되면 2개의 API가 등장하는데 아래의 Gmail API 클릭

사용 버튼을 클릭해준다.

이제 Gmail API를 사용할 수 있다.

OAuth 2.0 Playground 등록

가장 먼저

https://developers.google.com/oauthplayground/

이 사이트에 접속한다.

상단 오른쪽을 보면 톱니바퀴를 클릭 해준다.

Use your own OAuth credentials을 체크하게되면 이미지처럼 열리는데

OAuth 2.0 클라이언트 ID를 생성했을 때 클라이언트 ID와 비밀번호를 붙여넣어준다.

그리고 왼쪽에

https://mail.google.com/을 입력하거나

아니면 Gmail API v1을 직접 찾아서 mail.google.com/을 선택한 다음

Authorize APIs를 클릭한다.

순서대로 차례 차례 진행해주면 된다.

인증 코드를 발급 받게 되는데 Exchange authorization code for tokens 를 눌러 아래의 두 토큰을 받아야한다.

Access Token과 Refresh token을 발행받아야 하는 이유는
Gmail에 메일을 전달하기 위해서는 server 파일에 config나 .env 환경 변수로 저장해 사용해야한다.