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

André Cipriani Bandarra

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

ff-출처 탐색

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

사용자가 확인된 출처에서 벗어나면 맞춤 탭 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>
...

다음으로 AndroidManifest.xml 내에서 LauncherActivity를 참조하는 기존 활동 요소 내에 새 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에는 다중 출처 신뢰할 수 있는 웹 활동을 위한 샘플 애플리케이션이 있습니다. 확인해 주세요.

문제 해결

디지털 애셋 링크를 설정하는 데는 몇 가지 단계가 있습니다. 애플리케이션의 상단에 맞춤 탭 표시줄이 계속 표시된다면 구성에 문제가 있을 가능성이 높습니다.

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

기기에 설치된 애플리케이션에서 디지털 애셋 링크를 디버그하는 데 도움이 되는 멋진 피터의 애셋 링크 도구도 있습니다.