개발자 포털 생성을 시작하기 전에 3scale과 함께 제공되는 샘플 Echo API 개발자 포털을 살펴봅니다. Echo API 개발자 포털은 개발자 포털을 생성하기 위한 시작점입니다. 개발자 포털을 처음부터 생성하지 않습니다. 대신 기본 Echo API 개발자 포털을 수정하여 원하는 모양과 느낌이 있는 개발자 포털을 생성합니다.

Echo API 개발자 포털을 탐색한 후 고유한 개발자 포털을 생성하기 전에 이를 변경합니다. 이러한 실습 단계는 개발자 포털 생성을 준비하는 데 도움이 됩니다.

이 절차는 샘플 3scale Echo API 랜딩 페이지 제목을 일반 Swagger Petstore API의 제목으로 대체합니다. 또한 Petstore API에 대한 문서를 표시하도록 개발자 포털을 업데이트하는 방법을 보여줍니다.

3scale에서는 기본 개발자 포털을 사용자 정의하여 자체 개발자 포털을 생성할 수 있는 다양한 기능을 제공합니다.

개발자 포털을 개발하는 동안 개발자 포털을 볼 필요가 있는 모든 사용자는 액세스 코드를 지정해야 합니다. API 공급자는 API 소비자가 액세스할 수 있도록 개발자 포털을 여는 데 필요한 작업을 수행하는 동안 이 액세스 코드를 사용하면 사용자 또는 이 코드가 있는 사용자만 개발자 포털을 볼 수 있습니다. 액세스 코드는 Domains & Access 페이지에 있습니다. 이 페이지는 NetNamespace > Developer Portal > Domains & Access 를 선택하여 관리 포털에서 사용할 수 있습니다.

다음 목록은 기본 개발자 포털을 수정하는 몇 가지 기능을 소개합니다.

개발자 포털 > 콘텐츠 환경에서 리소스 계층 구조에서 아래로 스크롤할 때 레이아웃 및 파트에 대한 제목을 볼 수 있습니다. 레이아웃 및 부분적을 통해 개발자 포털의 콘텐츠를 재사용할 수 있습니다.

레이아웃 및 부분적인 초안 및 게시 상태뿐만 아니라 버전 기록이 있습니다. 예를 들어 초안을 저장하고 게시하고 마지막으로 게시된 버전으로 되돌릴 수 있습니다.

레이아웃 및 부분 구조에 대한 코드 편집 및 작성에 대한 자세한 내용은 3scale Liquid Reference 를 참조하십시오.

일반적으로 자체 이미지, 파일 또는 기타 자산을 사용하여 기본 개발자 포털을 사용자 지정하려고 합니다. 이렇게 하려면 개발자 포털 콘텐츠 라이브러리에 파일을 추가하고, 이 환경의 경로를 기록한 다음 코드에서 콘텐츠 라이브러리에서 파일 위치에 대한 링크를 추가합니다.

기본 개발자 포털을 사용자 지정하여 자체 개발자 포털 사용자 지정을 시작하기 전에 기본 요소, 재사용 가능 콘텐츠, 페이지 계층, 페이지 헤더 및 페더, 브랜딩에 대한 계획이 있어야 합니다.

API 사용자에게 개발자 포털에 대한 액세스 권한을 부여하려면 API 공급자가 다음 작업을 수행해야 합니다. 이러한 작업은 동시에 수행할 수 있습니다.

개발자 포털이 활성화되기 전에 마지막으로 수행해야 하는 작업은 액세스 코드를 제거하는 것입니다. 개발자 포털에 대한 액세스 권한을 위해 인증 후, 개발자 포털을 철저하게 테스트한 후만 수행하여 원하는 대로 작동하는지 확인합니다.

액세스 코드를 삭제하려면 개발자 포털 > 콘텐츠 환경을 표시합니다. 오른쪽 하단에서 Open your Portal to the world 를 클릭하고 이 작업을 확인합니다.

API 소비자에 대한 개발자 포털을 여는 요구 사항 이상으로 다음을 수행할 수 있습니다.

