쏘니의 개발블로그

1. Google Cloud Console 접속:

• https://console.cloud.google.com/ 에 접속합니다.
• Google 계정으로 로그인합니다.

2. 프로젝트 선택 또는 생성:

• 기존 프로젝트가 있다면 선택합니다.
• 새 프로젝트를 만들려면 상단의 프로젝트 선택 드롭다운 메뉴에서 "새 프로젝트"를 선택합니다.

3. API 및 서비스 대시보드로 이동:

• 왼쪽 메뉴에서 "API 및 서비스"를 선택합니다.

4. OAuth 동의 화면 설정:

• 왼쪽 메뉴에서 "OAuth 동의 화면"을 선택합니다.
• 외부 또는 내부 사용자 유형을 선택하고 "만들기"를 클릭합니다.
• 필요한 정보를 입력하고 저장합니다.

extrenal 을 사용해줍니다.

앱 이름 및 연락처만 등록 후 [저장 후 계속]

[저장 후 계속]

테스트 할 계정을 추가해주세요.
테스트 user 의 경우 오픈전에 설정해주어야 계정 테스트가 가능합니다. 

유저 추가후 [저장 후 계속]

위 과정까지 입력해주고 넘어갑니다.

여기까지 OAuth 동의 화면 완료

5. 사용자 인증 정보 생성:

• 왼쪽 메뉴에서 "사용자 인증 정보"를 선택합니다.
• "사용자 인증 정보 만들기" > "OAuth 클라이언트 ID"를 클릭합니다.

[상단에 사용자 인증 정보 만들기] [OAuth 클라이언트 ID] 버튼 클릭

애플리케이션 유형 선택:

• "애플리케이션 유형"에서 "웹 애플리케이션"을 선택합니다.

애플리케이션 정보 입력:

• 이름을 입력합니다 (예: "PopupGo Web Client").
• "승인된 JavaScript 원본"에 개발 서버 URL을 추가합니다 (예: http://localhost:5173). -> 프론트
• "승인된 리디렉션 URI"에도 개발 서버 URL을 추가합니다 (예: http://localhost:5173/oauth2/callback). -> 인증 후 redirect 할 주소. 해당 리다이렉트 파라미터에 access_token 을 받아올 수 있음. - 필자는 프론트 리다이렉트로 처리함.
• 실제 배포 시에는 프로덕션 URL도 추가해야 합니다.

리다이렉션 URI 까지 입력 후 [만들기] 버튼 클릭

잘려진 화면 우측에 id 및 비밀번호가 보입니다. 

• 클라이언트 ID 확인:
  • 생성된 클라이언트 ID가 표시됩니다. 이것이 YOUR_GOOGLE_CLIENT_ID 대신 사용할 값입니다.
• 클라이언트 ID 보관:
  • 이 클라이언트 ID를 안전하게 보관하세요.
  • 언제든 "사용자 인증 정보" 페이지에서 다시 확인할 수 있습니다.

보안 주의사항:

• 클라이언트 ID는 공개될 수 있는 정보이지만, 클라이언트 시크릿은 절대 공개되어서는 안 됩니다.
• 프로덕션 환경에서는 클라이언트 ID를 환경 변수로 관리하는 것이 좋습니다.

이렇게 얻은 클라이언트 ID를 로그인 버튼 있는 파일의 YOUR_GOOGLE_CLIENT_ID 부분에 붙여넣으면 됩니다. 예를 들어:

로그인 버튼 클릭시 메소드

loginWithGoogle() {
      const clientId = '~~~~.apps.googleusercontent.com'; // Replace with your actual client ID
      const redirectUri = 'http://localhost:5173/oauth2/callback'; // The URL where you want to handle the response
      const scope = 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile';
      const responseType = 'token';

      const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
                      `client_id=${clientId}&` +
                      `redirect_uri=${redirectUri}&` +
                      `response_type=${responseType}&` +
                      `scope=${scope}`;

      window.location.href = authUrl;
    }

해당 메소드를 실행하면 구글 로그인 할 수 있는 계정이 나옵니다.

계속을 누르면 링크가 이동 됩니다. 
여기서 리다이렉트를 서버 api 로 받아도 되고, 다시 프론트로 받고 백엔드로 다시 요청해서 처리해도 됩니다.
저는 리다이렉트 url 을 프론트로 했기 때문에 해당 프론트 페이지에서 토큰을 추출 후 서버로 요청했습니다. 

프론트 리다이렉트 url 
http://localhost:5173/oauth2/callback 
해당 경로로 프론트 페이지를 만들어 줍니다. 

해당 리다이렉트 페이지로 오면 토큰 추출 후 백엔드 api 를 호출해줍니다.

handleOAuth2Callback() {
    const hashParams = new URLSearchParams(window.location.hash.substring(1));
    const accessToken = hashParams.get('access_token');
    console.log(accessToken)
    if (accessToken) {
      fetch('http://localhost:8080/api/oauth2/google', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ token: accessToken })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          localStorage.setItem('jwt', data.jwt); // JWT 토큰을 로컬 스토리지에 저장
          this.$router.push('/home');
        } else {
          alert('Authentication failed');
        }
      });
    } else {
      alert('Failed to get access token from URL');
    }
  }

응답 후 처리 방식은 각자 코드에 맞게 수정해주시면 됩니다. 

그리고 프론트 리다이렉트 페이지에서 요청하는 백엔드 api 호출하면 됩니다. 
해당 백엔드 api 에서는 가져온 토큰으로 서버에서 구글 토큰에 해당하는 유저정보를 가지고 옵니다. 

@Slf4j
@RestController
@CrossOrigin(origins = "*")
@RequestMapping("/api/oauth2")
public class OAuth2Controller {

    @PostMapping("/google")
    public ResponseEntity<?> googleLogin(@RequestBody Map<String, String> body) {
        log.info("start google login");
        String token = body.get("token");
        log.info("Received token: {}", token);
        String url = "https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=" + token;
        RestTemplate restTemplate = new RestTemplate();
        try {
            log.info("Requesting token info from Google API");
            Map<String, Object> tokenInfo = restTemplate.getForObject(url, Map.class);
            log.info("Token info received: {}", tokenInfo);
            String email = (String) tokenInfo.get("email");
            log.info(email);
            // 사용자 정보를 통해 인증 및 세션 관리 로직 추가
            return ResponseEntity.ok(Map.of("success", true, "email", email));
        } catch (Exception e) {
            log.error("Error during Google login", e);
            return ResponseEntity.status(401).body(Map.of("success", false, "error", e.getMessage()));
        }
    }
}

security 가 적용되어 있다면 해당 api 허용되게 수정해주시면 됩니다. 

.requestMatchers("/api/oauth2/**").permitAll()

혹여나 안된다면 controller 에 cors 허용 되어있는지 확인해주시면 됩니다.

위의 코드로 작성해준다면 백엔드 api 에서 oauth 라이브러리를 import 하지 않아도 됩니다.