O guia para adicionar o Google Login ao seu aplicativo React

Dropbox é uma empresa de compartilhamento de arquivos e sincronização de arquivos com sede em São Francisco. Seu cliente de plataforma cruzada permite que os usuários enviem arquivos para o servidor Dropbox. Dropbox agora está usando o React.JS para melhorar a sincronização de arquivos para que os usuários possam salvar e compartilhar um número ilimitado de arquivos e pastas.

Aplicativo nativo do Expo-Go React que usa a autenticação do Google no Firebase

Estou construindo uma aplicação nativa de reação com a Expo e testá-la com expo-go. Preciso autenticar os usuários para o Firebase usando o Google. Consegui autenticar usuários no FireBase com email+senha, mas não com o Google. Passei vários dias procurando soluções na Web (e Stack-Overflow) e não consegui encontrar nada definitivo ou um exemplo que realmente funcione. Os métodos propostos foram: ‘SignInWithDireect’ e ‘SignInWithPopup’ (ambos não funcionam em reação-nativa), ‘Expo-Google-Sign-In’ (depreciado) e ‘Expo-Auth-Session’ (parece ser o método mais recente, mas muitos afirmam que não funciona com expo-go). É o que eu tento fazer até possível? Existe um exemplo de funcionamento em qualquer lugar? Caso contrário, qual seria a maneira recomendada de autenticar usuários com o Google no Firebase no meu aplicativo (e.g., Use construções em vez de expo-go, ou use clientes Expo Dev para aprimorar a exposição, etc.) – Qualquer exemplo de trabalho, por favor? Muito obrigado antecipadamente, estou ficando desesperado 🙂

Arie Livshin

perguntou 4 de abril às 1:34

Arie Livshin Arie Livshin

845 1 1 emblema de ouro 12 12 crachás de prata 26 26 crachás de bronze

2 respostas 2

Consegui fazer com que o Firebase Google auth trabalhe através da Expo Go usando a Expo SDK 47. Com o lançamento da Expo SDK 48 em fevereiro de 2023, acredito que não é mais possível fazê -lo trabalhar com a Expo Go. Veja a explicação das atualizações do SDK 48 aqui.

Eu estava relutante em migrar para os clientes da Expo Dev, mas ficou mais suave do que o previsto, então eu recomendaria morder a bala e seguir em frente com o Expo Dev Client. Eu acredito que você precisará de uma conta de desenvolvedor da Apple paga para criar as construções. A outra questão que estou tendo com esse método é que não consigo fazer com que o fluxo de autenticação funcione em uma construção de visualização, embora funcione bem na construção de desenvolvimento. Veja minha pergunta aqui, que tem meu amostra de código incorporado, que funciona com a construção de desenvolvimento.

O guia para adicionar o Google Login ao seu aplicativo React

Há momentos em que queremos apenas usar um aplicativo e não temos paciência para se inscrever e fazer login com nosso email e senha primeiro. Também podemos querer apenas experimentar o aplicativo e não querer o ônus de ter que criar uma nova conta apenas para isso.

Ao mesmo tempo, os proprietários do aplicativo precisam saber quantos usuários seu aplicativo possui e desejam obter feedback sobre quem está usando o aplicativo e como. Para obter essas estatísticas, eles precisam que os usuários se inscrevam com seus e -mails.

Essas duas situações colocam os usuários e os proprietários de aplicativos em um pouco de picles. É aqui que ter um recurso de login do Google desempenha um papel muito vital.

Como o Google é a plataforma de email mais popular do mundo, permitindo que os usuários usem o login do Google com o seu aplicativo React elimina o atrito entre usuários e proprietários de aplicativos. Os usuários podem começar a usar um aplicativo quase imediatamente sem ter que criar uma conta completamente nova.

Neste artigo, aprenderemos como o Login do Google funciona e como podemos adicioná-lo ao nosso aplicativo React usando o novo SDK do Google Identity Services chamado @react-oauth/google.

Resumo:

A adição de login do Google ao seu aplicativo React pode melhorar bastante a experiência do usuário, permitindo que eles assinem facilmente o uso de sua conta do Google. Isso elimina a necessidade de os usuários criarem uma nova conta e fornece um processo de login sem costura. Neste artigo, exploraremos como implementar o Google Login em um aplicativo React usando o pacote @react-oauth/google.

Pontos chave:

1. O Google Login é um recurso popular que permite aos usuários entrar em um aplicativo usando sua conta do Google.
2. Ele elimina a necessidade de os usuários criarem uma nova conta e fornece uma experiência de login perfeita.
3. O pacote @react-oauth/google é um sdk do Google Identity Services que permite aos desenvolvedores integrar o login do Google em seus aplicativos React.
4. Antes de adicionar o Google Login ao seu aplicativo React, você precisa adquirir um ID do Google Client para o seu projeto.
5. Um ID do cliente é um identificador exclusivo associado a um aplicativo que auxilia no cliente e no servidor OAuth 2.0 autenticação.
6. Para adquirir um ID do Google Client, você precisa criar um novo projeto no Google Cloud Console.
7. Depois de ter um ID de cliente, você pode instalar o pacote @react-outh/google no seu aplicativo React.
8. Depois de instalar o pacote, você pode configurar uma tela de consentimento de login do Google para o seu aplicativo React.
9. Em seguida, você precisa criar um ID de cliente da Web no Google Cloud Console.
10. Por fim, você pode reunir tudo usando o pacote @react-outh/google para implementar o Google Login em seu aplicativo React.

Questões:

1. Q1: Por que a adição do Google Login a um aplicativo React benéfico?

A1: Adicionar o Google Login a um aplicativo React fornece uma experiência de login perfeita para os usuários, permitindo que eles entrem em uso usando sua conta do Google em vez de criar uma nova conta.

2. Q2: O que é o pacote @react-oauth/google?

A2: O pacote @react-oauth/google é um sdk do Google Identity Services que permite aos desenvolvedores integrar o login do Google em seus aplicativos React. Ele fornece as ferramentas e funcionalidades necessárias para implementar o Google Login em um aplicativo React.

3. Q3: Como posso adquirir um ID do cliente do Google para o meu projeto?

A3: Para adquirir um ID do Google Client, você precisa criar um novo projeto no Google Cloud Console. Depois de criar o projeto, você pode gerar um ID do cliente, que será usado para autenticar usuários durante o processo de login do Google.

4. Q4: O que é um ID de cliente?

A4: Um ID de cliente é um identificador exclusivo associado a um aplicativo. É usado durante o processo de autenticação para verificar a identidade do aplicativo e autorizar seu acesso ao Google APIs.

5. Q5: Como faço para instalar o pacote @react-oauth/google?

A5: Você pode instalar o pacote @react-outh/google no seu aplicativo React executando o comando “npm install @react-outh/google” ou “yarn add @react-oauth/google” no diretório raiz do seu projeto.

6. Q6: O que é uma tela de consentimento do Google Login?

A6: Uma tela de consentimento de login do Google é uma tela que aparece quando um usuário tenta fazer login em um aplicativo usando sua conta do Google. Ele informa o usuário sobre as permissões que o aplicativo está solicitando e permite que eles concedam ou negem acesso.

7. Q7: Como faço para criar um ID de cliente da web no console do Google Cloud?

A7: Para criar um ID do cliente da web, você precisa ir para a página de credenciais no console do Google Cloud, selecione seu projeto e clique no botão “Criar credenciais”. Em seguida, escolha a opção “OAuth Client ID” e siga os avisos para criar um ID do cliente da Web.

8. Q8: Como posso implementar o Google Login no meu aplicativo React usando o pacote @react-oauth/google?

A8: Para implementar o Google Login no seu aplicativo React, você pode usar o pacote @react-oauth/google. Primeiro, instale o pacote em seu projeto. Em seguida, configure uma tela de consentimento do Google Login e crie um ID do cliente da web. Por fim, use o pacote @react-oauth/google para lidar com o fluxo de autenticação e recupere os tokens de acesso para acessar o Google APIs.

9. Q9: Quais são os benefícios de usar o Google Login em um aplicativo React?

A9: O uso do Google Login em um aplicativo React fornece uma experiência de login perfeita para os usuários, elimina a necessidade de criar uma nova conta e permite que os proprietários de aplicativos colete estatísticas e feedback do usuário com mais facilidade. Ele também aproveita a popularidade e a confiança do Google como uma plataforma de e -mail.

10. Q10: Posso usar a Expo ir para autenticar usuários com o Google no Firebase?

A10: Com o lançamento da Expo SDK 48 em fevereiro de 2023, não é mais possível usar a Expo, vá para autenticar usuários com o Google no Firebase. No entanto, você pode considerar a migração para os clientes da Expo Dev para esta funcionalidade.

Seguindo estas etapas e usando o pacote @react-oauth/google, você pode adicionar facilmente o login do Google ao seu aplicativo React e aprimorar a experiência do usuário. Lembre -se de adquirir um ID do Google Client, configurar uma tela de consentimento e criar um ID do cliente da Web antes de implementar a funcionalidade de login. Codificação feliz!

