앱에서 맞춤 탭 사용하기

일부 웹사이트나 웹사이트 기능은 신뢰할 수 있는 브라우저 환경에서만 작동해요. 앱에서 웹사이트를 표시하는 데 사용하는 WebView는 신뢰할 수 있는 환경으로 간주되지 않아요. 시각적으로 매력적이고 맞춤 설정 가능한 앱을 제공하기 위해 사용하는 기능이 악의적인 목적으로 악용될 수 있기 때문이에요. 물론 저희 앱은 그러한 악의적인 작업을 수행하거나 허용하지 않지만, 일부 웹사이트는 이러한 이론적 위험 때문에 모든 WebView의 사용을 제한해요.

이 문제를 피하려면 WebView에서 작동하지 않는 웹사이트의 일부를 이른바 커스텀 탭에서 열 수 있어요.

사용 사례 예시

웹사이트에서 'Google로 로그인'(또는 Apple, Facebook, Twitter 등) 기능을 제공하는 경우 커스텀 탭에서만 작동할 수 있어요. Facebook은 WebView에서의 로그인을 명확히 금지하고 있으며, 다른 서비스 중 일부는 단순히 작동하지 않아요.

표시되는 모습

앱에서 페이지를 여는 경우와 커스텀 탭에서 여는 경우의 차이를 확인할 수 있도록 Android 앱의 스크린샷 2개를 준비했어요.

사용법

아래 단계에서 사용하는 여러 함수는 앱 도우미 스크립트에서 가져온 것이에요.

커스텀 탭을 열어요. 첫 번째 매개변수는 커스텀 탭에서 열 URL이에요. http 또는 https로 시작하는 전체 URL을 전달해야 하며, 상대 URL은 작동하지 않아요. 두 번째 매개변수는 커스텀 탭에 전달하려는 데이터를 포함하는 JavaScript 객체예요. 이 데이터는 URL 쿼리 매개변수로 전달되며, 데이터를 가져오는 방법은 다음 단계를 참조하세요.
다음의 executeWhenAppReady() 함수를 확인해 보세요. 앱 도우미 스크립트예요.. 이 함수는 앱이 준비되기 전이나 웹사이트가 일반 브라우저에서 로드되었을 때 웹사이트에서 앱과 상호작용을 시도하지 않도록 해줘요(ReferenceError, 함수가 정의되지 않음).
```
<script>
    openCustomTab("https://webtoapp.design/user/login", {
        "myFirstValue": "abc",
        "myNumbers": "123"
    });
</script>
            
```
커스텀 탭에서 연 페이지가 일반 사용자의 브라우저가 아니라 커스텀 탭에서 로드되었는지 확인하세요.
```
<script>
    if (isInCustomTab()) {
        // continue with the next steps...
    }
</script>
            
```

그런 다음 커스텀 탭에 전달한 데이터를 가져올 수 있어요.


<script>
    // this is the data you passed as a second parameter to openCustomTab, so in our example from above:
    // {
    //     "myFirstValue": "abc",
    //     "myNumbers": "123"
    // }
    let myData = getCustomTabData();
</script>

커스텀 탭에서 하려던 작업(예: 사용자의 로그인)이 끝나면 커스텀 탭을 닫으세요. 커스텀 탭을 열었던 페이지로 객체를 다시 전달할 수 있어요.
```
<script>
    closeCustomTab({
        "somedata": "mydata",
        "moredata": {
            "test": "myvalue"
        }
    })
</script>
            
```

이제 사용자는 처음 커스텀 탭을 열었던 앱 페이지로 돌아와요. 커스텀 탭에서 반환한 데이터를 포함하는 이벤트가 발생해요. 사용자가 커스텀 탭을 직접 닫을 수도 있어요. 아래에서 볼 수 있듯이 이벤트 세부 정보에 이 사실이 표시돼요.


<script>
    document.addEventListener("customTabClosed", function (e) {
        if ("reason" in e.detail) {
            // currently only supports the reason "closed manually"
            console.log("The custom tab was " + e.detail.reason);
        }
        else {
            // the custom tab was closed by the website javascript
            // this is the data you passed to closeCustomTab, so in our example from above:
            // {
            //     "somedata": "mydata",
            //     "moredata": {
            //         "test": "myvalue"
            //     }
            let returnedData = e.detail;
        }
    });
</script>