Monetize sua extensão Chrome com autenticação OpenID Connect (OAuth 2.0)

As extensões do Chrome são uma ótima maneira de ampliar a funcionalidade do navegador Chrome. Quando você tem uma extensão popular, pode querer monetizá-la oferecendo recursos pro para usuários que pagam por eles. A autenticação de usuário é essencial para esse propósito:

• Identificação do usuário: Você precisa saber quem é o usuário para fornecer recursos personalizados.
• Controle de acesso: Você precisa controlar quem pode acessar os recursos pagos.
• Gerenciamento de assinaturas: Você precisa fornecer uma maneira para os usuários se inscreverem e gerenciarem suas assinaturas.

Por outro lado, não queremos ficar presos ao sistema de contas do Google, pois seus usuários podem preferir usar outras contas, ou você pode ter múltiplos serviços que deseja integrar com o mesmo sistema de identidade.

Um resumo rápido dos benefícios de usar OpenID Connect (OIDC) para autenticação:

• Sem bloqueio de fornecedor: Seus usuários podem usar vários métodos para entrar, em vez de serem forçados a usar o Google.
• Single Sign-On (SSO): Os usuários podem entrar uma vez e acessar vários serviços ou aplicativos.
• Padronizado: OIDC é um padrão aberto que é amplamente adotado e suportado, também é seguro.

Neste tutorial, usaremos o Logto como o provedor OIDC, que é uma alternativa ao Auth0 para construir infraestruturas de identidade.

Vamos começar!

Introdução#

Assumindo que você colocou um botão "Entrar" no popup da sua extensão Chrome, o fluxo de autenticação ficará assim:

Para outras páginas interativas na sua extensão, você só precisa substituir o participante Popup da extensão pelo nome da página. Neste tutorial, focaremos na página de popup.

Criar uma aplicação no Logto#

Para começar, crie uma aplicação no Logto com o tipo "Aplicativo de página única". Siga estes passos para criar uma aplicação no Logto:

1. Entre no Logto Console.
2. Clique em Criar aplicação.
3. Na página aberta, encontre o botão "Criar app sem framework" na parte inferior e clique nele.
4. Escolha o tipo "Aplicativo de página única" e insira o nome da sua aplicação.
5. Clique em Criar.

Configurar sua extensão Chrome#

Instalar o Logto SDK#

Instale o Logto SDK no projeto da sua extensão Chrome:

Atualizar o manifest.json#

O Logto SDK requer as seguintes permissões no manifest.json:

• permissions.identity: Necessária para a API de Identidade do Chrome, que é usada para entrar e sair.
• permissions.storage: Necessária para armazenar a sessão do usuário.
• host_permissions: Necessária para que o Logto SDK se comunique com as APIs do Logto.

Configurar um script de fundo (service worker)#

No script de fundo da sua extensão Chrome, inicialize o Logto SDK:

Substitua <your-logto-endpoint> e <your-logto-app-id> pelos valores reais. Você pode encontrar esses valores na página da aplicação que você acabou de criar no Logto Console.

Se você não tiver um script de fundo, pode seguir o guia oficial para criar um.

Depois, precisamos escutar mensagens de outras páginas da extensão e lidar com o processo de autenticação:

Você pode notar que há dois URIs de redirecionamento usados no código acima. Ambos são criados por chrome.identity.getRedirectURL, que é uma API integrada do Chrome para gerar um URL de redirecionamento para fluxos de autenticação. Os dois URIs serão:

• https://<extension-id>.chromiumapp.org/callback para entrar.
• https://<extension-id>.chromiumapp.org/ para sair.

Note que esses URIs não são acessíveis, e eles são usados apenas para que o Chrome acione ações específicas para o processo de autenticação.

Atualizar configurações da aplicação Logto#

Agora precisamos atualizar as configurações da aplicação Logto para permitir os URIs de redirecionamento que acabamos de criar.

1. Vá para a página da aplicação no Logto Console.
2. Na seção "URIs de redirecionamento", adicione o URI: https://<extension-id>.chromiumapp.org/callback.
3. Na seção "URIs de redirecionamento pós logout", adicione o URI: https://<extension-id>.chromiumapp.org/.
4. Na seção "Origens permitidas para CORS", adicione o URI: chrome-extension://<extension-id>. O SDK na extensão Chrome usará esta origem para se comunicar com as APIs do Logto.
5. Clique em Salvar alterações.

Lembre-se de substituir <extension-id> pelo seu ID real de extensão. Você pode encontrar o ID da extensão na página chrome://extensions.

Depois de atualizar as configurações, as configurações da sua aplicação Logto devem se parecer com isto:

Adicione botões de login e logout ao popup#

Estamos quase lá! Vamos adicionar os botões de login e logout e outras lógicas necessárias à página de popup.

No arquivo popup.html:

No arquivo popup.js (supondo que popup.js esteja incluído no popup.html):

Ponto de controle: Teste o fluxo de autenticação#

Agora você pode testar o fluxo de autenticação na sua extensão Chrome:

1. Abra o popup da extensão.
2. Clique no botão "Entrar".
3. Você será redirecionado para a página de login do Logto.
4. Faça login com sua conta Logto.
5. Você será redirecionado de volta ao Chrome.

Verifique o estado de autenticação#

Como o Chrome fornece APIs de armazenamento unificadas, além do fluxo de login e logout, todos os outros métodos do Logto SDK podem ser usados diretamente na página de popup.

No seu popup.js, você pode reutilizar a instância LogtoClient criada no script de fundo, ou criar uma nova com a mesma configuração:

Então, você pode criar uma função para carregar o estado de autenticação e o perfil do usuário:

Você também pode combinar a função loadAuthenticationState com a lógica de login e logout:

Aqui está um exemplo de página de popup com o estado de autenticação:

Para mais informações sobre o SDK, você pode consultar a documentação oficial do SDK para browser. O SDK para browser compartilha as mesmas APIs com o SDK para extensões Chrome.

Outras considerações#

• Empacotamento do service worker: Se você usar um empacotador como Webpack ou Rollup, será necessário definir explicitamente o alvo como browser ou similar para evitar o empacotamento desnecessário de módulos do Node.js.
• Resolução de módulo: O SDK para extensão Chrome do Logto é um módulo apenas ESM.

Veja nosso projeto de exemplo para um exemplo completo com TypeScript, Rollup e outras configurações.

Conclusão#

Com os usuários autenticados, você pode agora oferecer com segurança funcionalidades pagas em sua extensão Chrome. Por exemplo, você pode armazenar o status de assinatura do usuário no perfil do usuário e verificá-lo quando o usuário abrir a extensão.

Combinando o poder das extensões Chrome e Logto, você pode criar uma extensão mais flexível e personalizável que tanto você quanto seus usuários vão adorar.