O guia para adicionar o Google Login ao seu aplicativo React

Dropbox é uma empresa de compartilhamento de arquivos e sincronização de arquivos com sede em São Francisco. Seu cliente de plataforma cruzada permite que os usuários enviem arquivos para o servidor Dropbox. Dropbox agora está usando o React.JS para melhorar a sincronização de arquivos para que os usuários possam salvar e compartilhar um número ilimitado de arquivos e pastas.

Aplicativo nativo do Expo-Go React que usa a autenticação do Google no Firebase

Estou construindo uma aplicação nativa de reação com a Expo e testá-la com expo-go. Preciso autenticar os usuários para o Firebase usando o Google. Consegui autenticar usuários no FireBase com email+senha, mas não com o Google. Passei vários dias procurando soluções na Web (e Stack-Overflow) e não consegui encontrar nada definitivo ou um exemplo que realmente funcione. Os métodos propostos foram: ‘SignInWithDireect’ e ‘SignInWithPopup’ (ambos não funcionam em reação-nativa), ‘Expo-Google-Sign-In’ (depreciado) e ‘Expo-Auth-Session’ (parece ser o método mais recente, mas muitos afirmam que não funciona com expo-go). É o que eu tento fazer até possível? Existe um exemplo de funcionamento em qualquer lugar? Caso contrário, qual seria a maneira recomendada de autenticar usuários com o Google no Firebase no meu aplicativo (e.g., Use construções em vez de expo-go, ou use clientes Expo Dev para aprimorar a exposição, etc.) – Qualquer exemplo de trabalho, por favor? Muito obrigado antecipadamente, estou ficando desesperado 🙂

Arie Livshin

perguntou 4 de abril às 1:34

Arie Livshin Arie Livshin

845 1 1 emblema de ouro 12 12 crachás de prata 26 26 crachás de bronze

2 respostas 2

Consegui fazer com que o Firebase Google auth trabalhe através da Expo Go usando a Expo SDK 47. Com o lançamento da Expo SDK 48 em fevereiro de 2023, acredito que não é mais possível fazê -lo trabalhar com a Expo Go. Veja a explicação das atualizações do SDK 48 aqui.

Eu estava relutante em migrar para os clientes da Expo Dev, mas ficou mais suave do que o previsto, então eu recomendaria morder a bala e seguir em frente com o Expo Dev Client. Eu acredito que você precisará de uma conta de desenvolvedor da Apple paga para criar as construções. A outra questão que estou tendo com esse método é que não consigo fazer com que o fluxo de autenticação funcione em uma construção de visualização, embora funcione bem na construção de desenvolvimento. Veja minha pergunta aqui, que tem meu amostra de código incorporado, que funciona com a construção de desenvolvimento.

O guia para adicionar o Google Login ao seu aplicativo React

Há momentos em que queremos apenas usar um aplicativo e não temos paciência para se inscrever e fazer login com nosso email e senha primeiro. Também podemos querer apenas experimentar o aplicativo e não querer o ônus de ter que criar uma nova conta apenas para isso.

Ao mesmo tempo, os proprietários do aplicativo precisam saber quantos usuários seu aplicativo possui e desejam obter feedback sobre quem’está usando o aplicativo e como. Para obter essas estatísticas, eles precisam que os usuários se inscrevam com seus e -mails.

Essas duas situações colocam os usuários e os proprietários de aplicativos em um pouco de picles. É aqui que ter um recurso de login do Google desempenha um papel muito vital.

Como o Google é a plataforma de email mais popular do mundo, permitindo que os usuários usem o login do Google com o seu aplicativo React elimina o atrito entre usuários e proprietários de aplicativos. Os usuários podem começar a usar um aplicativo quase imediatamente sem ter que criar uma conta completamente nova.

Neste artigo, nós’Saiba como o Login do Google funciona e como podemos adicioná-lo ao nosso aplicativo React usando o novo SDK do Google Identity Services chamado @react-oauth/google .

• Instalando o pacote necessário para adicionar o login do Google ao seu aplicativo React
• Aquisição de um ID do cliente do Google para o seu projeto
• Configurando uma tela de consentimento de login do Google para o seu aplicativo React
• Criando seu ID de cliente da web
• Juntando tudo junto com @react-oauth/google
• Criando um perfil de usuário em seu aplicativo React com base no usuário’S perfil do Google

Para acompanhar este tutorial, você deve reagir instalado no seu computador local e estar familiarizado com como usá -lo. Se você instalou o React, já deve ter um nó.JS, NPM e fios também instalados.

Instalando o pacote necessário para adicionar o login do Google ao seu aplicativo React

