[Next] 구글 로그인 구현하기

안녕하세요. J4J입니다.

 

이번 포스팅은 구글 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

들어가기에 앞서 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다.

 

• [Next] 카카오 로그인 구현하기
• [Next] 네이버 로그인 구현하기

 

 

반응형

 

 

구글 로그인 설정

 

[ 1. 구글 클라우드 플랫폼 사이트 로그인 ]

 

Google Cloud Platform에 접속하여 로그인해주시면 됩니다.

 

 

 

[ 2. 프로젝트 생성하기 ]

 

사이트에 접속을 했다면 상단 바에 프로젝트 선택이라는 메뉴가 존재합니다.

 

메인 화면

 

 

 

"프로젝트 선택 → 새 프로젝트" 순서대로 클릭을 하면 다음과 같이 프로젝트 정보들을 입력하여 만들어줄 수 있습니다.

 

프로젝트 정보 입력

 

 

 

 

[ 3. 애플리케이션 등록 ]

 

프로젝트를 생성 완료했으면 좌측 메뉴바에서 "API 및 서비스 → 사용자 인증 정보" 메뉴를 클릭해줍니다.

 

사용자 인증 정보 메뉴

 

 

 

그리고 상단에 있는 "사용자 인증 정보 만들기 → OAuth 클라이언트 ID"를 클릭해줍니다.

 

사용자 인증 정보 메뉴

 

 

 

그러면 먼저 다음과 같은 화면을 확인할 수 있습니다.

 

동의 화면 구성

 

 

 

동의 화면 구성을 클릭해주시면 타입을 하나 선택해주셔야 하는데 어떤 목적을 가지고 사용하냐에 따라 한 가지를 선택해주시면 됩니다.

 

유저 타입 설정

 

 

 

위의 절차를 모두 수행했다면 다음 화면을 확인할 수 있습니다.

 

앱 정보 등록

 

 

 

저 같은 경우는 여기서 앱 정보에 대한 내용들과 하단에 있는 개발자 연락처 정보만 입력해줬습니다.

 

내용을 모두 입력하고 저장 후 계속 버튼을 클릭해주시면 됩니다.

 

 

 

그럼 다음과 같이 범위 설정하는 화면을 볼 수 있는데 여기서는 범위 추가 또는 삭제 버튼을 클릭하여 전달받고자 하는 정보들을 체킹 해주시면 됩니다.

 

범위 설정

 

 

 

모든 설정이 완료되었다면 저장 후 계속 버튼을 클릭해주시면 됩니다.

 

 

 

그러면 다음과 같이 테스트 사용자를 등록하는 화면이 나옵니다.

 

테스트 사용자 등록

 

 

 

테스트 단계때 테스트를 할 수 있는 이메일 정보를 등록하는 것으로 ADD USERS 버튼을 클릭하여 테스트할 계정을 등록해주시면 됩니다.

 

보통 본인 계정을 사용할 것이기 때문에 저도 제 구글 메일 계정을 등록해줬습니다.

 

등록이 완료되었다면 저장 후 계속 버튼을 클릭해주시면 됩니다.

 

 

 

그러면 다음과 같이 지금까지 등록한 설정에 대한 요약된 내용들을 확인할 수 있습니다.

 

요약 화면

 

 

 

 

[ 4. OAuth 클라이언트 ID 만들기 ]

 

애플리케이션 등록을 완료했다면 방금전에 선택했던 OAuth 클라이언트 ID 메뉴를 다시 클릭해줍니다.

 

OAuth 클라이언트 ID 메뉴

 

 

 

그러면 다음 화면을 확인할 수 있는데 애플리케이션 유형, 이름, 로그인이 사용될 URL 들을 다음과 같이 입력해주시면 됩니다.

 

클라이언트 정보 등록

 

 

 

내용 입력 후 만들기 버튼을 클릭해주시면 다음과 같이 클라이언트 ID가 생성된 것을 확인할 수 있습니다.

 

등록된 클라이언트 정보

 

 

 

클라이언트 ID값은 코드 구현할 때 사용될 예정입니다.

 

 

 

 

코드 구현

 

[ 1. 패키지 설치 ]

 

$ npm install react-google-login

 

 

 