3scale 2.8에서 외부 자산은 CDN(Content Delivery Networks)에서 3scale 코드베이스로 이동했습니다. 그 결과 3scale 2.8부터 네이티브 개발자 포털은 cdn_asset Liquid 태그를 사용하여 생성됩니다. 2.8보다 오래된 3scale 릴리스에서 업그레이드하는 경우 cdn_asset 태그와 함께 새 자산을 사용하도록 개발자 포털을 업데이트해야 합니다. 이 태그를 사용하면 더 이상 외부 웹 사이트에서 자산을 다운로드하기위한 종속성이 없습니다.

승인을 제거하려면 대상 > 계정 > 사용 규칙으로 이동한 다음 가입 섹션에서 개발자의 옵션을 직접 등록할 수 있는지 확인합니다.

필요한 경우 계정 및 서비스 계획이 활성화된 경우 페이지를 아래로 스크롤하여 두 경우 모두 변경 계획이 직접 활성화되었는지 확인합니다.

애플리케이션 계획

계정 및 서비스 플랜이 활성화된 경우 선택적으로 기본 계획을 선택하십시오.

계정 계획 (선택 사항)

서비스 플랜 (선택 사항)

원하는 설정을 변경했으면 개발자 포털로 이동한 후 새 개발자로 등록하여 결과를 테스트합니다. API에 맞는 올바른 워크플로를 얻기 위해 필요한 모든 사항을 실험하고 조정합니다. 워크플로에 만족한다면 이메일 알림을 확인하여 개발자에게 올바른 정보를 제공하는지 확인할 수 있습니다.

레이아웃 및 페이지 생성 절차는 물론, 태그 기본 사항에 대해서도 잘 알고 있어야 합니다. 유동 태그에 대한 자세한 내용은 플레이버 참조를 참조하십시오. 계정에서도 "여러 서비스" 기능을 활성화해야 합니다(Pro 계획 이상).

가입 워크플로 를 읽어 보는 것이 좋습니다. 따라서 전체 설정을 준비하고 작동 방식을 알 수 있습니다.

다중 서비스 가입 페이지의 템플릿 역할을 할 새 레이아웃을 만들어 프로세스를 시작합니다. CMS 시스템의 Layouts 섹션으로 이동하여 새 레이아웃을 만듭니다. multipleservicesignup 을 호출하면 이를 다른 레이아웃과 쉽게 구분할 수 있습니다. 편집기에서 표준 레이아웃의 일반 구조(예: 홈 또는 주 레이아웃)를 붙여넣습니다. 이제 필요하지 않은 모든 컨테이너, 사이드바, 추가 박스 등을 삭제합니다.

레이아웃의 백본을 생성한 후 구독할 코드를 사용자 지정합니다.

기본적으로 사용자 이름/이메일 및 암호 인증은 개발자 포털에서 활성화됩니다. 일반적으로 여기에 변경할 사항은 없습니다. 이는 개발자가 계정을 생성하고 로그인하는 표준 방식입니다.

그러나 일부 경우에는 이 인증 유형을 제거하려고 할 수 있습니다. 이를 수행하려면 다음 스크린샷과 같이 Login > New 템플릿을 편집합니다.

사용자 이름/이메일 및 암호 인증을 개발자 포털에 다시 추가해야 하는 경우 이전 단계에서 추가한 유동 주석 태그를 제거하기만 하면 됩니다.

고유한 GitHub 애플리케이션을 활성화하려면 먼저 애플리케이션을 생성하고 해당 자격 증명을 검색해야 합니다.

GitHub를 통해 인증을 구성할 수 있는 방법은 두 가지가 있습니다.

이 기본 구성을 변경하려면 3scale 관리 포털로 이동하여 대상 > 개발자 포털 > SSO 통합 에서 다음 화면이 표시됩니다.

GitHub 를 클릭하여 구성 화면에 액세스합니다.

이 화면에서 다음을 수행할 수 있습니다.

RH-SSO(Red Hat Single Sign-On)는 3scale과 함께 사용할 때 사용 가능한 RH-SSO ID 브로커링 및 사용자 페더레이션 옵션을 사용하여 개발자를 인증할 수 있는 통합 Sign-On 솔루션(SSO)입니다.

3scale과 호환되는 Red Hat Single Sign-On 버전에 대한 자세한 내용은 지원되는 구성 페이지를 참조하십시오.

