파피루스

[next/react] google 로그인 구현하기 (3) : 로그인 구현하기 본문

Today I Learned/in dev

[next/react] google 로그인 구현하기 (3) : 로그인 구현하기

떼굴펜 2024. 10. 3. 15:20

이전 글:  https://reeny404.tistory.com/120 

 

[next/react] google 로그인 구현하기 (2) : 액세스 토큰 받기

액세스 토큰을 받기 위해 oauth client id를 이전에 발급받았다. (link) [next/react] google 로그인 구현하기 (1) : oauth client id 발급 받기구글 로그인을 구현하기 위해 설정부터 해보자 1. 사용자 인증 정보

reeny404.tistory.com

 

 

이전에 액세스 토큰까지 무사히 잘 받아왔다면, 이제 받은 토큰을 이용해서 google 로그인 정보를 가져오자!

 로그인 정보?
: 내가 개발하는 사이트에 저장할 email이나 nickname 정보를 말한다.
구현중인 서비스의 소셜 회원가입/로그인 정책 상 필요한 데이터들

 

 

0. people API 사용 on

https://console.cloud.google.com/home/dashboard 에 가서 people API 검색한 후, 사용 on하기

 

사용 설정됨 초록 마크 뜨면 설정 완료

 

 

1. 프로필 가져오기

official docs
https://developers.google.com/people/v1/profiles
https://developers.google.com/people/api/rest/v1/people/get
GET /v1/people/me?personFields=names,emailAddresses HTTP/1.1
Host: people.googleapis.com

 

❗) personFields와 같은 queryString은 문서personFields을 참고할 것! 

 

 

내 경우에는 emailAddresses, nicknames, names, metadata, photos, coverPhotos 로 테스트 해보고, 최종적으로는 밑줄친 항목만 저장하기로 결정했다.

 

응답 데이터 구조

{
  "resourceName": "people/0123456789000000",
  "etag": "문자열",
  "nicknames": [
    {
      "metadata": {
        "primary": true,
        "source": {
          "type": "PROFILE",
          "id": "0123456789000000"
        }
      },
      "value": "떼굴펜",
      "type": "ALTERNATE_NAME"
    }
  ],
  "photos": [
    {
      "metadata": {
        "primary": true,
        "source": {
          "type": "PROFILE",
          "id": "0123456789000000"
        }
      },
      "url": "https://lh3.googleusercontent.com/a/ACg8ocJ1F34eOpuxNiBrKARkyQSyOMnMQOubpZiJbB8wzpyL15FeFMA=s100"
    }
  ],
  "emailAddresses": [
    {
      "metadata": {
        "primary": true,
        "verified": true,
        "source": {
          "type": "ACCOUNT",
          "id": "0123456789000000"
        },
        "sourcePrimary": true
      },
      "value": "aaa@aaa.aa"
    }
  ]
}