[ 2. index.tsx 파일 ]

 

해당 파일에서는 로그인을 위한 코드를 구현하기 위해 다음과 같이 작성하겠습니다.

 

import * as React from 'react';
import { NextPage } from 'next';
import styled from 'styled-components';
import Router from 'next/router';
import GoogleLogin from 'react-google-login';

const Index: NextPage = () => {
    
    const onSuccess = (res: any) => {
        console.log(res); // 로그인한 사용자 정보 조회

        Router.push('/google'); // /google 페이지로 이동
    }

    const onFailure = (error: any) => {
        console.log(error);
    }

    return (
        <Wrapper>
            <Header.Container>
                <Header.Title>로그인할 방법을 선택해주세요.</Header.Title>
            </Header.Container>

            <Button.Container>
                <Button.ButtonList>
                    <Button.GoogleButton 
                        clientId='asdf12345.apps.googleusercontent.com' // 발급된 clientId 등록
                        onSuccess={onSuccess}
                        onFailure={onFailure}
                        cookiePolicy={'single_host_origin'} // 쿠키 정책 등록
                        buttonText='Google 로그인' // 버튼에 사용될 텍스트
                    />
                </Button.ButtonList>
            </Button.Container>
        </Wrapper>
    )
}

export default Index;

const Wrapper = styled.div`
    max-width: 720px;

    margin: 0 auto;
`

const Header = {
    Container: styled.div`
        text-align: center;
    `,

    Title: styled.h2``,
}

const Button = {
    Container: styled.div``,

    ButtonList: styled.div`
        display: flex;
        flex-direction: column;
        align-items: center;
    `,

    GoogleButton: styled(GoogleLogin)`
        width: 360px;
        height: 40px;

        margin: 6px 0;

        justify-content: center;

        & span {
            font-size: 18px;
            font-weight: 700 !important;
        }
    `,
}

 

 

 

[ 3. google.tsx 파일 ]

 

/pages경로에 google.tsx 파일을 생성해주고 로그아웃을 위한 코드를 구현하기 위해 다음과 같이 작성하겠습니다.

 

import { NextPage } from 'next';
import Router from 'next/router';
import * as React from 'react';
import styled from 'styled-components';
import { GoogleLogout } from 'react-google-login';

const Google: NextPage = () => {

    const onLogoutSuccess = () => {
        console.log('onLogoutSuccess')

        Router.push('/');
    }

    const onFailure = () => {
        console.log('onFailure');
    }

    return (
        <Wrapper>
            <Title>Google Page...</Title>
            <Button 
                clientId='asdf12345.apps.googleusercontent.com' // 발급된 clientId 등록
                onLogoutSuccess={onLogoutSuccess}
                onFailure={onFailure}
                buttonText='Google 로그아웃' // 버튼에 사용될 텍스트
            />
        </Wrapper>
    )
}

export default Google;

const Wrapper = styled.div`
    max-width: 720px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
`;

const Title = styled.h2``;

const Button = styled(GoogleLogout)`
    width: 360px;
    height: 40px;

    margin: 6px 0;

    justify-content: center;

    & span {
        font-size: 18px;
        font-weight: 700 !important;
    }
`;

 

 

 

 

테스트

 

코드를 작성한 뒤 실행시키면 다음과 같은 화면을 확인할 수 있습니다.

 

로그인 화면

 

 

 

로그인 버튼을 클릭하게 되면 다음과 같이 여러 구글 계정 중 로그인할 계정을 선택할 수 있는 화면이 나옵니다.

 

로그인 할 구글 계정 선택

 

 

 

아이디를 선택해서 로그인을 하시면 다음과 같이 로그인이 성공적으로 이루어진 것을 확인할 수 있습니다.

 

로그인 성공

 

 

 

그리고 Console 창을 확인해보시면 로그인한 계정의 googleId를 포함하여 이메일 정보, 사용자 정보 등의 정보들을 확인할 수 있습니다.

 

 

 

 

마지막으로 로그아웃 버튼을 누르게 되면 다음과 같이 다시 로그인 화면으로 넘어가는 것을 확인할 수 있습니다.

 

로그아웃 성공

 

 

 

 

 

 

 

이상으로 구글 로그인 구현하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.