Auth Google na app JS da série Sideling — guia prático
Continuação da playlist Sideling: autenticação Google na app JS onde hobbies/interesses conectam pessoas — o que configurar sem inventar OAuth.
Resposta direta
Google auth em app JS exige configuração correta de client e callbacks; a série Sideling mostra o encaixe no produto social de hobbies. Uma modal é apenas um pop-up, uma vez que o botão de log-in é clicado, eles deveriam poder selecionar sua conta Google e se autenticar na app, uma vez que se autenticou, deveria voltar para a página de fonte com o estado.
Contexto do produto Sideling
Vamos trabalhar na autenticação do Google dentro da nossa nova app JS que estamos construindo como parte da playlist de como construir esta app aqui, chamada Sideling. E é basicamente um lugar onde as pessoas podem especificar seus hobby ou interesses e isso vai ajudá-los a monetizar por se conectar com a OpenAI. Então, por exemplo, se você gosta de construir aviões de papel, que hobby estúpido, a menos que você seja um garoto, vamos clicar em gerar ideias.
Em um vídeo diferente, por isso não posso estressar o suficiente para assistir isso do começo para ter a experiência completa de como construímos isso. Eu fiz um live stream onde tentamos passar por esse ponto, mas foi muito pesado. Então, estou retornando e não vamos incluir esse live stream como parte desse processo.
Por que Google auth neste momento
O que eu percebi foi que precisávamos trabalhar em autenticação primeiro, e, em segundo lugar, também precisávamos integrar o database. Eu vou primeiro mostrar que vamos usar algo chamado Context 7. E se eu zoomar, você verá que está lá, Context 7.
E aqui é onde todos os seus servidores MCP estão. Se você não ver Context 7 aqui, o que você precisa fazer é clicar em. E depois que você voltar, você verá o Context 7 aqui.
Na prática
Google auth em app JS exige configuração correta de client e callbacks; a série Sideling mostra o encaixe no produto social de hobbies.
Peças do fluxo OAuth na app JS
O Google Auth será a única maneira de que eles possam se conectar. Na barra nav, se um usuário não está conectado, ele deve mostrar o botão de log-in. Once the login button is clicked, a modal should show up with a Google login button.
Uma modal é apenas um pop-up, uma vez que o botão de log-in é clicado, eles deveriam poder selecionar sua conta Google e se autenticar na app, uma vez que se autenticou, deveria voltar para a página de fonte com o estado de log-in e se eles estão logados, mostrem um botão de log-out em vez do botão de log-in na nave e me dê instruções e um novo arquivo marcador para configurar isso de forma correta dentro de Google, porque temos que trabalhar dentro de Google para configurar este projeto e obter as chaves API, então notando o nome das variáveis, variáveis do ambiente que eu preciso definir no nosso arquivo de ambiente e então vamos salvar a informação de registração do usuário em um database baseado em super, mas não tente construir isso ainda, mas eu queria proporcioná-lo com esse contexto futuro, este é o início do prompt, vou copiá-lo, vamos pastear e vamos ver o que ele faz, então, uma vez que clique em submit, devemos ver algumas chamadas de ferramentas aqui, que vão ajudá-lo a integrar Google Auth para sua aplicação Nuxt. Deixe-me começar examinando a base de código atual. Então, vou fazer isso rapidamente e passar por estes passos.
Erros comuns de redirect e client ID
Vou pastear isso, ou ele deveria ter o contexto deste. É só um PowerShell, então vamos adicionar isso como contexto. There is an EMV file with the three fields you told me to specify.
Você não consegue acessá-lo, mas eu fiz mpmi e depois mpm run dev e há uma errada no terminal que você tem acesso a. Nesses pequenos comandos de console, então eu só aperto shift e skip e ele ainda vai acessar essa erra aqui, então se isso acontecer, não deixe que ele fique lá para sempre, vamos ver aqui, vamos clicar em login, aqui vamos nós temos o pequeno modal que você sabe que está bem, vamos clicar nisso essa solicitação de apps é inválida oh eu vejo o problema olha isso Eu não coloquei um zero extra. Agora isso parece estúpido com o botão de logout, meu nome aqui, então podemos apenas dizer para ele talvez remover apenas o.
Próximos passos da playlist
Não é o melhor que podemos fazer, mas por agora estou feliz com isso. Pelo menos, você sabe, o server da Supabase MCP instalado junto com uma tabela de usuários instalada. Então, nós queremos voltar aqui em nossos setores de contato, os servers da MCP.
Notem que eu já tenho o MCP da Supabase instalado. Toda essa informação para o server do MCP. Você também pode ir ao superbase.com.mcp, digitar isso no Google e você encontrará a documentação para copiar e pastar essas coisas.
Sinais de que está funcionando
Login clique em seu pequeno avatar, vá para preferências de contato e clique em acessar tokens, que vai ser o token que você clica em gerar token se você não tem um e então você verá um botão de copiar agora, uma vez que você o salve, você deveria ver isso aqui 28 ferramentas, tenha cuidado que é verde, o status é verde ok agora vamos especificar um prompt use the super base mcp server para criar uma tabela de usuários e vamos ter que configurar o projeto e tudo isso e dar todas as chaves e credenciais específicas para o projeto então vamos ter que criar outro arquivo .md para instruções sobre como fazer isso mas antes, vou incluir o que queremos também use a base de mcp do Supa para criar uma tabela de usuários que está ligado à autenticação do Google. No futuro, nós também vamos salvar as procurações dos usuários, não procurações, mas prompções e respostas de OpenAI. Ok, então eu criei um arquivo Markdown, um arquivo .md com instruções sobre como configurar o projeto e retirar qualquer chave necessária.
Em Supabase, então está chamando você sabe quando clica em lista de projetos um, está funcionando o server mcp da Supabase agora na Supabase na hora de gravar este vídeo você pode apenas ter como no nível gratuito que é o que estou usando você pode apenas ter dois projetos ativos, então apenas lembre-se disso e você pode parar outros projetos para fazer espaço O legal é que quando eu vou aqui, olha, SideBling, está criado. Clicando, ele criou um arquivo Markdown, eu acredito, uma configuração de Supabase, então aqui. Ok, eu não tenho certeza de quanto o servidor MCP estava capaz de fazer, então vou clicar em SideBling e ver se há tabelas e estrutura de database.
O que evitar na primeira semana
Sim, Prompts, ele já criou a tabela de prompt. Ok, então eu vou ter que proporcionar com a chave de ordem de serviço. Seria de você seguir esse processo, porque eu não quero revelar minhas chaves ou nada.
Terminar a integração para que quando um usuário se logue em ele o salve para o campo de usuários ou a tabela de usuários vamos testá-lo bem e vamos ver a tabela de fato Aqui está, como você pode ver, tem o ID, o ID Google, e-mail, nome, URL avatar criado, atualizado, final de log-in, tudo funcionando perfeitamente. Então, é isso, esse é o processo de integrar o Google Auth, e também criar uma tabela de usuários, e fizemos isso com a ajuda do Context 7, MCP Server e Supabase. Mcp server as well which makes it super easy to having not i mean have to touch anything so now the next video we're going to go ahead and make it start saving this data into the database a super base when a user enters a search and then we'll also get integrated the next step where they can generate the actual guide per idea that is generated so make sure to follow up here check Veja designcourse.com para cursos e projetos mais robustos e tudo que tem a ver com AI.
Na prática
Próximo passo para «auth-google-app-js-sideling»: rode um experimento de 7 dias com uma métrica ligada a auth google oauth app js sideling antes de escalar o padrão.