Svenska

chrome-extension
monetization
auth

Tjäna pengar på din Chrome-extension med OpenID Connect (OAuth 2.0) autentisering

Lär dig hur du kan tjäna pengar på din Chrome-extension genom att lägga till användarautentisering.

Gao

Founder

4/2/2024

Sluta slösa veckor på användarautentisering

Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.

Kom igång

Chrome-tillägg är ett fantastiskt sätt att utöka funktionaliteten i Chrome-webbläsaren. När du har ett populärt tillägg kanske du vill tjäna pengar på det genom att erbjuda professionella funktioner till användare som betalar för dem. Användarautentisering är ett måste för detta ändamål:

Användaridentifiering: Du behöver veta vem användaren är för att erbjuda personliga funktioner.
Åtkomstkontroll: Du behöver kontrollera vem som kan få åtkomst till de betalda funktionerna.
Prenumerationshantering: Du behöver erbjuda ett sätt för användare att prenumerera och hantera sina prenumerationer.

Å andra sidan vill vi inte vara bundna till Google-kontosystemet, eftersom dina användare kanske föredrar att använda andra konton, eller, du kan ha flera tjänster som du vill integrera med samma identitetssystem.

En snabb sammanfattning av fördelarna med att använda OpenID Connect (OIDC) för autentisering:

Ingen leverantörsinlåsning: Dina användare kan använda olika metoder för att logga in, istället för att tvingas till Google.
Enkel inloggning (SSO): Användare kan logga in en gång och få tillgång till flera tjänster eller applikationer.
Standardiserat: OIDC är en öppen standard som är allmänt antagen och stöds, dessutom är det säkert.

I denna handledning kommer vi att använda Logto som OIDC-leverantör, vilket är ett alternativ till Auth0 för att bygga identitetsinfrastrukturer.

Låt oss börja!

Introduktion

Om du antar att du sätter en "Logga in"-knapp i din Chrome-extensions popup, kommer autentiseringsflödet att se ut så här:

För andra interaktiva sidor i ditt tillägg behöver du bara ersätta Extension popup-deltagaren med sidans namn. I denna handledning kommer vi att fokusera på popupsidan.

Skapa en Logto-applikation

För att komma igång, skapa en Logto-applikation med typen "Single page app". Följ dessa steg för att skapa en Logto-applikation:

Logga in på Logto Console.
Klicka på Skapa applikation.
På den öppnade sidan, hitta "Skapa app utan ramverk"-knappen längst ned och klicka på den.
Välj typen "Single page app" och ange ditt applikationsnamn.
Klicka på Skapa.

Konfigurera ditt Chrome-tillägg

Installera Logto SDK

Installera Logto SDK i ditt Chrome-tilläggs projekt:

Uppdatera `manifest.json`

Logto SDK kräver följande behörigheter i manifest.json:

permissions.identity: Krävs för Chrome Identity API, som används för att logga in och ut.
permissions.storage: Krävs för att spara användarens session.
host_permissions: Krävs för att Logto SDK ska kunna kommunicera med Logto API:er.

Konfigurera ett bakgrundsskript (service worker)

I ditt Chrome-tilläggs bakgrundsscript, initialisera Logto SDK:

Ersätt <ditt-logto-endpoint> och <ditt-logto-app-id> med de verkliga värdena. Du kan hitta dessa värden på applikationssidan du just skapade i Logto Console.

Om du inte har ett bakgrundsskript kan du följa den officiella guiden för att skapa ett.

Sedan behöver vi lyssna på meddelanden från andra extensionssidor och hantera autentiseringsprocessen:

Du kanske märker att det finns två omdirigerings-URI:er som används i koden ovan. De skapas båda med chrome.identity.getRedirectURL, som är ett inbyggt Chrome API för att generera en omdirigerings-URL för autentiseringsflöden. De två URI:erna kommer att vara:

https://<tilläggs-id>.chromiumapp.org/callback för inloggning.
https://<tilläggs-id>.chromiumapp.org/ för utloggning.

Observera att dessa URI:er inte är åtkomliga och de används endast för att Chrome ska kunna utlösa specifika åtgärder för autentiseringsprocessen.

Uppdatera Logto-applikationsinställningar

Nu behöver vi uppdatera Logto-applikationsinställningarna för att tillåta de omdirigerings-URI:er vi just skapade.

Gå till applikationssidan i Logto Console.
I avsnittet "Omdirigerings-URI:er", lägg till URI:n: https://<tilläggs-id>.chromiumapp.org/callback.
I avsnittet "Omdirigerings-URI:er efter utloggning", lägg till URI:n: https://<tilläggs-id>.chromiumapp.org/.
I avsnittet "CORS tillåtna ursprung", lägg till URI:n: chrome-extension://<tilläggs-id>. SDK:t i Chrome-tillägget kommer att använda detta ursprung för att kommunicera med Logto API:er.
Klicka på Spara ändringar.

