0. 구글 API console에 접속해 OAuth 클라이언트 ID를 만들기

구글 API console에 접속해서 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 만든다.

OAuth 클라이언트 ID

1. frontend 서버에서 요청을 보낼 버튼 만들기

백엔드 서버 /user/google 주소로 GET요청을 보내도록 버튼을 만듭니다. 예를 들면 http://localhost:3051/user/google

components>GoogleLoginBtn.js

import React, { useCallback } from 'react';
import { GoogleLoginButton } from 'react-social-login-buttons';
import { useRouter } from 'next/router';
import { backUrl } from '../config/config';
import { Tooltip } from 'antd';
const GoogleLoginBtn = () => {

    const router = useRouter();
    const onClickGoogleLogin = useCallback(() => {
        router.push(`${backUrl}/user/google`);

    }, []);
    return (
        <Tooltip
            placement="bottom"
            title=" 안드로이드 , iOS 및 OS X 사용자는 크롬 브라우저로 구글로 로그인하기 기능을 이용해주세요.">
            <GoogleLoginButton
                onClick={onClickGoogleLogin}
                align="center"
                size="40px"
                text="Google"
                style=
            />
        </Tooltip>
    );
};

export default GoogleLoginBtn;

2. backend server에서 구글 로그인 전략 짜기

.dotenv 파일에 구글 API console에서 OAuth 2.0 클라이언트 ID로 들어가면 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET 값을 알 수 있습니다. git에는 올리지 않도록 주의하기!
callbackURL에는 받은 client 로그인 정보를 보낼 redirect url를 적어줍니다. 그러면 결과를 GET ‘/user/google/callback’으로 받습니다.

passport>google.js

const passport = require('passport');
const dotenv = require('dotenv');
const bcrypt = require('bcrypt');

//구글 로그인 전략
dotenv.config();
const { User } = require('../models');
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;

module.exports = () => {
    passport.use(new GoogleStrategy({
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: '/user/google/callback',
    },
        async (accessToken, refreshToken, profile, done) => {
            // console.log('profile', profile);
            try {
                const exUser = await User.findOne({
                    where: {
                        email: profile.emails[0].value,
                        provider: 'google',
                    },

                });
                if (exUser) {
                    return done(null, exUser);
                }
                else {
                    const hashedPassword = await bcrypt.hash(profile.displayName, 11);
                    const newUser = await User.create({
                        email: profile.emails[0].value,
                        password: hashedPassword,
                        nickname: profile.displayName,
                        snsId: profile.id,
                        provider: 'google',
                    });
                    done(null, newUser);
                }
            }
            catch (err) {
                console.error(err);
                done(err);
            }

        }
    ));
};

passport>index.js

const passport = require('passport');
const { User } = require('../models');
const local = require('./local');
const google = require('./google');
const facebook = require('./facebook');

//로그인 설정
module.exports = () => {
    passport.serializeUser((user, done) => {   
        done(null, user.id);
    });
    passport.deserializeUser(async (id, done) => {
        try {
            const user = await User.findOne({
                where: { id }
            });
            done(null, user);//req.user
        } catch (err) {
            console.error(err);
            done(err);
        }
    });
    local();
    google();
    facebook();
};

3. backend server에서 google oauth를 통해 받은 요청을 front로 다시 보낼 router 만들기

scope에는 클라이언트 로그인 정보 중 필요한 정보가 무엇인지 넣어주면 된다. 저는 ‘profile’, ‘email’ 값을 요청했습니다. GET /user/google 로 요청을 보내면 GET /google/callback으로 값을 받는다. 이를 다시 프론트 서버 주소(여기서는 frontUrl)로 보내주도록 합니다.

passport>routes>user.js

const express = require('express');
const router = express.Router();
const passport = require('passport');
const prod = process.env.NODE_ENV === 'production';
const frontUrl = prod ? "https://ymillonga.xyz" : "http://localhost:3050";

router.get('/google', function (req, res, next) {// GET /user/google
    passport.authenticate('google', { scope: ['profile', 'email'] })(req, res, next);
});

router.get('/google/callback', passport.authenticate('google', {
    failureRedirect: '/',
}), async (req, res, next) => {
    return res.status(200).redirect(frontUrl);

});
module.exports = router;