👩🏻‍💻 이 게시글은 설정 방법만을 설명합니다. supabase의 OAuth의 동작에 대해서는 해당 게시글을 참고해주세요!

🌱 Google OAuth Login

사용자가 Google 계정을 사용하여 애플리케이션에 로그인할 수 있게 하고, 애플리케이션은 사용자의 개인 정보를 안전하게 관리할 수 있습니다.

☀️ Google OAuth 연결 준비

Google Cloud Platform : 프로젝트 생성 및 설정

• Google Cloud Platform(구글 클라우드 페이지)에서 로그인하고 새 프로젝트를 생성합니다.
  

• API > 사용자 인증 정보 페이지로 이동합니다.
  

• OAuth 클라이언트 ID를 생성하기 전에 OAuth 동의 화면을 설정합니다.

📍 OAuth 동의 화면

• 사용자가 Google 로그인을 시도할 때 표시되는 화면에서 보게 될 애플리케이션의 정보로 애플리케이션의 이름, 사용자 지원 이메일 등의 정보를 보여주게 됩니다.
• 사용자에게 자신이 인증하고자 하는 서비스를 식별하는 데 도움을 주고, 애플리케이션이 요청하는 권한을 승인하도록 합니다.

• 사용자들이 사용할 수 있도록 외부 타입으로 설정해서 만듭니다.
• 앱 정보에서 필수 항목들을 적고 저장 후 계속 버튼으로 단계들을 모두 설정해줍니다.
  • 작성한 앱 이름, 사용자 지원 이메일은 로그인할 때 사용자에게 보여지게 됩니다.
    

OAuth 클라이언트 ID 생성

• 다시 API > 사용자 인증 정보 페이지로 이동하여 OAuth 클라이언트 ID를 생성합니다.

• 애플리케이션 유형을 웹 애플리케이션 으로 설정하면 아래로 설정 페이지가 나옵니다.

• 클라이언트 이름을 적고 승인된 리디렉션 URI에서 추가 버튼을 누릅니다.
  

• Supabase dashboard 에서 Authentication > Providers 에서 Google을 클릭해 열고 활성화합니다. Callback URL을 복사하고 승인된 리디렉션 URI에 붙여넣어 주고 save 합니다.
  

📍 Redirection URI

• 사용자가 Google 로그인으로 인증을 완료한 후, Google은 사용자를 이 URI로 redirection합니다. 이 떄, 인증코드가 URI에 포함되어 전송되고, 해당 코드로 액세스 토큰을 얻을 수 있습니다.

Supabase console에 Google 인증 정보 입력

📍 *OAuth Client

• 로그인 과정에서 애플리케이션(supabase)이 Google에 사용자 인증을 요청할 때 사용합니다.
• Client ID : 애플리케이션을 식별하는 데 사용됩니다.
• Client Secret (클라이언트 보안 비밀번호) : 보안 통신을 위해 사용됩니다. 안전하게 사용자 인증을 요청하고 인증 코드를 획득하게 합니다.

• OAuth 클라이언트가 생성되었다는 메시지가 뜹니다. 클라이언트 ID를 복사해서 supabase google설정의 Client ID에 붙여넣어 줍니다. 아래의 클라이언트 보안 비밀번호도 복사해서 supabase google 설정의 Client Secret에 붙여넣어 주면 기본 설정이 끝납니다.
  

추가 설정

📍 범위(Scope) 설정

• 사용자 권한 부여 : 범위(scope)설정은 사용자로부터 Google 계정에 저장된 특정 데이터에 대한 접근 권한을 명시적으로 요청하기 위해서 설정합니다.
• 데이터 보호 : 범위 설정을 통해 사용자는 특정 데이터에 대한 접근을 허용하고 거부하여 자신의 개인정보를 제어할 수 있습니다.

• API 및 서비스 > 라이브러리 로 이동해서 people을 검색해 Google People API를 사용 설정 합니다.
  

• OAuth 동의 화면으로 이동해 범위(scope) 설정에서 범위 추가 또는 삭제버튼을 클릭하고 openID와 People API 관련된 필터링을 추가하고 업데이트 합니다.