외부 ID로 사용자 인증

이 빠른 시작에서는 IAP(Identity-Aware Proxy) 및 외부 ID를 사용하여 앱을 보호하는 방법을 보여줍니다. IAP와 Identity Platform을 결합하면 Google 계정 외에 OAuth, SAML, OIDC와 같은 광범위한 ID 공급업체로 사용자를 인증할 수 있습니다.

이 빠른 시작에서는 Facebook 인증을 사용하여 샘플 App Engine 앱을 보호합니다.

시작하기 전에

  1. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  2. Google Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다.

  3. Install the Google Cloud CLI, then initialize it by running the following command: 

    gcloud init

  4. 프로젝트의 App Engine을 초기화합니다.

    gcloud app create --project=project-id

  5. Git을 설치합니다.

  6. Node.js의 최신 버전을 설치합니다.

  7. Firebase 명령줄 도구 설치:

    npm install -g firebase-tools

API 사용 설정

먼저 Identity Platform을 사용 설정합니다.

  1. Google Cloud 콘솔에서 Identity Platform Marketplace 페이지로 이동합니다.

    Identity Platform Marketplace 페이지로 이동

  2. Identity Platform 사용 설정을 클릭합니다. Google Cloud 콘솔에 Identity Platform 페이지가 나타납니다.

그런 다음 IAP를 사용 설정합니다.

  1. Google Cloud 콘솔에서 IAP 페이지로 이동합니다.

    IAP 페이지로 이동

  2. Identity Platform에 사용한 것과 동일한 프로젝트를 선택합니다. 다른 프로젝트의 사용은 지원되지 않습니다.

  3. API 사용 설정을 클릭합니다.

샘플 코드 다운로드 및 배포

이 빠른 시작 코드에는 클라이언트 앱과 인증 앱의 두 가지 구성요소가 있습니다.

클라이언트 앱은 IAP로 보호됩니다. 인증되지 않은 사용자로부터 요청을 받으면 요청을 인증 앱으로 리디렉션하여 사용자의 ID를 확인합니다. 사용자가 로그인하면 인증 앱이 JWT(JSON 웹 토큰)로 응답합니다. 데모 용도로 클라이언트 앱은 JWT를 표시합니다.

먼저 코드를 다운로드하고 클라이언트 앱을 배포합니다.

  1. 샘플 코드 다운로드

    git clone https://github.com/GoogleCloudPlatform/iap-gcip-web-toolkit.git

  2. 클라이언트 앱 디렉터리로 변경합니다.

    cd iap-gcip-web-toolkit/sample/app

  3. 종속 항목을 설치합니다.

    npm install

  4. 클라이언트 앱을 App Engine에 배포합니다.

    npm run deploy

    클라이언트 앱은 다음 URL에서 실행됩니다.

    https://[PROJECT-ID].appspot.com

다음으로 인증 앱을 배포하세요.

  1. 인증 앱의 디렉터리로 변경합니다.

    cd ../authui-firebaseui

  2. 종속 항목을 설치합니다.

    npm install

  3. Firebase 호스팅을 사용하도록 인증 앱을 구성합니다. IAP 보호 클라이언트 앱이 포함된 Google Cloud 프로젝트의 Google Cloud 프로젝트 ID를 지정합니다.

    firebase use project-id

  4. 앱을 배포합니다.

    npm run deploy

    인증 앱은 다음 URL에서 실행됩니다.

    https://[PROJECT-ID].firebaseapp.com

클라이언트 및 인증 앱을 배포했습니다. 다음 단계는 Identity Platform 및 IAP를 구성하는 것입니다.

Identity Platform 설정

IAP는 Identity Platform을 사용하여 외부 ID를 인증합니다. 이 빠른 시작에서는 Facebook을 예시로 사용하지만 Identity Platform은 다양한 ID 공급업체를 지원합니다.

Facebook 앱 만들기

Facebook으로 사용자를 인증하려면 앱 ID 및 앱 보안 비밀이 필요합니다.

  1. 개발자용 Facebook에 로그인합니다. 아직 Facebook 계정이 없으면 계정을 만들어야 합니다.

  2. Facebook의 Apps(앱) 페이지로 이동합니다.

  3. Add a New App(새 앱 추가)을 클릭합니다.

  4. 왼쪽 메뉴에서 Settings(설정) > Basic(기본)을 선택합니다.

  5. Privacy Policy URL(개인정보처리방침 URL) 상자에 유효한 URL을 입력합니다. 나중에 프로덕션에 앱을 배포하는 경우 개인정보처리방침을 가리키도록 URL을 업데이트할 수 있습니다.

  6. 앱 ID와 앱 보안 비밀을 기록해 둡니다. 다음 섹션에서 이 정보가 필요합니다.

ID 공급업체로 Facebook 추가

인증에 Facebook을 사용하도록 Identity Platform을 구성합니다.

  1. Google Cloud 콘솔에서 ID 공급업체 페이지로 이동합니다.

    ID 공급업체 페이지로 이동

  2. 제공자 추가를 클릭합니다.

  3. 공급업체 목록에서 Facebook을 선택합니다.

  4. 이전 섹션에서 얻은 앱 ID 및 앱 비밀번호를 입력합니다.

  5. 저장을 클릭합니다.

OAuth 리디렉션 URI 구성

Facebook이 인증 앱의 요청 처리를 마치면 리디렉션할 URI가 필요합니다.

  1. Facebook의 Apps(앱) 페이지로 돌아가서 앱을 선택합니다.

  2. 왼쪽 메뉴에서 Products(제품)를 클릭합니다.

  3. Facebook Login(Facebook 로그인) 제품을 찾아 Set Up(설정)을 클릭합니다.

  4. 왼쪽 탐색 메뉴에서 Settings(설정)를 선택합니다(설명된 빠른 시작 과정을 완료할 필요는 없음).

  5. 유효한 OAuth 리디렉션 URI 상자에 리디렉션 URI를 입력합니다.

    https://project-id.firebaseapp.com/__/auth/handler

    Identity Platform 공급업체 구성 페이지에서 이 URI를 찾을 수도 있습니다.

  6. 변경사항 저장을 클릭합니다.

Identity Platform 설정을 완료했습니다. 이제 인증에 사용하도록 IAP를 구성할 수 있습니다.

IAP가 외부 ID를 사용하도록 사용 설정

  1. Google Cloud 콘솔에서 IAP 페이지로 이동합니다.

    IAP 페이지로 이동

  2. 애플리케이션 탭을 클릭합니다.

  3. 이전에 배포한 샘플 App Engine 앱을 선택합니다. 게시된 카테고리의 URL은 다음과 비슷하게 표시됩니다.

    https://project-id.appspot.com

  4. IAP 열에서 스위치를 사용으로 전환합니다.

  5. 측면 패널의 외부 ID를 사용해 승인하세요.에서 시작을 클릭합니다.

  6. 로그인 페이지에서 자체 UI 제공을 선택합니다.

  7. 인증 URL 필드에 인증 앱의 URL을 입력합니다. 다음과 같이 표시됩니다.

    https://project-id.firebaseapp.com/

    URL을 입력하면 Google Cloud 콘솔에서 자동으로 API 키를 추가합니다.

  8. 프로젝트 이름으로 상자를 선택합니다. Facebook이 ID 공급업체로 표시되어야 합니다.

  9. 저장을 클릭합니다.

IAP 설정을 완료했습니다.

사용자 인증 테스트

IAP가 앱을 보호하고 Facebook으로 사용자를 인증하는지 테스트하려면 다음 안내를 따르세요.

  1. 브라우저에서 클라이언트 App Engine 앱으로 이동합니다.

    https://project-id.appspot.com

    간단한 로딩 화면이 표시된 후 Identity Platform 로그인 페이지로 리디렉션됩니다.

  2. 화면의 지시에 따라 Facebook으로 인증합니다.

  3. Identity Platform에서 반환한 JWT를 표시하는 클라이언트 앱으로 다시 리디렉션해야 합니다.

완전히 로그아웃하려면 자신이 만든 샘플 앱과 Facebook에서 로그아웃해야 합니다. Firebase가 Facebook에 1시간 동안 유효한 세션을 설정하므로 두 앱에서 모두 로그아웃해야 합니다. 자세한 내용은 사용자 세션 관리를 참고하세요.

수고하셨습니다. App Engine에 앱을 성공적으로 배포하고 IAP 및 외부 ID로 앱을 보호했습니다.

삭제

이 페이지에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 수행합니다.

  1. In the Google Cloud console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

또한 만든 Facebook 앱을 삭제할 수도 있습니다.

다음 단계