무엇보다도 API 소비자는 개발자 포털에 계정이 있어야 합니다. 계정 관리 API를 사용하여 사용자를 3scale로 가져오거나 수동으로 생성할 수 있습니다. 오른쪽 상단에 있는 문서(?) → 3scale API Docs 섹션의 관리 포털에서 사용할 수 있는 3scale ActiveDocs에서 계정 관리 API 를 찾습니다.

사용자가 존재하는 경우 API 요청 호출을 사용하여 기본 제공 SSO 토큰으로 URL을 생성할 수 있습니다.

curl -X POST -d "provider_key=YOUR_PROVIDER_KEY&username=USERNAME&expires_in=60" https://YOUR_ADMIN_PORTAL.3scale.net/admin/api/sso_tokens.xml

이 호출에는 2개의 매개 변수가 있습니다. username은 토큰을 요청하려는 사용자를 지정하고, expires_in은 토큰이 유효할 시간(기본값: 10분)입니다.

로그인에 성공한 후 사용자를 리디렉션할 위치를 사용하여 추가 매개 변수 redirect_url을 전달할 수도 있습니다. 이 매개변수는 백분율로 인코딩 되어야 합니다. XML 응답에는 보안 토큰이 포함된 URL이 포함됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<sso_url>
https://YOUR_DEVELOPER_PORTAL/session/create?expires_at=1365087501&token=Q0dNWGtjL2h2MnloR11yWmNwazVZY0NhenlabnBoRUNaNUlyWjZaVG8wMnBGdVNhT0VGN1NUb3FRc1pwSnRrclBZSTIwOUFwRkVTc3NuK1JTbjUrMEE9PS0tY1ZrOGFldzFJNkxna1hrQzQyZ0NGQT09--712f2990ac9248ab4b8962be6467fb149b346000
</sso_url>

응답에는 토큰이 있는 RH SSO 로그인 URL이 포함됩니다.

https://YOUR_DEVELOPER_PORTAL/session/create?expires_at=1365087501&token=Q0dNWGtjL2h2MnloR11yWmNwazVZY0NhenlabnBoRUNaNUlyWjZaVG8wMnBGdVNhT0VGN1NUb3FRc1pwSnRrclBZSTIwOUFwRkVTc3NuK1JTbjUrMEE9PS0tY1ZrOGFldzFJNkxna1hrQzQyZ0NGQT09--712f2990ac9248ab4b8962be6467fb149b346000

URL에는 3scale 개발자 포털 SSO가 로그인하는 데 필요한 모든 정보가 포함되어 있습니다. 웹에 직접 임베드할 수 있습니다. 그러나 URL은 사용자가 클릭하기 전에 만료될 수 있으므로 페이지에 새 SSO URL을 동적으로 요청하고 리디렉션할 일반 링크를 사용하는 것이 좋습니다. 이렇게 하면 사용자가 개발자 포털에 원활하게 로그인됩니다.

제한된 섹션을 만들 때 각 섹션이 논리적 사용자 그룹에 매핑되도록 하는 것이 유용합니다. 이 예에서는 "파트너"라는 개발자 그룹이 있다고 가정합니다.

액세스를 제한하려는 모든 페이지 또는 페이지 그룹에 대해 개발자 포털에 새 섹션을 생성합니다. "public" 상태 필드를 선택 취소합니다. 그런 다음 이 섹션 내부에서 원하는 페이지를 드래그 앤 드롭합니다.

그룹을 생성하고 생성한 섹션에 대한 액세스 권한을 부여합니다.

이제 사용자 중 한 명에게 이 섹션에 대한 액세스 권한을 부여해야 할 때마다 이 그룹에 할당하면 됩니다. 이렇게 하려면 해당 계정 세부 정보 페이지로 이동한 다음 "Group Permissions(그룹 권한)"으로 이동합니다. 그런 다음 허용하려는 섹션의 확인란을 선택합니다.

