--- title: "Configurar o login com o Facebook no seu Progressive Web App (PWA)" description: "Para ativar o log in no Facebook  é preciso declarar o seu app ao Facebook.   Crie uma conta de desenvolvedor no Facebook:" canonical_url: "https://pt.goodbarber.com/help/gerenciar-o-acesso-de-usuario-e-os-grupos-r102/configurar-o-login-com-o-facebook-no-seu-progressive-web-app-pwa-a307/" lang: pt --- # Configurar o login com o Facebook no seu Progressive Web App (PWA) Source: https://pt.goodbarber.com/help/gerenciar-o-acesso-de-usuario-e-os-grupos-r102/configurar-o-login-com-o-facebook-no-seu-progressive-web-app-pwa-a307/ Para ativar o [log in no Facebook](https://pt.goodbarber.com/help/gerenciar-o-acesso-de-usuario-e-os-grupos-r102/adicionar-a-extensao-de-autenticacao-de-usuarios-a149/) é preciso **declarar o seu app** ao Facebook. Crie uma conta de desenvolvedor no Facebook: [Registre-se como desenvolvedor do Facebook.](https://pt.goodbarber.com/help/gerenciar-o-acesso-de-usuario-e-os-grupos-r102/registrar-se-como-desenvolvedor-do-facebook-a89/) **Se você não seguir o procedimento completo, não poderá conectar o seu aplicativo ao Facebook.** *Na explicação do processo, vamos usar um exemplo. Certifique-se que preenche as informações corretas do SEU app.* ## 1. Crie um aplicativo 1. Acesse este URL: [https://developers.facebook.com/apps](https://developers.facebook.com/apps) 2. Clique em **"Criar aplicativo"**. 3. Selecione "**Consumidor**" no popup 4. Clique em "**Continuar**" ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898721.jpg?v=1781778236.7556958) 5. Preencha os campos no popup: - "**Nome de exibição do aplicativo**": Preencha com o nome do seu aplicativo - "**Email de contato do aplicativo**": Adicione o seu email 6. Clique em "**Criar Aplicativo**" ## 2. Adicione um produto 1. Clique em "**Configurar**" na caixa de login do Facebook ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898723.jpg?v=1781778236.763696) ## 3. Selecione a plataforma "Web" ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898724.jpg?v=1781778236.7716959) 1. No campo "**URL do site**", preencha o URL do seu projeto GoodBarber: **"http://[YOURAPP] .goodbarber.app"** (veja o exemplo abaixo). 2. Clique em "**Salvar**". **Atenção:** Se você instalar um nome de domínio para seu Progressive Web App mais tarde, lembre-se de editar o campo "**URL do site**" com seu novo URL (aquele usando o nome do seu domínio) na plataforma Facebook. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898725.jpg?v=1781778236.779696) ## 4. Configuração OAuth do Cliente 1. Vá para o menu **Login do Facebook > Configurações** 2. Preencha o campo ***URIs de redirecionamento do OAuth válidos*** com a sua URL do PWA seguido por **/login** Por exemplo: *https://meuapp.goodbarber.app**/login*** *Se você configurou um nome de domínio, certifique-se de adicionar ambos: URL padrão + URL personalizado (com seu nome de domínio) seguido por /login* 3. Altere a opção "**Entrar com o SDK do JavaScript**" para **Sim** 4. Preencha o campo ***Domínios permitidos para o SDK do JavaScript*** com a URL do seu PWA. Por exemplo: *https://meuapp.goodbarber.app/* *Se você configurou um nome de domínio, certifique-se de adicionar ambos: url padrão + url personalizado (com seu nome de domínio)* 5. Clique em "Salvar alterações" no fim da página. Veja o exemplo abaixo: ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-28073230.jpg?v=1781778236.807696) ## 5. Acesse as Configurações > aba Básico na coluna da esquerda 1. Adicione o **URL da sua política de privacidade** *Você pode fazer o download da política de privacidade padrão do seu aplicativo a partir*[deste link](https://blog.goodbarber.com/docs/privacypolicy/privacypolicy_25-05-2018.doc) *Este é um modelo de política de privacidade. Você está convidado a personalizá-lo.* *Em seu back office, vá para* *Configurações > Outras configurações > Meus Arquivos* *, crie uma pasta chamada Política de Privacidade e carregue seu arquivo no formato .pdf.* *Abra o a* *rquivo* em um navegador externo para exibir seu URL completo. Copie e cole na plataforma do Facebook. 2. No campo **User Data Deletion**, selecione **URL de instruções de exclusão de dados**e preencha com o seu URL: *Para estar em conformidade com o Regulamento Geral de Proteção de Dados (GDPR), você deve fornecer um URL com instruções explícitas para informar às pessoas como excluir seus dados de seu aplicativo.* 3. Escolha uma **categoria** no menu suspenso 4. Clique em "**Salvar alterações**" no final da página. ## 6. Acesse as Configurações > aba Avançado na coluna da esquerda 1. Ative a opção "**App nativo ou desktop?**" 2. Clique em "**Salvar alterações**" na parte inferior da página ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898727.jpg?v=1781778236.8156962) ## 7. Torne o seu app do Facebook público 1. Pressione o botão para tornar seu aplicativo público na barra superior da plataforma do Facebook ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898728.jpg?v=1781778236.8236961) 2. Clique em "**Alternar modo**" no popup. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898729.jpg?v=1781778236.8276963) ## 8. Copie o seu App ID na plataforma do Facebook 1. Recupere-o no topo da página ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898731.jpg?v=1781778236.8356962) ## 9. Cole este valor no seu back office GoodBarber 1. Acesse o menu **Configurações > Configurações de registro > Processo de registro** para permitir que os seus usuários se inscrevam no seu PWA. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898732.jpg?v=1781778236.8396964) 2. Sob **Serviços Externos** passe o botão **Autorizar conexão Facebook**para **ON** 3. Cole o**Facebook App ID** no campo correspondente 4. Clique **OK.** ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-27898733.jpg?v=1781778236.8476963) ## 10. Solicite Acesso Avançado para permissão public_profile 1. Vá para o menu **Análise do aplicativo > Permissões e recursos** na plataforma do Facebook 2. Clique em "**Solicitar acesso avançado**" para a permissão **public_profile** 3. Confirme o acesso avançado para public_profile (não se esqueça de marcar a caixa "*Concordo que todos os dados recebidos por meio de public_profile serão usados conforme permitido.*") 4. Digite novamente a sua senha do Facebook para enviar a confirmação 5. Certifique-se de ter um acesso avançado para a permissão *public_profile* na lista, conforme mostrado abaixo: ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038150-43619326.jpg?v=1781778236.8636963) ## 11. Verificação completa do uso de dados Se o Facebook solicitar que você conclua a verificação de uso de dados: 1. Clique em "**Iniciar verificação**" 2. Marque a caixa "*Certifico que qualquer uso de public_profile está em conformidade com o uso permitido*." 3. Clique em "**Continuar**" 4. Marque a caixa para certificar a conformidade com os termos da plataforma e políticas do desenvolvedor e clique em "**Continuar**" 5. Clique em "**Enviar**" ## 12. Regenere o seu PWA Agora você pode regenerar o seu PWA para que possa testar a autenticação do Facebook: [Os diferentes tipos de atualizações de Progressive Web App (PWA)](https://pt.goodbarber.com/help/publicar-e-atualizar-o-pwa-r122/atualizar-o-seu-progressive-web-app-pwa-a306/) Esta funcionalidade não vai funcionar na pré-visualização do back office, a única maneira de testar a autenticação do Facebook no seu app é no **novo PWA gerado**.