자습서: Arkose Labs 플랫폼으로 Azure Active Directory B2C 구성

이 자습서에서는 Azure AD B2C(Azure Active Directory B2C) 인증을 Arkose Labs Arkose Protect Platform과 통합하는 방법을 알아봅니다. Arkose Labs 제품은 조직이 봇 공격, 계정 탈취 및 사기성 계정 개설을 방지하도록 돕습니다.

필수 조건

시작하려면 다음이 필요합니다.

• Azure 구독
  • 아직 없으면 Azure 체험 계정을 얻을 수 있습니다.
• Azure 구독에 연결된 Azure AD B2C 테넌트
• Arkose Labs 계정
  • 데모를 요청하려면 arkoselabs.com으로 이동합니다.

시나리오 설명

Arkose Labs 제품 통합에는 다음 구성 요소가 포함됩니다.

• Arkose Protect Platform - 봇 및 기타 자동화된 남용으로부터 보호하는 서비스
• Azure AD B2C 등록 사용자 흐름 - Arkose Labs 플랫폼을 사용하는 등록 환경
  • 사용자 지정 HTML, JavaScript 및 API 커넥터는 Arkose 플랫폼과 통합됩니다.
• Azure Functions - API 커넥터 함수와 함께 작동하는 호스트된 API 엔드포인트
  • 이 API는 Arkose Labs 세션 토큰의 서버 쪽 유효성을 검사합니다.
  • Azure Functions 개요에서 자세히 알아봅니다.

다음 다이어그램은 Arkose Labs 플랫폼이 Azure AD B2C와 통합되는 방식을 보여 줍니다.

1. 사용자가 등록하고 계정을 만듭니다. 사용자가 제출을 선택하면 Arkose Labs 적용 챌린지가 나타납니다.
2. 사용자가 도전을 완료합니다. Azure AD B2C는 상태를 Arkose Labs로 보내 토큰을 생성합니다.
3. Arkose Labs는 토큰을 Azure AD B2C로 보냅니다.
4. Azure AD B2C는 중간 웹 API를 호출하여 등록 양식을 전달합니다.
5. 등록 양식은 토큰 확인을 위해 Arkose Labs로 이동합니다.
6. Arkose Labs는 검증 결과를 중간 웹 API로 보냅니다.
7. API는 Azure AD B2C에 성공 또는 실패 결과를 보냅니다.
8. 챌린지가 성공하면 등록 양식이 인증을 완료하는 Azure AD B2C로 이동합니다.

Arkose Labs에서 데모 요청

1. 데모를 예약하려면 arkoselabs.com으로 이동합니다.
2. 계정을 만드세요.
3. Arkose Portal 로그인 페이지로 이동합니다.
4. 대시보드에서 사이트 설정으로 이동합니다.
5. 공개 키와 프라이빗 키를 찾습니다. 나중에 이 정보를 사용하게 됩니다.

참고 항목

공용 및 프라이빗 키 값은 ARKOSE_PUBLIC_KEY 및 ARKOSE_PRIVATE_KEY입니다. Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose를 참조하세요.

Azure AD B2C와 통합

ArkoseSessionToken 사용자 지정 특성 만들기

사용자 지정 특성을 만들려면:

1. Azure Portal에 로그인한 다음 Azure AD B2C로 이동합니다.
2. 사용자 특성을 선택합니다.
3. 추가를 선택합니다.
4. 특성 이름으로 ArkoseSessionToken을 입력합니다.
5. 만들기를 실행합니다.

자세히 알아보기: Azure Active Directory B2C에서 사용자 지정 특성 정의

사용자 흐름 만들기

사용자 흐름은 등록 및 로그인 또는 등록을 위한 것입니다. Arkose Labs 사용자 흐름은 등록 중에 나타납니다.

1. Azure Active Directory B2C에서 사용자 흐름 및 사용자 지정 정책을 만듭니다. 사용자 흐름을 사용하는 경우 권장을 사용합니다.

2. 사용자 흐름 설정에서 사용자 특성으로 이동합니다.

3. ArkoseSessionToken 클레임을 선택합니다.

   