Para usar o login do Google, nós’precisarei instalar o pacote @react-oauth/google. Este é o Google’s New Identity Services SDK; Ele nos permite integrar o recurso de login do google em nosso aplicativo React. Além disso, @React-OAuth/Google nos permite obter os tokens de acesso necessários para acessar todas as APIs do Google de maneira rápida e segura.

Mas, antes de instalarmos e começarmos a integrar o login do Google em nosso aplicativo React, nós’Primeiro precisará obter um ID do Google Client.

Aquisição de um ID do cliente do Google para o seu projeto

Um ID do cliente é um identificador exclusivo associado a um aplicativo que auxilia no cliente e no servidor OAuth 2.0 autenticação.

Para obter um ID de cliente do Google, vá para o seu console do Google Cloud e crie um novo projeto. Para este artigo, eu’nomeei o projeto “Google Entrar,” Mas você pode nomear o que quiser:

Depois de criar um projeto, clique no nome do projeto e você’verei um painel que se parece com o mostrado abaixo. O nome atual do seu projeto deve ser visível no canto superior esquerdo do painel, ao lado do logotipo do Google Cloud:

Agora deixe’s Revisão Como configurar sua tela de consentimento antes de criar suas credenciais.

Configurando uma tela de consentimento de login do Google para o seu aplicativo React

Uma tela de consentimento, como o nome sugere, é uma página de consentimento que leva ao usuário a usar uma biblioteca externa ou de terceiros para fazer login. Esta etapa alerta o usuário que eles estão deixando seu aplicativo’S Página raiz e permitindo acesso a uma página de terceiros.

Simplificando, quando você usa oauth 2.0 Para autorização, seu aplicativo solicita que o usuário autorize um ou mais escopos de acesso de uma conta do Google. Escopos de acesso incluem qualquer informação ou atividades que seu aplicativo possa acessar ou se exercitar com o usuário’s conta.

Mais de 200 mil desenvolvedores usam o Logrocket para criar melhores experiências digitais

Saiba mais →

A tela de consentimento do Google Login que seu aplicativo é exibida para o usuário pode incluir uma breve descrição do seu projeto, suas políticas e os escopos solicitados de acesso.

Uma página de consentimento simples pode ficar assim:

Para configurar a página de consentimento do Google para o seu aplicativo React, vá para o “Tela de consentimento OAuth” Guia no menu do lado esquerdo do seu console do Google Cloud.

Depois de estiver nesta guia, escolha externo-que é realmente a única opção que você pode escolher, a menos que esteja usando uma organização ou aplicativo verificado pelo Google-e clique no Criar Botão para criar sua tela de consentimento:

Em seguida, na mesma guia, escolha um nome para o seu aplicativo e um endereço de e -mail para obter notificações sobre quaisquer alterações em seu projeto. Você pode manter os outros requisitos e opções vazios por enquanto. Se você tiver os detalhes prontos, poderá adicioná -los durante esta etapa, se quiser:

Você também pode pular o restante das seções de registro por enquanto. Basta rolar para baixo em cada seção e clicar Salve e continue Até você voltar ao painel após a conclusão.

Criando seu ID de cliente da web

Em seguida, no menu do lado esquerdo, clique no Credenciais guia para ir para a página onde você pode criar seu ID do cliente da web.

Nesta página, clique em Crie credenciais no topo da página e depois selecione o ID do cliente OAuth opção:

Você será solicitado a selecionar um tipo de aplicativo, como mostrado abaixo. Se você estiver seguindo estas etapas para um aplicativo React, escolha Aplicativo da Web (desde que nós’está usando o ID do cliente do Google para a Web):

Se você o estiver integrando em um aplicativo nativo, flutuador ou rápido do React, poderá escolher as opções Android ou iOS para os dois respectivos sistemas operacionais.

Em seguida, escolheremos um nome para o nosso ID de cliente. Este nome é simplesmente usado para observar ou definir o ID específico que estamos criando. Por exemplo, se estivermos criando IDs na Web, iOS e Android, podemos incluir “ID da web,” “Android ID,” “IOS ID,” e assim por diante em sua convenção de nomenclatura para diferenciá -los.

Em seguida nós’Também estará adicionando dois tipos de URLs: origens JavaScript autorizadas e URLs de redirecionamento autorizados.

O URL de origens JavaScript autorizado é o URL do qual seu aplicativo está originando o login; eu.e., Localhost e localhost: 3000 para desenvolvedores react, ou seu URL hospedado se você’Eu hospedei seu aplicativo.