Kom ihåg att ersätta <tilläggs-id> med ditt faktiska tilläggs-ID. Du kan hitta tilläggs-ID:t på chrome://extensions sidan.

Efter att ha uppdaterat inställningarna, borde dina Logto-applikationsinställningar se ut så här:

Applikationsinställningar

Vi är nästan där! Låt oss lägga till inloggnings- och utloggningsknappar och annan nödvändig logik till popup-sidan.

I popup.html filen:

I popup.js filen (förutsatt att popup.js ingår i popup.html):

Kontrollpunkt: Testa autentiseringsflödet

Nu kan du testa autentiseringsflödet i ditt Chrome-tillägg:

Öppna tilläggspopupen.
Klicka på "Logga in"-knappen.
Du kommer att omdirigeras till Logto inloggningssida.
Logga in med ditt Logto-konto.
Du kommer att omdirigeras tillbaka till Chrome.

Kontrollera autentiseringstillstånd

Eftersom Chrome tillhandahåller enhetliga lagrings-API:er, förutom inloggnings- och utloggningsflödet, kan alla andra Logto SDK-metoder användas direkt på popupsidan.

I din popup.js, kan du återanvända LogtoClient-instansen som skapades i bakgrundsskriptet, eller skapa en ny med samma konfiguration:

Sedan kan du skapa en funktion för att ladda autentiseringstillståndet och användarens profil:

Du kan också kombinera loadAuthenticationState-funktionen med logiken för inloggning och utloggning:

Här är ett exempel på popupsidan med autentiseringstillståndet:

Popup-sida

För mer information om SDK, kan du hänvisa till den officiella dokumentationen för webbläsar-SDK. Webbläsar-SDK delar samma API:er med Chrome-tilläggets SDK.

Andra överväganden

Sammanställning av service worker: Om du använder en bundlare som Webpack eller Rollup behöver du explicit sätta målet till browser eller liknande för att undvika onödig sammanställning av Node.js-moduler.
Modulupplösning: Logto Chrome-extension SDK är enbart en ESM-modul.

Se vårt exempelprojekt för ett komplett exempel med TypeScript, Rollup och andra konfigurationer.

Slutsats

Med användare autentiserade kan du nu säkert erbjuda betalda funktioner i ditt Chrome-tillägg. Till exempel kan du lagra användarens prenumerationsstatus i användarprofilen och kontrollera det när användaren öppnar tillägget.

Genom att kombinera kraften i Chrome-tillägg och Logto kan du bygga ett mer flexibelt och anpassningsbart tillägg som både du och dina användare kommer att älska.

Prova Logto Cloud gratis

Introduktion#

Skapa en Logto-applikation#

Konfigurera ditt Chrome-tillägg#

Installera Logto SDK#

Uppdatera manifest.json#

Konfigurera ett bakgrundsskript (service worker)#

Uppdatera Logto-applikationsinställningar#

Lägg till inloggnings- och utloggningsknappar till popup-fönstret#

Kontrollpunkt: Testa autentiseringsflödet#

Kontrollera autentiseringstillstånd#

Andra överväganden#

Slutsats#

Introduktion#

Skapa en Logto-applikation#

Konfigurera ditt Chrome-tillägg#

Installera Logto SDK#

Uppdatera manifest.json#

Konfigurera ett bakgrundsskript (service worker)#

Uppdatera Logto-applikationsinställningar#

Lägg till inloggnings- och utloggningsknappar till popup-fönstret#

Kontrollpunkt: Testa autentiseringsflödet#

Kontrollera autentiseringstillstånd#

Andra överväganden#

Slutsats#

Introduktion

Skapa en Logto-applikation

Konfigurera ditt Chrome-tillägg

Installera Logto SDK

Uppdatera `manifest.json`

Konfigurera ett bakgrundsskript (service worker)

Uppdatera Logto-applikationsinställningar

Lägg till inloggnings- och utloggningsknappar till popup-fönstret

Kontrollpunkt: Testa autentiseringsflödet

Kontrollera autentiseringstillstånd

Andra överväganden

Slutsats

Introduktion

Skapa en Logto-applikation

Konfigurera ditt Chrome-tillägg

Installera Logto SDK

Uppdatera `manifest.json`

Konfigurera ett bakgrundsskript (service worker)

Uppdatera Logto-applikationsinställningar

Lägg till inloggnings- och utloggningsknappar till popup-fönstret

Kontrollpunkt: Testa autentiseringsflödet

Kontrollera autentiseringstillstånd

Andra överväganden

Slutsats