유동 태그는 개발자 포털을 사용자 지정할 수 있는 매우 강력한 방법입니다. 조건을 기반으로 페이지의 일부를 숨기거나 표시하려면 여기에서 사용합니다. 3scale을 사용하면 계정, 애플리케이션 및 사용자에 대한 사용자 지정 필드를 만들 수 있습니다. API 프로바이더로 유용한 정보를 저장하는 데 사용할 수 있습니다. 여기에서 모든 계정에 연결된 사용자 지정 필드를 생성하고 이를 사용하여 지정된 계정이 파트너인지 여부를 나타냅니다. 대상 > 계정 > 필드 정의로 이동하여 이 필드를 생성할 수 있습니다. Account(계정) 섹션에 필드를 추가하고 숨겨진 것으로 표시하여 등록 페이지 또는 포털의 다른 위치에 표시되지 않습니다.

사용자 지정 필드를 배치하면 다음 코드 조각과 같이 조건에 래핑하여 파트너에게 특수 콘텐츠를 표시할 수 있습니다.

{{ if current_account.extra_fields.partner == 'true' }}
  // content only accessible to partners
{{ endif }}

또는 케이스에 더 적합한 경우 역순 논리를 사용합니다.

{{ unless current_account.extra_fields.partner == 'true' }}
  // content forbidden for partners
{{ endunless }}

여기에서 사용자에게 숨겨진 콘텐츠를 표시하려는 경우 계정 세부 정보 페이지의 파트너 필드에 'true'만 입력하면 됩니다.

상태 변경에 따라 제한된 콘텐츠에 대한 액세스 권한을 개발자에게 제공할 수 있습니다. 예를 들어 애플리케이션 계획을 업그레이드할 때.

계정 관리 API와 함께 Webhook 를 사용하여 액세스 프로비저닝 프로세스를 간소화합니다. 계정 관리 API는 관리 포털에서 사용할 수 있는 3scale ActiveDocs에 있습니다.

위에서 설명한 콘텐츠에 대한 액세스를 제한하는 두 가지 방법 외에도 로그인한 사용자가 필요한 또 다른 기술이 있습니다.

이 방법은 매우 쉽게 태그를 사용하여 수행할 수 있습니다. 다음 조건 내에서 로그인한 사용자만 사용할 수 있는 콘텐츠를 래핑하면 됩니다.

{{ if current_user }}
  // only visible if the user is logged in
{{ endif }}

이 섹션에서는 레이아웃과 페이지에서 유동 마크업 처리를 활성화하는 방법을 설명합니다.

9.1.1. 플래티넘 활성화

유동 마크업 처리는 모든 부분 및 이메일 템플릿에 기본적으로 활성화됩니다. 레이아웃에서 활성화는 system_name 입력 필드 바로 아래에 확인란을 선택하여 수행됩니다. 그러나 페이지에서 사용하려면 페이지의 고급 옵션 섹션으로 이동해야 합니다.

Advanced options(고급 옵션 ) 섹션을 확장하고 현재 활성화된 확인란을 표시하기만 하면 됩니다. 이제부터 내부 엔진에서 모든 유동 마크업을 처리하고 Developer Portal(개발자 포털) 기본 제공 편집기에서도 유동체에 대한 코드 강조 표시를 추가합니다.

<!-- if we are inside '/documentation' URL -->
<li class="{% if request.request_uri contains "/documentation" %}active{% endif %}"><!-- add the active class to the menu item -->
  <a href="/documentation">Documentation</a>
</li>

이 섹션에서는 유동 태그를 사용하여 이메일 템플릿을 사용자 지정하는 방법을 설명합니다.

이 문제 해결 섹션에서는 발생할 수 있는 일반적인 오류를 디버그하고 수정하는 데 도움이 됩니다.

이러한 이메일 템플릿은 계정 관리 범주에 속합니다.

이러한 템플릿의 경우 다음과 같은 유동 드롭을 사용할 수 있습니다.

또한 다음 템플릿은 다음과 같습니다.

추가 사용자를 계정에 초대하는 이메일:

다음과 같은 유동 드롭을 사용할 수 있습니다.

다음을 수행할 수 있습니다.

다음 이메일 템플릿은 모두 애플리케이션 및 애플리케이션 계획 알림을 처리합니다.

다음에 액세스할 수 있습니다.

애플리케이션 계획 변경 요청 알림 이메일 템플릿:

다음에 액세스할 수 있습니다.

