Korzystanie z własnych kart w aplikacji

Niektóre strony lub ich funkcje działają tylko w zaufanych środowiskach przeglądarki. WebView, z którego korzysta Twoja aplikacja do wyświetlania strony, nie jest uznawany za zaufany. Wynika to z tego, że funkcje, które umożliwiają nam stworzenie atrakcyjnej i konfigurowalnej aplikacji, mogłyby zostać wykorzystane w złych celach. Oczywiście nasze aplikacje nie wykonują ani nie pozwalają na takie działania, ale niektóre strony ograniczają wszystkie WebView właśnie przez to teoretyczne ryzyko.

Aby tego uniknąć, możesz otwierać części swojej strony, które nie działają w WebView, w tzw. custom tabach.

Przykładowe zastosowania

Jeśli Twoja strona oferuje logowanie przez Google (lub Apple, Facebook, Twitter itd.), to może ono działać tylko w custom tabie. Facebook jasno mówi, że logowanie w WebView jest zabronione, a niektóre inne po prostu nie działają.

Jak to będzie wyglądać

Oto 2 zrzuty ekranu z naszej aplikacji na Androidzie, żebyś mógł zobaczyć różnicę między otwarciem strony w aplikacji a w custom tabie.

Zrzut ekranu naszej aplikacji na stronie głównej.

Zrzut ekranu naszej aplikacji pokazujący stronę główną w custom tabie.

Użycie

Wiele funkcji używanych w poniższych krokach pochodzi ze skryptu pomocniczego aplikacji.

Otwórz custom taba. Pierwszy parametr to adres URL, który ma zostać otwarty w custom tabie. Upewnij się, że podajesz pełny adres zaczynający się od http lub https, względne adresy nie zadziałają. Drugi parametr to obiekt javascriptowy zawierający dane, które chcesz przekazać do custom taba. Dane te zostaną przekazane jako parametr zapytania w URL-u, zobacz kolejny krok, jak je odebrać.
Możesz sprawdzić funkcję executeWhenAppReady() w naszym pomocniczym skrypcie aplikacji. Zapewnia, że Twoja strona nie próbuje komunikować się z aplikacją zanim będzie gotowa lub gdy strona jest otwarta w zwykłej przeglądarce (ReferenceError, funkcja nie jest zdefiniowana).
```
<script>
    openCustomTab("https://webtoapp.design/user/login", {
        "myFirstValue": "abc",
        "myNumbers": "123"
    });
</script>
            
```
Na stronie, którą otworzyłeś w custom tabie, sprawdź, czy została załadowana w custom tabie (a nie po prostu przez zwykłego użytkownika w przeglądarce).
```
<script>
    if (isInCustomTab()) {
        // continue with the next steps...
    }
</script>
            
```

Następnie możesz odebrać dane, które przekazałeś do custom taba.


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

Gdy skończysz to, co miałeś zrobić w custom tabie (np. pozwolisz użytkownikowi się zalogować), zamknij custom taba. Możesz przekazać obiekt z powrotem do strony, która otworzyła custom taba.
```
<script>
    closeCustomTab({
        "somedata": "mydata",
        "moredata": {
            "test": "myvalue"
        }
    })
</script>
            
```

Teraz użytkownik wraca do aplikacji na stronę, z której otworzyłeś custom taba. Zostanie wywołane zdarzenie, które zawiera dane zwrócone z custom taba. Użytkownik może też sam zamknąć custom taba. Szczegóły zdarzenia pokażą to, jak widać poniżej.


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

Przykłady

Oto kilka przykładów, jak możesz zaimplementować logowanie z użyciem custom tabów.

Główny problem polega na tym, że chcemy zalogować użytkownika w aplikacji (bo z niej chce korzystać), ale musi on podać dane logowania w custom tabie, który ma osobne ciasteczka (a to tam zwykle przechowujesz informację o zalogowaniu).

Logowanie przez ciasteczka

To prawdopodobnie najprostszy sposób logowania przez custom taba. Pamiętaj, żeby nie ustawiać ciasteczek, które mają być przekazane do aplikacji, jako HttpOnly, bo ciasteczka HttpOnly nie są dostępne przez JavaScript.

Schemat logowania przez custom taba z przekazywaniem ciasteczek.

Otwórz schemat w nowym oknie

Logowanie przez token

Ta metoda logowania jest bardziej skomplikowana, ale też bardziej elastyczna, więc może być lepsza w zależności od Twojego przypadku.

Schemat logowania przez custom taba z przekazywaniem tokena.