Hoe kun je: Open en sluit aangepaste tabbladen

Geplaatst op 12. juli 2022 door Jan Bunk


Sommige websites of websitefuncties werken alleen in vertrouwde browser omgevingen. Een WebView zoals je app die gebruikt om je website weer te geven wordt niet als vertrouwd beschouwd. Dat komt omdat de functies die we gebruiken om je een visueel aantrekkelijke en aanpasbare app te bieden, voor snode doeleinden misbruikt kunnen worden. Uiteraard voeren onze apps zulke snode acties niet uit of staan ze niet toe, maar sommige websites beperken alle WebViews vanwege dit theoretische risico.

Om dat te vermijden kun je delen van je website, die niet in WebViews werken, openen in zogenaamde aangepaste tabbladen.

Voorbeeld gebruikssituaties

Als je website een 'Inloggen met Google' (of Apple, Facebook, Twitter, enz.) functie biedt, werkt die misschien alleen in een aangepast tabblad. Facebook zegt duidelijk dat inloggen in WebViews niet is toegestaan, terwijl sommige andere gewoon niet werken.

Hoe het er uit zal zien

Hier zijn 2 schermafdrukken van onze Android app, zodat je het verschil kunt zien tussen het openen van een pagina in de app en in een aangepast tabblad.

Een screenshot van onze app op de homepage.
Een screenshot van onze app op de homepage.
Een schermafbeelding van onze app die de startpagina toont in een aangepast tabblad.
Een schermafbeelding van onze app die de startpagina toont in een aangepast tabblad.

Gebruik

Veel functies die in de onderstaande stappen gebruikt worden zijn uit het app helper script.
  1. Open de custom tab. De eerste parameter is de URL die in de aangepaste tab geopend moet worden. Zorg ervoor dat je een volledige URL doorgeeft die begint met http of https, relatieve URL's werken niet. De tweede parameter is een javascript object dat gegevens bevat die je aan de aangepaste tab wilt doorgeven. Deze gegevens worden doorgegeven als een URL query parameter, zie de volgende stap om te zien hoe je ze kunt opvragen.
    
    <script>
        openCustomTab("https://webtoapp.design/user/login", {
            "myFirstValue": "abc",
            "myNumbers": "123"
        });
    </script>
                
  2. Controleer op de pagina die je in de aangepaste tab opende, of de pagina in een aangepaste tab geladen werd (en niet gewoon door een gewone gebruiker in de browser).
    
    <script>
        if (isInCustomTab()) {
            // continue with the next steps...
        }
    </script>
                
  3. Vervolgens kun je de gegevens opvragen die je aan de aangepaste tab doorgaf.
    
    <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>
                
  4. Als je klaar bent met wat je in de aangepaste tab aan het doen was (bv. de gebruiker laten inloggen), sluit je de aangepaste tab. Je kunt een object teruggeven aan de pagina die de aangepaste tab opende.
    
    <script>
        closeCustomTab({
            "somedata": "mydata",
            "moredata": {
                "test": "myvalue"
            }
        })
    </script>
                
  5. Nu is de gebruiker terug in de app op de pagina waar je aanvankelijk de aangepaste tab opende. Er vuurt een gebeurtenis af die de gegevens bevat die je van het aangepaste tabblad teruggaf. De gebruiker kan de aangepaste tab ook handmatig sluiten. Het gebeurtenisdetail geeft dat aan, zoals je hieronder kunt zien.
    
    <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>
                

Voorbeelden

Hier zijn enkele voorbeelden over hoe je een aanmeldstroom met aangepaste tabbladen kunt implementeren.

Het grootste probleem is steeds dat we de gebruiker willen inloggen in de app (want dat wil de gebruiker gebruiken), maar dat hij zijn inloggegevens moet invoeren in de aangepaste tab, die aparte cookies heeft (waarin je meestal opslaat of iemand ingelogd is).

Inloggen met cookies

Dit is waarschijnlijk de eenvoudigste manier om in te loggen met een aangepast tabblad. Denk eraan de cookies die naar de app moeten niet als HttpOnly in te stellen, want HttpOnly cookies kunnen niet via JavaScript benaderd worden.

Schema van een aangepaste tab login stroom waarin je cookies doorgeeft. Open diagram in nieuw venster

Aanmelden met een Token

Deze aanmeldmethode is ingewikkelder maar flexibeler, dus kan ze de voorkeur hebben, afhankelijk van je gebruikssituatie.

Schema van een aangepaste tab login stroom waarin je een token overdraagt. Open diagram in nieuw venster

Dingen om in gedachten te houden

Pagina's die in een aangepast tabblad geladen worden gedragen zich alsof ze in de browser van de gebruiker geladen zijn, wat betekent dat app-specifieke functies niet werken, bijvoorbeeld: