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

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>
...

다음으로 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에는 다중 출처 신뢰할 수 있는 웹 활동을 위한 샘플 애플리케이션이 있습니다. 확인해 주세요.

문제 해결

디지털 애셋 링크를 설정하는 데는 몇 가지 단계가 있습니다. 애플리케이션 상단에 여전히 맞춤 탭 표시줄이 표시되면 구성에 문제가 있는 것일 수 있습니다.

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

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