Guia de Configuração: API do Youtube para No Boss Gallery

Este guia irá orientá-lo, passo a passo, no processo de criação das suas credenciais da API do Youtube. O objetivo é gerar as "chaves" necessárias para conectar o No Boss Gallery à sua conta Google de forma segura para exibir seus vídeos e playlists.

⚠️ AVISO IMPORTANTE SOBRE A VALIDADE DA CONEXÃO Ao seguir este tutorial, sua conexão será criada no modo "Testing" (Teste). Neste modo, o Google exige que você refaça o login (reautorize o aplicativo) a cada 7 dias, ou seus vídeos pararão de aparecer.

Após concluir os passos abaixo e testar sua galeria, você deve seguir o nosso guia para tornar a conexão permanente: 👉 Como Aprovar a Verificação do Google (Conexão Permanente)

Pré-requisito: Ter uma conta Google (pode ser uma conta gratuita @gmail.com ou uma conta de trabalho do Google Workspace) vinculada ao canal do Youtube que deseja exibir.

Passo 1: Criar um Projeto no Google Cloud

A utilização de APIs no Google precisa ser organizada dentro de um "projeto".

1. Acesse a página de seleção de projetos do Google Cloud clicando aqui.

2. Na janela que aparecer, procure e clique no botão "Criar projeto" no canto superior direito.

3. No campo Nome do projeto, digite No Boss Gallery.

4. Clique no botão "CRIAR".

5. Após a criação do projeto, você pode fechar esta aba do navegador para seguir para o próximo passo.

Passo 2: Ativar a API do Youtube

Com o projeto criado, precisamos "ligar" a API do Youtube para permitir que o módulo se comunique com ela.

1. Antes de prosseguir, confirme se o projeto correto está selecionado. No topo da página, ao lado do logo "Google Cloud", deve estar escrito "No Boss Gallery".

2. Acesse a Biblioteca de APIs do Google clicando aqui. Faça o login com sua conta Google, se solicitado.

3. Na barra de pesquisa, digite YouTube Data API v3 e clique no resultado.

4. Na página que abrir, procure por um botão azul escrito "Ativar". Clique nele.

5. Se o botão estiver escrito "Gerenciar", significa que a API já está ativa e você não precisa fazer nada.

6. Após ativar, você pode fechar esta aba do navegador.

Passo 3: Configurar a Autenticação OAuth

Esta é a etapa inicial e fundamental da autenticação.

1. Acesse a página de Visão Geral do OAuth clicando aqui.

2. Você verá uma tela com o título "A plataforma de autenticação do Google ainda não foi configurada". Clique no botão azul "Vamos começar".

3. A tela de "Configuração do projeto" aparecerá. Siga o preenchimento das 4 etapas:

   • Etapa 1: Informações do app

     • Nome do app: Digite No Boss Gallery.

     • E-mail para suporte do usuário: Selecione o seu melhor e-mail para contato na lista.

     • Clique em "Avançar".

   • Etapa 2: Público-alvo

     • Escolha a opção "Externo" (disponível para qualquer usuário com uma Conta do Google).

     • Clique em "Avançar".

   • Etapa 3: Dados de contato

     • Informações de contato do desenvolvedor: adicione seu e-mail de contato.

     • Clique em "Avançar".

   • Etapa 4: Concluir

     • Marque a caixa de seleção que indica que concorda com a política de dados do Google.

     • Revise as informações e clique em "Continuar".

4. Após concluir as 4 etapas, clique no botão "Criar". Você será levado de volta ao painel principal do OAuth.

Passo 4: Adicionar Usuários de Teste

Como seu aplicativo está em "Modo de Teste", você precisa informar ao Google quais contas de e-mail estão autorizadas a testar a integração. Sem este passo, o Google bloqueará qualquer tentativa de login.

1. Acesse a página de Público-alvo clicando aqui. (Selecione a aba "Público-alvo" se não estiver nela).

2. Na seção "Usuários de teste", clique no botão "+ ADICIONAR USUÁRIOS".

3. Na janela que abrir, adicione o endereço de e-mail da conta Google (Youtube) que você usará para se conectar. Você pode adicionar múltiplas contas, se necessário.

4. Clique em "SALVAR".

Passo 5: Criar as Credenciais de Acesso (ID de Cliente OAuth)

Nesta etapa, vamos criar as 'chaves' (ID do cliente e Chave secreta) e, para isso, precisaremos de uma URL específica que está dentro do módulo No Boss Gallery. Siga os passos com atenção.

1. Acesse a página de Credenciais do Google Cloud clicando aqui.

2. No topo da página, clique no botão "+ CRIAR CREDENCIAIS" e escolha a opção "ID do cliente OAuth".

3. No campo "Tipo de aplicativo", selecione a opção "Aplicativo da Web".

4. No campo "Nome", preencha No Boss Gallery.

5. Na seção "Origens JavaScript autorizadas", clique em "+ ADICIONAR URI". Informe o domínio do seu site. Exemplo: https://www.seusite.com.br

6. Agora, para o próximo campo, precisamos pegar uma URI de redirecionamento dentro do módulo No Boss Gallery instalado no seu site. Em outra aba do navegador:

   • Acesse a área de administração do seu site (Joomla).

   • Vá em Extensões > Módulos e abra o módulo No Boss Gallery.

   • Vá até a aba Conexões API's e localize a seção Youtube.

   • Copie a URL que é exibida no texto de instrução logo no início desta seção. O formato será similar a: http://seu-dominio.com.br/libraries/noboss/src/Form/Field/Nbapiconnection/NbCallbackProxy.php

