# OAuth2 적용하기

{% file src="<https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FG4Wp6sM9UNCJbJmgJLzo%2F%E1%84%80%E1%85%A6%E1%84%89%E1%85%B5%E1%84%91%E1%85%A1%E1%86%AB_%E1%84%89%E1%85%B5%E1%84%8F%E1%85%B2%E1%84%85%E1%85%B5%E1%84%90%E1%85%B5_%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%87%E1%85%A9%E1%86%AB(Oauth2%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC).zip?alt=media&token=4323d12b-0a96-4629-98c6-f37a63a33fc4>" %}
일반로그인 + OAUTH2 적용클
{% endfile %}

{% file src="<https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FdlQhW5mxVhpPtYu1PuJy%2Foauth%E1%84%90%E1%85%A6%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%91%E1%85%B3%E1%84%85%E1%85%A9%E1%86%AB%E1%84%90%E1%85%B3%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.zip?alt=media&token=2d746f83-ae49-45bf-a760-2a3b45fd0941>" %}

## 전체적인 흐름

1. 프론트에서 SNS로그인 버튼 클릭
2. 백엔드에 요청보냄(현재 페이지주소 포함한 리다이렉트 url 같이 전송) -> sns로그인용 링크 전달 받기
3. 프론트에서 해당 링크로 이동(현재탭에서 이동됨)
4. sns로그인 -> 권한 동의 -> 회원가입 or 로그인 완료
5. 프로바이더가 백엔드에 미리 설정해둔 callback url로 유저정보 반환
6. 백엔드에서는 유저정보 처리 후 JWT토큰 및 기타 유저정보를 프론트가 처음에 보낸 redirectURL로 반환
7. 프론트에서는 JWT를 받을 수 있는 링크 열어두고 해당 유저정보 및 jwt토큰을 로컬스토리지에 저장
8. 백엔드에 요청보낼 때 Authroization Bearer {jwt토큰} 헤더에 넣어서 요청하기

## 구글클라우드

* 구글 클라우드 플래폼 페이지 접속
* 새프로젝트 생성

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2F4q7S8PTt4RvPJ8diJCll%2Fimage.png?alt=media&#x26;token=25727fda-410c-49c8-aa4e-83b2e8a3767c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FC1hN9uF8CG1mH7slpq2b%2Fimage.png?alt=media&#x26;token=f7e2fc2b-cec5-4a8f-8032-5154831c253a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FQpVfwQ7SJkwukIXmKanf%2Fimage.png?alt=media&#x26;token=10dcb89f-4525-405e-89f4-e741f64aaf4c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2F5v2sOO8EkfKRrE5Msiqv%2Fimage.png?alt=media&#x26;token=b1a2fa3d-a2ae-4835-adca-8c6508b18b48" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2F06Ha8Pt6bzsNBKGmUlOd%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-01-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.04.36.png?alt=media&#x26;token=d283df60-6a9d-4d1b-816a-e5d29cce3a69" alt=""><figcaption></figcaption></figure>

* OAuth 동의화면 이동 -> 외부 선택 -> 만들기

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FC9WMUIA3PCOoFqcQzQgY%2Fimage.png?alt=media&#x26;token=171f2242-3bc2-48d2-a4e4-3ebd8d544fcd" alt=""><figcaption></figcaption></figure>

* 앱필수정보 입력
  * 앱이름, 사용자 지원 이메일, 이메일주소

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2F3lxDQMAz6J6R1a9dAHUS%2Fimage.png?alt=media&#x26;token=e0db595d-73dc-4ab9-87a6-eff59cfa0686" alt=""><figcaption></figcaption></figure>

* 범위에 이메일,프로필,openid 추가 및 만들기

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FLTAgPVoiEKxsbzYtRepM%2Fimage.png?alt=media&#x26;token=bfeeaf30-4347-4c92-878a-442912ac8141" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FABe94A5TaGtRnWeylxU6%2Fimage.png?alt=media&#x26;token=f733bccb-9320-435d-8716-890074204180" alt=""><figcaption></figcaption></figure>

OAuth 클라이언트 ID 클릭

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FuaibMKolrroorSlbLTKC%2Fimage.png?alt=media&#x26;token=9d99bb02-fea9-4564-8770-3bfdfa2d74f6" alt=""><figcaption></figcaption></figure>

* 적당한 이름으로 만들기
* 지정할 콜백url 만들기 예시프로젝트에서는 <http://localhost:8080/auth/oauth2/callback/google> 이렇게 지정함

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2Fl7NQNawGz04r7LeeqGBA%2Fimage.png?alt=media&#x26;token=f8b5c018-e609-40f7-a8ab-b7d56b5df0fc" alt=""><figcaption></figcaption></figure>

필요한것

* 클라이언트 ID
* 클라이언트 보안 비밀번호

## 네이버

{% embed url="<https://developers.naver.com/products/login/api/api.md>" %}

* openapi 신청하기

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FQe5GNvC7QRQ7GDerVCHy%2Fimage.png?alt=media&#x26;token=cb51b279-8fc0-4f0b-b6a9-b56230e8b929" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FZHKjJcUKhorkOHEocGAW%2Fimage.png?alt=media&#x26;token=d237f3a7-2386-430a-8233-44bd7eef3d02" alt=""><figcaption></figcaption></figure>

\- 회원이름, 이메일주소 등 추가

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FGANriZFe8j3TFhe9ZtBy%2Fimage.png?alt=media&#x26;token=092fc761-ccbb-43a9-bbfb-21acfceb5eeb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2296834275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNziQV3sx0gry4rKmvbXZ%2Fuploads%2FauiaR3vJXu75oIKtyp22%2Fimage.png?alt=media&#x26;token=1a22776f-3b3f-41eb-b20a-13f5d0c39d09" alt=""><figcaption></figcaption></figure>

필요한것

* 클라이언트ID
* 클라이언트시크릿