다중 출처 신뢰할 수 있는 웹 활동

André Cipriani Bandarra

신뢰할 수 있는 웹 활동은 맞춤 탭 기반의 프로토콜을 사용하여 PWA와 같은 웹 앱 콘텐츠를 Android 앱과 통합하는 새로운 방법입니다.

ff-origin 탐색

신뢰할 수 있는 웹 활동은 콘텐츠를 전체 화면으로 표시하기 위해 디지털 애셋 링크를 사용하여 열려 있는 출처를 열어야 합니다.

사용자가 검증된 출처에서 벗어나면 맞춤 탭 UI가 표시됩니다. 맞춤 탭의 URL 표시줄은 사용자가 현재 애플리케이션 외부의 도메인을 탐색하고 있음을 알리는 동시에 확인된 출처로 빠르게 돌아갈 수 있는 X 버튼도 제공합니다.

하지만 웹 앱에서는 여러 출처를 포괄하는 환경을 만드는 것도 일반적입니다. 예를 들어 기본 환경이 www.example.com인 쇼핑 애플리케이션이 있고 결제 흐름은 checkout.example.com에서 호스팅되는 경우를 들 수 있습니다.

이 경우 맞춤 탭을 표시하는 것은 바람직하지 않습니다. 사용자가 동일한 애플리케이션을 사용 중일 뿐만 아니라 상단 표시줄로 인해 사용자가 애플리케이션을 떠났다고 생각하고 결제를 포기할 수 있기 때문입니다.

신뢰할 수 있는 웹 활동을 사용하면 개발자가 여러 출처를 검증할 수 있으며 사용자는 이러한 출처를 탐색할 때 전체 화면으로 유지됩니다. 기본 도메인과 마찬가지로 개발자는 검증된 각 출처를 제어할 수 있어야 합니다.

여러 출처에 대한 유효성 검사 설정

기본 출처에서와 같이 디지털 애셋 링크를 통해 검증이 이루어지며 검증할 각 도메인에는 자체 assetlinks.json 파일이 있어야 합니다.

www.example.com 및 checkout.example.com의 예에서는 다음과 같이 계산됩니다.

  • https://www.example.com/.well-known/assetlinks.json
  • https://checkout.example.com/.well-known/assetlinks.json

각 도메인이 동일한 Android 애플리케이션에 연결되므로 assetlinks.json 파일이 완전히 동일하게 표시됩니다.

Android 애플리케이션의 패키지 이름이 com.example.twa이라고 가정하면 두 assetlink.json 파일 모두 다음과 유사한 내용을 포함합니다.

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
  "namespace": "android_app",
  "package_name": "com.example",
   "sha256_cert_fingerprints": ["..."]}
}]

Android 애플리케이션에 여러 출처 추가

Android 애플리케이션에서는 확인이 필요한 모든 출처를 포함하도록 asset_statements 선언을 업데이트해야 합니다.

<string name="asset_statements">
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://www.example.com\"
    }
}],
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://checkout.example.com\"
    }
}],
</string>

LauncherActivity에 출처 추가

기본 LauncherActivity 사용

android-browser-helper 지원 라이브러리의 일부인 LauncherActivity를 사용하면 Android 프로젝트를 구성하여 검증할 출처를 여러 개 추가할 수 있습니다.

먼저 res/values/strings.xml 파일에 string-array 요소를 추가합니다. 유효성을 검사할 각 추가 URL은 item 하위 요소 내에 있습니다.

...
<string-array name="additional_trusted_origins">
    <item>https://www.google.com</item>
</string-array>
...

다음으로, LauncherActivity를 참조하는 기존 활동 요소 내부(AndroidManifest.xml 내에서)에 새 meta-data 태그를 추가합니다.

...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/app_name">


    <meta-data
        android:name="android.support.customtabs.trusted.ADDITIONAL_TRUSTED_ORIGINS"
        android:resource="@array/additional_trusted_origins" />


    ...
</activity>
...

맞춤 LauncherActivity 사용

맞춤 코드를 사용하여 신뢰할 수 있는 웹 활동을 실행하는 경우 신뢰할 수 있는 웹 활동을 시작하는 인텐트를 빌드할 때 setAdditionalTrustedOrigins를 호출하여 출처를 추가할 수 있습니다.

public void launcherWithMultipleOrigins(View view) {
  List<String> origins = Arrays.asList(
      "https://checkout.example.com/"
  );


  TrustedWebActivityIntentBuilder builder = new TrustedWebActivityIntentBuilder(LAUNCH_URI)
      .setAdditionalTrustedOrigins(origins);


  new TwaLauncher(this).launch(builder, null, null);
}

결론

이 단계를 통해 이제 신뢰할 수 있는 웹 활동이 여러 출처를 지원할 수 있습니다. android-browser-helper에는 다중 출처 신뢰할 수 있는 웹 활동을 위한 샘플 애플리케이션이 있습니다. 확인하세요.

문제 해결

디지털 애셋 링크 설정에는 몇 가지 움직이는 부분이 있습니다. 애플리케이션에서 계속 상단에 맞춤 탭 표시줄을 표시하는 경우 구성에 문제가 있을 가능성이 높습니다.

신뢰할 수 있는 웹 활동 빠른 시작 가이드에는 디지털 애셋 링크 문제를 디버그하는 방법에 관한 유용한 문제 해결 섹션이 있습니다.

또한 기기에 설치된 애플리케이션에서 디지털 애셋 링크를 디버그하는 데 도움이 되는 멋진 Peter's Asset Link Tool도 있습니다.