7. De volta à página do Google Cloud, na seção "URIs de redirecionamento autorizados", clique em "+ ADICIONAR URI" e cole a URL que você acabou de copiar do seu módulo.

   Dica para Desenvolvedores: Se você estiver configurando um ambiente de teste na sua máquina local (localhost), adicione também os seguintes endereços:

   • Em "Origens JavaScript autorizadas", adicione http://localhost e também a versão com a porta que você usa, por exemplo: http://localhost:3000 ou http://localhost:8080.

   • Em "URIs de redirecionamento autorizados", adicione a mesma URL de redirecionamento do seu produto, mas trocando o domínio do site por localhost (ou localhost:porta). Exemplo: http://localhost/MY-WEBSITE/libraries/noboss/src/Form/Field/Nbapiconnection/NbCallbackProxy.php

8. Após preencher os campos, clique em "CRIAR" no final da página.

ATENÇÃO: PASSO MUITO IMPORTANTE! Uma janela aparecerá com as suas credenciais.

• Copie o valor do "ID do cliente"

• Copie o valor da "Chave secreta do cliente"

Guarde estes dois valores num local seguro, como um bloco de notas. A Chave Secreta não será mostrada novamente! Trate-a como uma senha.

Passo 6: Configurar o Acesso aos Dados (Escopos)

Agora, na página "Acesso a dados", vamos dizer ao Google quais permissões exatas o No Boss Gallery pode solicitar. Faremos isto para garantir que ele só possa ler os vídeos, mantendo tudo seguro.

1. Acesse a página de Acesso a Dados clicando aqui. (Selecione a aba "Acesso a dados" se não estiver nela).

2. Na página que abrir, clique diretamente no botão "Adicionar ou remover escopos".

3. Uma janela lateral irá abrir. Siga os passos abaixo para adicionar a permissão correta:

   • No campo de pesquisa no topo, digite youtube.readonly e pressione Enter.

   • Marque a caixa de seleção que aparecer, correspondente a .../auth/youtube.readonly.

4. Após marcar a opção, role para baixo na janela lateral e clique no botão "ATUALIZAR".

5. De volta à página principal, clique no botão "SALVAR" no final da tela para confirmar as alterações.

Passo 7: Finalizar a Configuração no Módulo

Com as chaves de acesso em mãos, volte para a aba do seu site Joomla (na aba Conexões API's do módulo, seção Youtube):

1. Preencha os campos "Youtube Client ID" e "Youtube Client Secret" com os valores que você copiou no Passo 5.

2. Salve as configurações do módulo (botão "Salvar" ou "Salvar e Fechar" do Joomla).

3. Após salvar, clique no botão para conectar/autorizar com o Youtube.

4. Uma nova aba do navegador será aberta, solicitando o login na sua conta Google e a permissão de acesso. Prossiga até finalizar a autenticação.

Entendendo o "Modo de Teste" e Próximos Passos

Parabéns! Suas credenciais estão prontas e a integração já está funcional.

Por padrão, seu aplicativo no Google Cloud começa no "Modo de Teste". É importante que você entenda as limitações deste modo:

Apenas Usuários de Teste Podem se Conectar

Enquanto o aplicativo estiver em teste, o Google bloqueará qualquer tentativa de login de contas que não foram explicitamente adicionadas na lista de "Usuários de teste" (conforme o Passo 4). Isso significa que apenas as contas de e-mail que você cadastrou poderão autorizar a integração.

A Tela de "App não verificado"

Ao conectar sua conta Google (sendo ela um usuário de teste), o Google exibirá uma tela de aviso com o título "O Google não verificou este app".

• Não se preocupe, isto é normal! A mensagem aparece porque o aplicativo ainda não passou pelo processo de verificação formal do Google.

• Para prosseguir, clique em "Avançado" e, em seguida, no link que diz "Acessar No Boss Gallery (não seguro)". Isto permitirá que a conexão seja feita.

A Validade da Conexão (Expira em 7 dias)

A outra principal limitação do "Modo de Teste" é que a autorização que você acabou de dar expira a cada 7 dias.

• O que acontece na prática? Após 7 dias, a extensão não conseguirá mais se comunicar com a API do Youtube. Com isso, sua galeria deixará de buscar e exibir os vídeos no site.

• Como resolver provisoriamente? A cada 7 dias, você precisará acessar o módulo e se autenticar novamente com a conta do Google.

PARADA OBRIGATÓRIA: Como avisamos no início, esta conexão irá cair em 7 dias. Para evitar que isso aconteça, você precisa mudar o status do aplicativo no Google. 👉 Siga agora o nosso guia de aprovação do Google para manter sua conexão ativa para sempre.

 

ℹ️ Informação Adicional: Cota da API (Quota)

A API do Youtube possui um limite diário de "pontos" de consulta (Quota). Se você tem muitos vídeos ou seu site recebe muitas visitas, certifique-se de que o cache do módulo no Joomla está ativado nas configurações avançadas. O uso do cache evita que o seu site faça consultas ao Google a cada visitante, impedindo que você consuma toda a sua cota diária rapidamente e seus vídeos parem de carregar.