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

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:

1. Log in op de Logto-console.
2. Klik op Applicatie maken.
3. Op de geopende pagina vind je de knop "App maken zonder framework" en klik erop.
4. Kies het type "Single page app" en voer de naam van je applicatie in.
5. 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.

1. Ga naar de applicatiepagina in de Logto-console.
2. Voeg in de sectie "Redirect URIs" de URI toe: https://<extensie-id>.chromiumapp.org/callback.
3. Voeg in de sectie "Na uitloggen omleiden URIs" de URI toe: https://<extensie-id>.chromiumapp.org/.
4. 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.
5. 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:

Voeg inlog- en uitlogknoppen toe aan de popup#

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:

1. Open de extensie-popup.
2. Klik op de "Inloggen"-knop.
3. Je wordt omgeleid naar de Logto inlogpagina.
4. Log in met je Logto-account.
5. 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:

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.