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

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:

1. Logga in på Logto Console.
2. Klicka på Skapa applikation.
3. På den öppnade sidan, hitta "Skapa app utan ramverk"-knappen längst ned och klicka på den.
4. Välj typen "Single page app" och ange ditt applikationsnamn.
5. 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.

1. Gå till applikationssidan i Logto Console.
2. I avsnittet "Omdirigerings-URI:er", lägg till URI:n: https://<tilläggs-id>.chromiumapp.org/callback.
3. I avsnittet "Omdirigerings-URI:er efter utloggning", lägg till URI:n: https://<tilläggs-id>.chromiumapp.org/.
4. 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.
5. 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:

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

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:

1. Öppna tilläggspopupen.
2. Klicka på "Logga in"-knappen.
3. Du kommer att omdirigeras till Logto inloggningssida.
4. Logga in med ditt Logto-konto.
5. 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:

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.