다음 이메일 템플릿에는 다음과 같은 사용 가능한 여러 삭제가 포함되어 있습니다.

다음에 액세스할 수 있습니다.

위의 모든 유동이 떨어지는 것은 물론 다음과 같은 애플리케이션 계획 메시지까지..

추가 유동 감소가 나열되어 있습니다

애플리케이션 키에 대한 다음 이메일 템플릿에 대해 더 많은 유동적인 감소가 누적됩니다.

다음 이메일 템플릿…​

다음을 수행할 수 있습니다.

또한 다음 템플릿…​

다음 유동을 공유합니다.

다음 이메일 템플릿:

다음을 수행할 수 있습니다.

위의 유동이 떨어지는 것은 물론 다음과 같은 서비스 템플릿...

추가 유동 드롭이 나열되도록 합니다.

다음 이메일 템플릿…​

다음을 수행할 수 있습니다.

기본 스타일시트인 default.css가 있습니다. 매우 크고 복잡하므로 확장하는 것이 아니라 사용자 지정을 위해 기본값을 덮어쓰는 것이 좋습니다. 페이지를 만드는 방식과 동일한 방식으로 새 스타일시트를 만듭니다(고급 페이지 설정에서 적절한 MIME 콘텐츠 유형을 선택해야 함).

선택한 레이아웃이 비어 있는 것이 중요합니다. 그렇지 않으면 페이지 레이아웃 HTML이 CSS 규칙을 약화합니다.

bootstrap.css 링크 뒤에 각 레이아웃 템플릿(또는 공통 HEAD 섹션이 있는 경우 부분)에 사용자 지정 CSS를 추가합니다. 예를 들면 다음과 같습니다.

<link rel="stylesheet" href="/stylesheets/custom.css">

고유한 브랜딩을 경험해 보십시오!

일반적인 개념은 포털에서 다양한 페이지 스타일마다 별도의 레이아웃을 정의하는 것입니다. 시작할 때 Main layout 라는 하나의 표준 레이아웃이 있습니다. 이 레이아웃은 모든 시스템 생성 페이지에서 사용되므로 개발자 포털을 사용하는 전문가가 될 때까지 이 레이아웃을 변경하지 마십시오.

일반적으로 포털의 홈페이지에 고유한 스타일을 지정합니다. 기본 레이아웃 템플릿은 사용자 정의의 시작점입니다. 페이지 레이아웃 템플릿을 생성하려면 다음을 수행합니다.

첫 번째이자 가장 중요한 작업은 숨기려는 항목을 파악하는 것입니다. 이렇게 하려면 Firebug(또는 Chrome 개발자 도구 또는 Operakonfly와 같은 기타 개발자 도구)를 사용합니다. 원하는 요소를 선택하고 콘솔에서 마우스 오른쪽 버튼을 클릭하고 Copy CSS path를 선택합니다. 이렇게 하면 정확한 CSS 경로를 저장하여 쉽게 조작할 수 있습니다. 요소가 사이드바 탐색 위젯의 일부인 경우 목록에서 어떤 위치를 지정해야 합니다. 이를 위해 "+" 선택기(예: ul + li + li + li + li) 또는 :nth-child(n) CSS3 의사 클래스를 선택할 수 있습니다.

이제 요소를 식별하면 디스플레이 설정을 변경할 수 있습니다. 요소 유형에 따라 다음과 같은 두 가지 방법을 선택할 수 있습니다. CSS 조작 또는 autoscript 스크립트. CSS 조작은 더 가볍고 안정적이지만 여러 페이지에 있는 일부 요소에는 잘 작동하지 않습니다(예: 관리 포털 대시보드의 사이드바에 있는 3차 요소는 계정 섹션에도 있지만 다른 값이 있습니다). 일부 복잡한 구현에서는 기존 브라우저에서 지원하지 않는 CSS3을 사용해야 합니다. 다음 두 단계에서는 두 가지 방법을 모두 확인할 수 있습니다.

예를 들어 Dashboard(대시보드) 페이지에서 최신 요소를 숨기십시오. 첫 번째 단계에 따라 CSS 경로를 다음과 같이 식별했습니다.

#three-scale .dashboard_bubble

