Nederlands

chrome-extension
monetization
auth

Monetiseer je Chrome-extensie met OpenID Connect (OAuth 2.0) authenticatie

Leer hoe je je Chrome-extensie kunt monetariseren door gebruikersauthenticatie toe te voegen.

Gao

Founder

4/2/2024

Stop met weken verspillen aan gebruikersauthenticatie

Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.

Aan de slag

Chrome-extensies zijn een geweldige manier om de functionaliteit van de Chrome-browser uit te breiden. Wanneer je een populaire extensie hebt, wil je deze misschien monetariseren door pro-functies aan te bieden aan gebruikers die ervoor betalen. Gebruikersauthenticatie is noodzakelijk voor dit doel:

Gebruikersidentificatie: Je moet weten wie de gebruiker is om gepersonaliseerde functies te bieden.
Toegangscontrole: Je moet controleren wie toegang heeft tot de betaalde functies.
Abonnementsbeheer: Je moet een manier bieden voor gebruikers om zich te abonneren en hun abonnementen te beheren.

Aan de andere kant willen we niet vasthouden aan het Google-accountsysteem, omdat je gebruikers misschien liever andere accounts gebruiken, of je meerdere services hebt die je wilt integreren met hetzelfde identiteitsysteem.

Een kort overzicht van de voordelen van het gebruik van OpenID Connect (OIDC) voor authenticatie:

Geen leveranciersafhankelijkheid: Je gebruikers kunnen verschillende methoden gebruiken om in te loggen, in plaats van gedwongen te worden om Google te gebruiken.
Single Sign-On (SSO): Gebruikers kunnen eenmalig inloggen en toegang krijgen tot meerdere services of applicaties.
Gestandaardiseerd: OIDC is een open standaard die breed wordt aangenomen en ondersteund, en het is ook veilig.

In deze tutorial gebruiken we Logto als de OIDC-provider, wat een Auth0-alternatief is voor het bouwen van identiteitsinfrastructuren.

Laten we beginnen!

Introductie

Aangenomen dat je een "Sign in"-knop in de popup van je Chrome-extensie plaatst, zal de authenticatiestroom er als volgt uitzien:

Voor andere interactieve pagina's in je extensie hoef je alleen de Extensie-popup deelnemer te vervangen door de naam van de pagina. In deze tutorial richten we ons op de popuppagina.

Maak een Logto-applicatie

Om aan de slag te gaan, maak je een Logto-applicatie met het type "Single page app". Volg deze stappen om een Logto-applicatie te maken:

Log in op de Logto-console.
Klik op Applicatie maken.
Op de geopende pagina vind je de knop "App maken zonder framework" en klik erop.
Kies het type "Single page app" en voer de naam van je applicatie in.
Klik op Aanmaken.

Stel je Chrome-extensie in

Installeer Logto SDK

Installeer Logto SDK in je Chrome-extensieproject:

Update de `manifest.json`

Logto SDK vereist de volgende machtigingen in de manifest.json:

permissions.identity: Vereist voor de Chrome Identity API, die wordt gebruikt om in te loggen en uit te loggen.
permissions.storage: Vereist voor het opslaan van de gebruikerssessie.
host_permissions: Vereist voor de Logto SDK om te communiceren met de Logto API's.

Stel een achtergrondscript (service worker) in

In het achtergrondscript van je Chrome-extensie, initialiseer de Logto SDK:

Vervang <jouw-logto-endpoint> en <jouw-logto-app-id> met de daadwerkelijke waarden. Je kunt deze waarden vinden op de applicatiepagina die je zojuist hebt gemaakt in de Logto-console.

Als je geen achtergrondscript hebt, kun je de officiële gids volgen om er een te maken.

Vervolgens moeten we luisteren naar het bericht van andere extensiepagina's en het authenticatieproces afhandelen:

Je merkt misschien dat er twee omleidings-URI's worden gebruikt in de bovenstaande code. Ze zijn beide gemaakt door chrome.identity.getRedirectURL, wat een ingebouwde Chrome-API is om een omleidings-URL te genereren voor auth-stromen. De twee URI's zullen zijn:

https://<extensie-id>.chromiumapp.org/callback voor inloggen.
https://<extensie-id>.chromiumapp.org/ voor uitloggen.

Merk op dat deze URI's niet toegankelijk zijn, en ze worden alleen gebruikt voor Chrome om specifieke acties voor het authenticatieproces te activeren.

Update Logto-applicatie-instellingen

Nu moeten we de Logto-applicatie-instellingen bijwerken om de zojuist gemaakte omleidings-URI's toe te staan.

