Använda anpassade flikar i din app

Vissa webbplatser eller webbplatsfunktioner fungerar endast i betrodda webbläsarmiljöer. En WebView som din app använder för att visa din webbplats anses inte vara tillförlitlig. Det beror på att de funktioner som vi använder för att erbjuda dig en visuellt tilltalande och anpassningsbar app kan missbrukas i onda syften. Självklart utför eller tillåter våra appar inte sådana skadliga åtgärder, men vissa webbplatser begränsar alla WebViews på grund av denna teoretiska risk.

För att undvika detta kan du öppna delar av din webbplats som inte fungerar i WebViews i så kallade anpassade flikar.

Exempel på användningsområden

Om din webbplats har en funktion "Logga in med Google" (eller Apple, Facebook, Twitter osv.) kanske den bara fungerar i en anpassad flik. Facebook säger tydligt att inloggning i WebViews inte är tillåten, medan vissa av de andra helt enkelt inte fungerar.

Hur det kommer att se ut

Här är två skärmdumpar från vår Android-app så att du kan se skillnaden mellan att öppna en sida i appen och i en anpassad flik.

En skärmdump av vår app som visar hemsidan i en anpassad flik.

Användning

Många av de funktioner som används i stegen nedan är från apphjälparskriptet (app helper script).

Öppna fliken anpassad. Den första parametern är den URL som ska öppnas i den anpassade fliken. Se till att du skickar en fullständig URL som börjar med http eller https, relativa URL:er fungerar inte. Den andra parametern är ett javascriptobjekt som innehåller data som du vill skicka till den anpassade fliken. Dessa data kommer att skickas som en URL-frågeparameter, se nästa steg för hur du hämtar dem.
Du kanske vill kolla in executeWhenAppReady()-funktionen i vårt hjälparskript för appen. Det säkerställer att din webbplats inte försöker interagera med appen innan den är klar eller när din webbplats laddas med en vanlig webbläsare (ReferenceError, function is not defined).
```
<script>
    openCustomTab("https://webtoapp.design/user/login", {
        "myFirstValue": "abc",
        "myNumbers": "123"
    });
</script>
            
```
Kontrollera på sidan som du öppnade i den anpassade fliken att sidan laddades i en anpassad flik (och inte bara av en vanlig användare i webbläsaren).
```
<script>
    if (isInCustomTab()) {
        // continue with the next steps...
    }
</script>
            
```

Därefter, kan du hämta de data som du skickade till den anpassade fliken.


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

När du är klar med det du gjorde i den anpassade fliken (t.ex. låter användaren logga in) stänger du den anpassade fliken. Du kan skicka tillbaka ett objekt till den sida som öppnade den anpassade fliken.
```
<script>
    closeCustomTab({
        "somedata": "mydata",
        "moredata": {
            "test": "myvalue"
        }
    })
</script>
            
```

Nu är användaren tillbaka i appen på den sida där du ursprungligen öppnade den anpassade fliken. En händelse kommer att utlösas som innehåller de data som du returnerade från den anpassade fliken. Användaren kan också stänga den anpassade fliken manuellt. Det framgår av händelsen som du kan se nedan.


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

Exempel

Här är några exempel på hur du kan implementera ett inloggningsflöde med anpassade flikar.

Huvudproblemet är alltid att vi vill logga in användaren i appen (eftersom det är det som användaren vill använda), men de måste ange sina inloggningsuppgifter i den anpassade fliken som har separata cookies (där du vanligtvis lagrar om någon är inloggad).

Logga in med cookies

Detta är förmodligen det enklaste sättet att logga in med en anpassad flik. Tänk på att inte ställa in de cookies som måste överföras till appen som HttpOnly, eftersom HttpOnly-cookies inte kan nås via JavaScript.

Diagram över ett flöde för inloggning på en anpassad flik där du överför cookies.

Öppna diagrammet i ett nytt fönster

Logga in med en Token

Denna inloggningsmetod är mer komplicerad men mer flexibel, så den kan vara att föredra beroende på hur du använder den.

Diagram över ett eget inloggningsflöde för en anpassad flik där du överför en token.