사용자 지정 HTML, JavaScript 및 페이지 레이아웃 구성

1. Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose로 이동합니다.
2. JavaScript <script> 태그가 있는 HTML 템플릿을 찾습니다. 다음 세 가지 작업을 수행합니다.

• 위젯을 렌더링하고 클라이언트 쪽 Arkose Labs 유효성 검사를 수행하는 Arkose Labs 스크립트를 로드합니다.

• ArkoseSessionToken 사용자 지정 특성에 해당하는 extension_ArkoseSessionToken 입력 요소 및 레이블을 숨깁니다.

• 사용자가 Arkose Labs 챌린지를 완료하면 사용자 응답이 확인되고 토큰이 생성됩니다. 사용자 지정 JavaScript의 콜백 arkoseCallback은 생성된 토큰 값을 extension_ArkoseSessionToken의 값으로 설정합니다. 이 값은 API 엔드포인트에 제출됩니다.

  참고 항목

  클라이언트 쪽 지침을 보려면 developer.arkoselabs.com으로 이동합니다. 단계에 따라 사용자 흐름에 대한 사용자 지정 HTML 및 JavaScript를 사용합니다.

3. Azure-Samples에서 <ARKOSE_PUBLIC_KEY>가 클라이언트 쪽 유효성 검사를 위해 생성한 값과 일치하도록 selfAsserted.html 파일을 수정합니다.

4. CORS(크로스-원본 자원 공유) 사용 웹 엔드포인트에서 HTML 페이지를 호스팅합니다.

5. 스토리지 계정 만들기

6. Azure Storage에 대한 CORS 지원.

   참고 항목

   사용자 지정 HTML이 있는 경우 <script> 요소를 복사하여 HTML 페이지에 붙여넣으세요.

7. Azure Portal에서 Azure AD B2C로 이동합니다.

8. 사용자 흐름으로 이동합니다.

9. 사용자 흐름을 선택합니다.

10. 페이지 레이아웃을 선택합니다.

11. 로컬 계정 등록 페이지 레이아웃을 선택합니다.

12. 사용자 지정 페이지 콘텐츠 사용에 대해 예를 선택합니다.

13. 사용자 지정 페이지 콘텐츠 사용에서 사용자 지정 HTML URI를 붙여넣습니다.

14. (선택 사항) 소셜 ID 공급자를 사용하는 경우 소셜 계정 등록 페이지의 단계를 반복합니다.

    

15. 사용자 흐름에서 속성으로 이동합니다.

16. JavaScript 사용을 선택합니다.

자세히 알아보기: Azure Active Directory B2C에서 JavaScript 및 페이지 레이아웃 버전 사용

API 만들기 및 배포

이 섹션에서는 Visual Studio Code를 사용하여 Azure Functions를 배포한다고 가정합니다. Azure Portal, 터미널 또는 명령 프롬프트를 사용하여 배포할 수 있습니다.

Visual Studio Marketplace로 이동하여 Visual Studio Code용 Azure Functions를 설치합니다.

로컬로 API 실행

1. Visual Studio Code의 왼쪽 탐색에서 Azure 확장으로 이동합니다.
2. 로컬 Azure 함수에 대한 로컬 프로젝트 폴더를 선택합니다.
3. F5를 누르거나 디버그>디버깅 시작을 선택합니다. 이 명령은 만들어진 디버그 구성 Azure 함수를 사용합니다.
4. Azure Function은 로컬 개발을 위한 파일을 생성하고 필요한 경우 종속성 및 Function Core Tools를 설치합니다.
5. Visual Studio Code 터미널 패널에 Function Core Tools의 출력이 나타납니다.
6. 호스트가 시작되면 출력의 로컬 URL에서 Alt+클릭을 선택합니다.
7. 브라우저가 열리고 함수가 실행됩니다.
8. Azure Functions 탐색기에서 함수를 마우스 오른쪽 단추로 클릭하여 로컬로 호스트된 함수 URL을 확인합니다.

환경 변수 추가

이 섹션의 샘플은 HTTP 기본 인증을 사용할 때 웹 API 엔드포인트를 보호합니다. Internet Engineering Task Force 페이지 RFC 7617: 기본 인증에서 자세히 알아봅니다.

사용자 이름과 암호는 리포지토리의 일부가 아닌 환경 변수로 저장됩니다. 로컬에서 Azure Functions 코딩 및 테스트, 로컬 설정 파일에 대해 자세히 알아봅니다.

1. 루트 폴더에서 local.settings.json 파일을 만듭니다.
2. 다음 코드를 복사하여 파일에 붙여넣습니다.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "BASIC_AUTH_USERNAME": "<USERNAME>",
    "BASIC_AUTH_PASSWORD": "<PASSWORD>",
    "ARKOSE_PRIVATE_KEY": "<ARKOSE_PRIVATE_KEY>",
    "B2C_EXTENSIONS_APP_ID": "<B2C_EXTENSIONS_APP_ID>"
  }
}

3. BASIC_AUTH_USERNAME 및 BASIC_AUTH_PASSWORD는 Azure Function에 대한 API 호출을 인증하기 위한 자격 증명입니다. 값을 선택합니다.

• <ARKOSE_PRIVATE_KEY>는 Arkose Labs 플랫폼에서 생성한 서버 쪽 비밀입니다.
  • Arkose Labs 서버 쪽 유효성 검사 API를 호출하여 프런트 엔드에서 생성된 ArkoseSessionToken 값의 유효성을 검사합니다.
  • 서버 쪽 지침를 참조하세요.
• <B2C_EXTENSIONS_APP_ID>는 디렉터리에 사용자 지정 특성을 저장하기 위해 Azure AD B2C에서 사용하는 애플리케이션 ID입니다.

4. 앱 등록으로 이동합니다.

5. b2c-extensions-app을 검색합니다.

6. 개요 창에서 애플리케이션(클라이언트) ID를 복사합니다.

7. - 문자를 제거합니다.

   

웹에 애플리케이션 배포

1. Azure 함수를 클라우드에 배포합니다. Azure Functions 설명서에서 자세히 알아봅니다.

2. Azure Function의 엔드포인트 웹 URL을 복사합니다.

3. 배포 후 설정 업로드 옵션을 선택합니다.

4. 환경 변수는 앱 서비스의 애플리케이션 설정에 업로드됩니다. Azure의 애플리케이션 설정에 대해 자세히 알아봅니다.

   참고 항목

   함수 앱을 관리할 수 있습니다. Azure Functions용 Visual Studio Code 개발에 대해 알아보려면 프로젝트 파일 배포도 참조하세요.

API 커넥터 구성 및 사용

1. API 커넥터를 만듭니다. 등록 사용자 흐름에 API 커넥터 추가를 참조하세요.

2. 사용자 흐름에 대해 사용하도록 설정합니다.

   

• 엔드포인트 URL - Azure 함수를 배포하는 동안 복사한 함수 URL
• 사용자 이름 - 정의한 사용자 이름
• 암호 - 정의한 암호

3. 사용자 흐름에 대한 API 커넥터 설정에서 사용자를 만들기 전에서 호출할 API 커넥터를 선택합니다.

4. API는 ArkoseSessionToken 값의 유효성을 검사합니다.

   

사용자 흐름 테스트

1. Azure AD B2C 테넌트를 엽니다.
2. 정책 아래에서 사용자 흐름을 선택합니다.
3. 만들어진 사용자 흐름을 선택합니다.
4. 사용자 흐름 실행을 선택합니다.
5. 애플리케이션에서 등록된 앱을 선택합니다(예: JWT).
6. 회신 URL의 경우, 리디렉션 URL을 선택합니다.
7. 사용자 흐름 실행을 선택합니다.
8. 등록 절차를 수행합니다.
9. 계정을 만드세요.
10. 로그아웃.
11. 로그인 흐름을 수행합니다.
12. 계속을 선택합니다.
13. Arkose Labs 퍼즐이 나타납니다.

리소스

• Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose
  • Azure AD B2C 등록 사용자 흐름 찾기
• Azure AD B2C 사용자 지정 정책 개요
• 자습서: Azure Active Directory B2C에서 사용자 흐름 및 사용자 지정 정책 만들기