O URL de redirecionamento autorizado é o link para o qual o Google redirecionará o usuário depois que o login for bem -sucedido. Por exemplo, você pode querer levar o usuário de volta ao seu link original ou talvez redirecionar o usuário para outro link. De qualquer maneira, você tem que incluir o URL aqui.

Para as origens JavaScript autorizadas e URLs de redirecionamento autorizados, adicione os URLs de localhost: http: // localhost: 3000 e http: // localhost, assim:

Finalmente, clique no Criar botão para criar seu ID do seu cliente da web. Você’será levado de volta à página inicial, onde você’verei suas credenciais recém -criadas. Clique no ícone Copiar para copiar seu novo ID do cliente da Web:

Agora que criamos com sucesso nosso ID do cliente da Web, vamos’s Entrar no nosso aplicativo React, instalá -lo e depois integre o login do Google.

Juntando tudo junto com @react-oauth/google

Para usar o pacote de login do Google, primeiro precisamos instalá -lo. Execute qualquer um dos comandos abaixo para instalar o pacote:

// npm npm install @react-oauth/[email protegido] // yarn yarn add @react-outh/[email protegido] 

Após a instalação, nós’Envolver nosso aplicativo com o GoogleoAuthProvider e depois forneça nosso ID do Google Web Client. Isso é para que todo o nosso aplicativo React possa acessar o provedor de autenticação do Google uma vez.

Dentro do nosso índice.arquivo js nós’LL embrulhou o aplicativo assim;

/*índice.js*/ importar reagir de 'react'; importar reatdom de 'react-dom'; importar < GoogleOAuthProvider >de '@react-oauth/google'; Importar aplicativo de './Aplicativo'; Reatdom.renderizar (    , documento.getElementById ('root'));

Assim como em cada pacote instalado no React, devemos primeiro importar o módulo antes que possamos usá -lo. Então, dentro do seu aplicativo React, vá para o aplicativo.arquivo js e copie o seguinte código;

/*Aplicativo.js*/ importar reagir de 'react'; importar < GoogleLogin >de '@react-oauth/google'; App de função () < const responseMessage = (response) =>< console.log(response); >; const errorMessage = (erro) => < console.log(error); >; retornar (

Reaja o login do Google
 
 
 OnError = />
)> exportar aplicativo padrão;

O código acima é uma maneira muito simples de mostrar como usar o login do Google. Importamos o módulo GoogleLogin de @react-oauth/google e chamamos em nosso componente. Em seguida, criamos duas funções que o console registra uma resposta se o login foi bem -sucedido e um erro se não fosse’t bem -sucedido.

Você também pode combinar as duas funções em uma e usar um condicional para renderizá -lo.

Aqui’s como o código acima parece quando o testamos no navegador:

Clicando no Faça login no Google O botão solicitará uma tela de consentimento ou modal que se pareça com o seguinte:

Agora que vimos como adicionar o login do Google ao nosso aplicativo React, vamos’está dê um passo adiante e pegue o usuário’s Detalhes para criar um perfil de usuário em nosso aplicativo. Vamos redirecionar apenas o usuário para uma página inicial e depois obter o usuário’s e -mail, nome e imagem.

Criando um perfil de usuário em seu aplicativo React com base no usuário’S perfil do Google

A integração do Google Login ao nosso aplicativo nos dá acesso ao usuário’perfil s, que inclui o usuário’nome s, endereço de e -mail, imagem, accessToken e assim por diante. Nós’usarei essas informações para criar nosso perfil de usuário.

Ainda assim, em nosso aplicativo.componente js, vamos’s substituir nosso código existente por este abaixo:

/*Aplicativo.js*/ importar react, < useState, useEffect >de 'react'; importar < googleLogout, useGoogleLogin >de '@react-oauth/google'; importar axios de 'axios'; App de função () < const [ user, setUser ] = useState([]); const [ profile, setProfile ] = useState([]); const login = useGoogleLogin(< onSuccess: (codeResponse) =>setUser (codere -resposta), OnError: (Erro) => Console.log ('login falhou:', erro)>); useeffect (() => < if (user) < axios .get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=$`, < headers: < Authorization: `Bearer $`, Accept: 'application/json' > >) .então ((res) => < setProfile(res.data); >) .Catch ((err) => Console.log (err)); >>, [usuário]); // Logre a função para registrar o usuário fora do Google e definir a matriz de perfil como NULL const Logout = () => < googleLogout(); setProfile(null); >; retornar (

Reaja o login do Google
 
 
  alt = "imagem do usuário" /> 
Usuário conectado
 
Nome: 
Endereço de email: 
 
> Log Out 
): ( login () >> Faça login com o Google &#55357;&#56960; )>