경로가 같은 두 번째 박스이므로 "+" 선택기를 사용합니다. 이제 경로가 다음과 같이 표시됩니다.

.main_layout #three-scale .dashboard_bubble + .dashboard_bubble
/* or */
.main_layout #three-scale .dashboard_bubble:nth-child(1)

디스플레이 속성을 none으로 변경하면 해당 상자가 표시되지 않습니다.

.main_layout #three-scale .dashboard_bubble:nth-child(1) {
  display: none;
}

사이드바 메뉴 요소와 같이 숨기는 복잡한 요소가 있는 경우, 몇 가지를 사용하는 것이 좋습니다. 이러한 요소의 CSS 경로는 Dashboard 및 Account 섹션에서 동일하며 두 섹션의 요소를 숨기는 것을 원하지 않습니다. 따라서 CSS 경로와 컨텐츠에 따라 요소를 선택하십시오. 이 예에서는 대시보드의 사이드바에서 messages 섹션을 숨기고 있다고 가정합니다. CSS 경로는 다음과 같습니다.

#three-scale #submenu li a

콘텐츠와 일치하려면 .text() 함수를 사용합니다. 또한 문서의 헤드와 준비 함수 내에 코드를 포함하므로 모든 내용이 생성된 후에 실행됩니다.

결과 코드 조각은 다음과 같습니다.

$(function() {
  $('#three-scale #submenu li a').each(function() {
    if ($(this).text() == "Messages")
      $(this).parent().css('display', 'none');
  });
});

이것이 유일한 솔루션이 아닙니다. 가능한 한 가지 방법을 보여 줍니다. 동일한 예는 속성 값에 기반하는 CSS3 선택기와 함께 순수 CSS를 사용하여 수행할 수 있습니다. 전체 CSS3 선택기 사양을 보려면 여기를 참조하십시오.

이 워크플로 부분은 아래 단계에 따라 관리 포털에서 쉽게 설정할 수 있습니다.

대상 > 개발자 포털 > 가입 으로 이동하면 가입 법적 약관을 입력할 빈 페이지가 표시됩니다. HTML, JavaScript 및 CSS를 조합하여 사용할 수 있습니다. 또한 코드 삽입을 클릭하여 제공하는 몇 가지 토글 코드도 있습니다. 이 상자에서 작성한 콘텐츠는 개발자 포털의 등록 페이지에 있는 Sign Up(로그인) 버튼 바로 위에 표시됩니다.

사용 약관을 작성하고 나면 Update(업데이트)를 클릭하여 저장합니다.

코드 토글을 사용한 경우 "다음 법률적 약관에 동의하여" 지정한 사용 약관을 표시하고 숨기는 링크를 표시합니다.

기본적으로 Signup(등록) 페이지에 저장되지만 개발자 포털의 모든 위치에 포함될 수 있는 부분(signup_licence)입니다. Signup 페이지에서 이를 제거하려면 페이지에서 {% include 'signup_licence' %} 행을 제거하면 됩니다. 마찬가지로, 다른 곳에 포함하려는 경우 코드 조각을 통해 동일한 부분을 사용할 수 있습니다. 코드 조각은 개발자 포털의 모든 위치에 배치할 수 있습니다.

또한 사용자가 새 애플리케이션(new_application_licence 부분)을 만들 때 또는 새서비스(service_subscription_licence 부분)를 서브스크립션할 때 다른 사용 약관 세트를 수락할 수도 있습니다. 이를 설정하려면 위에 설명된 동일한 절차를 수행하면 됩니다.

다른 정책이 상주하는 다른 URL도 정의할 수 있습니다. 대상 > 청구 > 신용 카드 정책으로 이동하여 정책 페이지가 있는 경로를 설정하여 설정합니다.

이러한 링크가 작동하려면 개발자 포털에서 새 페이지를 만들어야 합니다.

완료되면 URL의 유동 삭제를 사용하여 참조할 수 있습니다. 예를 들면 다음과 같습니다.

<a href="{{ urls.credit_card_terms }}">Legal Terms</a>
<a href="{{ urls.credit_card_privacy }}">Privacy</a>
<a href="{{ urls.credit_card_refunds }}">Refunds</a>

이제 다 끝났습니다!