Next.js | 구글 로그인 구현하기

 

기능 및 플로우는 아래와 같다. 같은 페이지에 추가로 구현하는 것이기 때문!

https://moon-lilac.tistory.com/183

Next.js | 카카오 로그인 구현하기

 

 

1. 구글 클라우드에서 프로젝트 생성

 

 

 

 

만들기 후 API 및 서비스에서 OAuth 동의 화면 눌러주고, 내부말고 외부 선택한다.

그리고 다음으로 넘어가 필수값인 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보를 입력하고 다음으로 넘어간다.

계속 저장후 계속 눌르다가 요약화면 나오면 대시보드로 돌아가기를 눌러준다.

(중간에 범위 부분에서 추가해서 얻어오고 싶은 정보 추가할 수 있음, 나는  email)

 

그리고 사용자 인증정보 메뉴로 들어가, 상단에 +사용자 인증 정보 만들기를 눌러주면

카카오에서도 해봤던 작업들을 쭉 하면된다.

웹애플리케이션을 선택하고, 서버 주소를 입력하고, Redirect URI를 입력해주면 됨.

일단은 localhost:3000 으로 해준다.

 

 

 

그러면 이렇게 클라이언트 ID와 보안비밀번호를 뿅 던져줌!

 

 

 

 

2. 구글로그인 인증화면으로 넘어가기 (서버측에 인가코드 보내기)

나는 redirect URI를 ~/login/google/oauth 이렇게 만들었고, 

가운데 google부분이 동적으로 라우팅하는 부분이다.(인가코드 보낼 때 정보페이지를 공통으로 쓰기 위함)

그래서 google인증화면으로 넘어가는 부분에서 snsType 을 파라미터로 지정해 보내준다.

 

login.tsx

const loginWithGoogle = (snsType: string | null) => {
    window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?
    client_id=${process.env.NEXT_PUBLIC_GOOGLE_AUTH_CLIENT_ID}&
    redirect_uri=${process.env.NEXT_PUBLIC_OAUTH_REDIRECT}/${snsType}/oauth&
    response_type=code&scope=email profile`;
};

...
    <button onClick={() => loginWithGoogle("google")} type="button">
          <img className="form_btn" src="./images/google_login.png" alt="" />
    </button>
...

 

Oauth.tsx

 

그럼 이제 이 페이지로 와서, 카카오와 동일한 작업을 진행한다.

저중에서 code=""라고 쓰여있는 부분에서 ""만 골라서 던져주면 된다.

 

이렇게 하면 나머지 부분은 다 같기 때문에 구글도 이렇게 진행해주면 된다.

검색해보니 구글 로그인은 방법이 너무 많아서 최근엔 어떻게 진행하고 있는지, 안쓰는 것은 무엇인지는 잘모르겠어서 ㅠ,ㅠ

댓글은 언제나 환영입니당..