소셜로그인 구글

소셜로그인이란

소셜 사인 인 (Social Sign-in) 또는 소셜 사인 온 (Social Sign-on)이라고도 하는 소셜 로그인은 소셜 네트워킹 사이트의 정보를 이용해 타사 애플리케이션과 플랫폼에 손쉽게 로그인할 수 있는 프로세스를 말합니다. 이 프로세스는 계정을 만들 필요 없이 편리한 방법을 제공하여 로그인 및 등록 경험을 간소화할 목적으로 개발되었다.

소셜로그인 구현해보기

구글 클라우드 플랫폼

1. Google API console에서 프로젝트 생성
   Google Cloud
   구글로그인을 활용하기 위해서는 구글 클라우드 플랫폼을 통해 OAuth2.0 클라이언트 ID를 발급받아야 한다.
   1.Google API console 에서 프로젝트 생성
   
2. Google API console에서 [Oauth 동의 화면]
   
   3.앱 정보 등록 - 앱이름/ 사용자 지원 메일/ 로고(필수 아님)/ 앱 도메인
   
   4.Google API console에서 [사용자 인증정보]를 통해 Client ID를 발급

승인된 자바스크립트 원본 - 웹 애플리케이션을 호스팅하는 HTTP 원본
승인된 리디렉션URI - 사용자가 Google에서 인증을 받은 후 이 경로로 리디렉션

5.클라이언트 Id 생성 완료

react-oauth/google

app.js

return (
    <GoogleOAuthProvider clientId={clientId}>
      <BrowserRouter>
      </BrowserRouter>›
    </GoogleOAuthProvider>
  );

모든 컴포넌트에 적용시키기 위해 GoogleOAuthProvider 를 전체컴포넌트 바깥에 감싸줬다

client.js

const googleLogin = useGoogleLogin({
    onSuccess: (tokenResponse) => {
      socialLogin(tokenResponse)
        .then((res) => {
          console.log("res: ", res.data);
          dispatch(loginUser(res.data));
          navigate("/");
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    },
    onError: (errorResponse) => {
      console.log("errorResponse: ", errorResponse);
    },
    flow: "auth-code",
  });

tokenResponse 를 서버로 전달해주기 위해 매개변수로 넣어준다.
로그인 성공시에 받아오는 credentialresopnes로는 clientid, credential, select_by 등이 있음

useGoogleLogin 사용

flow

implicit : google이 콜백 핸들러를 사용하여 동의 결과를 앱에 알리고 승인된 범위의 액세스 토큰을 반환
auth-code : 사용자 별로 승인 코드로 응답

데이터 유형

implicit flow

codeResponse, TokenResponse 둘 다 동일한 데이터 유형으로 받아짐

auth-code flow
codeResponse, TokenResponse 둘 다 동일한 데이터 유형으로 받아짐

server.js

//소셜로그인 api
router.post("/social-login", async (req, res) => {
  try {


    const client = new OAuth2Client(
      keys.web.client_id,
      keys.web.client_secret,
      keys.web.redirect_uris[0])
    const data = await client.getToken(req.body.code)
    const token = await client.verifyIdToken({ idToken: data.tokens.id_token })


    const gmail = token.payload.email
    const gname = token.payload.name


    //구글 소셜 로그인 이메일이 DB에 있는지 확인하기
    const foundUserProvider = await User.findOne({
      where: {
        email: gmail,
        provider: "email"
      }
    })

    const foundUserProviderGoogle = await User.findOne({
      where: {
        email: gmail,
        provider: "google"
      }
    })


    if (foundUserProvider) {
      //바로 로그인 하기, provider에 구글추가해주기
      await User.update({ provider: "email, google" }, {
        where: {
          email: gmail,
          provider: {
            [Op.like]: "email"
          }
        }
      })
    } else if (foundUserProviderGoogle) {
    } else {
      //없으면 새로 생성해주기
      await User.create({
        nickname: gname,
        password: null,
        email: gmail,
        name: gname,
        birth: null,
        provider: "google",
        withDraw: false
      })

    }

    //토큰발급
    const user = await User.findOne({ where: { email: gmail } })
    let { password: dummyPassword, ...userInfo } = user.toJSON()
    const accessToken = tokenSign(userInfo)
    userInfo = { ...userInfo, accessToken }
    res.json(userInfo)
  }
  catch (err) {
    console.log('err: ', err);
  }
})

구글 로그인 성공!