Ga naar de applicatiepagina in de Logto-console.
Voeg in de sectie "Redirect URIs" de URI toe: https://<extensie-id>.chromiumapp.org/callback.
Voeg in de sectie "Na uitloggen omleiden URIs" de URI toe: https://<extensie-id>.chromiumapp.org/.
Voeg in de sectie "CORS toegestane oorsprongen" de URI toe: chrome-extension://<extensie-id>. De SDK in de Chrome-extensie zal deze oorsprong gebruiken om te communiceren met de Logto API's.
Klik op Wijzigingen opslaan.

Vergeet niet <extensie-id> te vervangen door je eigenlijke extensie-ID. Je kunt de extensie-ID vinden op de chrome://extensions-pagina.

Na het bijwerken van de instellingen, zouden je Logto-applicatie-instellingen er als volgt uit moeten zien:

Applicatie-instellingen

We zijn er bijna! Laten we de inlog- en uitlogknoppen en andere noodzakelijke logica toevoegen aan de popuppagina.

In het popup.html-bestand:

In het popup.js-bestand (ervan uitgaande dat popup.js is opgenomen in de popup.html):

Controlepunt: Test de authenticatiestroom

Nu kun je de authenticatiestroom in je Chrome-extensie testen:

Open de extensie-popup.
Klik op de "Inloggen"-knop.
Je wordt omgeleid naar de Logto inlogpagina.
Log in met je Logto-account.
Je wordt teruggeleid naar Chrome.

Controleer authenticatiestatus

Omdat Chrome uniforme opslag-API's biedt, kunnen, in plaats van de inlog- en uitlogstroom, alle andere Logto SDK-methoden direct op de popuppagina worden gebruikt.

In je popup.js kun je de LogtoClient-instantie hergebruiken die in het achtergrondscript is gemaakt, of een nieuwe maken met dezelfde configuratie:

Dan kun je een functie maken om de authenticatiestatus en het gebruikersprofiel te laden:

Je kunt ook de loadAuthenticationState-functie combineren met de inlog- en uitloglogica:

Hier is een voorbeeld van de popuppagina met de authenticatiestatus:

Popuppagina

Voor meer informatie over de SDK kun je de officiële documentatie van de browser-SDK raadplegen. De browser-SDK heeft dezelfde API's als de Chrome extensie SDK.

Andere overwegingen

Servicewerkerbundeling: Als je een bundeler zoals Webpack of Rollup gebruikt, moet je expliciet de target op browser of vergelijkbaar instellen om onnodige bundeling van Node.js-modules te vermijden.
Module-resolutie: Logto Chrome-extensie SDK is een ESM-only module.

Bekijk ons voorbeeldproject voor een volledig voorbeeld met TypeScript, Rollup en andere configuraties.

Conclusie

Met geauthenticeerde gebruikers kun je nu veilig betaalde functies aanbieden in je Chrome-extensie. Je kunt bijvoorbeeld de abonnementensatus van de gebruiker opslaan in het gebruikersprofiel en dit controleren wanneer de gebruiker de extensie opent.

Door de kracht van Chrome-extensies en Logto te combineren, kun je een flexibeler en aanpasbaarere extensie bouwen die zowel jij als je gebruikers zullen waarderen.

Probeer Logto Cloud gratis

Introductie#

Maak een Logto-applicatie#

Stel je Chrome-extensie in#

Installeer Logto SDK#

Update de manifest.json#

Stel een achtergrondscript (service worker) in#

Update Logto-applicatie-instellingen#

Voeg inlog- en uitlogknoppen toe aan de popup#

Controlepunt: Test de authenticatiestroom#

Controleer authenticatiestatus#

Andere overwegingen#

Conclusie#

Introductie#

Maak een Logto-applicatie#

Stel je Chrome-extensie in#

Installeer Logto SDK#

Update de manifest.json#

Stel een achtergrondscript (service worker) in#

Update Logto-applicatie-instellingen#

Voeg inlog- en uitlogknoppen toe aan de popup#

Controlepunt: Test de authenticatiestroom#

Controleer authenticatiestatus#

Andere overwegingen#

Conclusie#

Introductie

Maak een Logto-applicatie

Stel je Chrome-extensie in

Installeer Logto SDK

Update de `manifest.json`

Stel een achtergrondscript (service worker) in

Update Logto-applicatie-instellingen

Voeg inlog- en uitlogknoppen toe aan de popup

Controlepunt: Test de authenticatiestroom

Controleer authenticatiestatus

Andere overwegingen

Conclusie

Introductie

Maak een Logto-applicatie

Stel je Chrome-extensie in

Installeer Logto SDK

Update de `manifest.json`

Stel een achtergrondscript (service worker) in

Update Logto-applicatie-instellingen

Voeg inlog- en uitlogknoppen toe aan de popup

Controlepunt: Test de authenticatiestroom

Controleer authenticatiestatus

Andere overwegingen

Conclusie