Guia Completo para Autenticação de Terceiros no Flutter com Parse no Back4App

introdução integrar métodos de autenticação de terceiros como facebook, google e apple em seu aplicativo flutter pode melhorar significativamente a experiência do usuário, oferecendo opções de login flexíveis e convenientes o parse server, alimentado pelo back4app, oferece suporte integrado para esses provedores de autenticação neste tutorial, você aprenderá como implementar a autenticação de terceiros em seu aplicativo flutter usando o sdk do parse no back4app ao final deste tutorial, você terá um aplicativo flutter com recursos de cadastro e login totalmente funcionais que incluem autenticação padrão por e mail/senha usando o parse métodos de autenticação de terceiros facebook google apple pré requisitos para acompanhar este tutorial, você precisará do seguinte uma conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com um ambiente de desenvolvimento flutter instalado em sua máquina siga este guia https //flutter dev/docs/get started/install se precisar de ajuda para configurar o flutter conhecimento básico de flutter e dart se você é novo, confira a introdução do flutter https //flutter dev/docs/get started/codelab contas de desenvolvedor para facebook, google e apple (necessárias para configurar métodos de login de terceiros) um ide ou editor de texto como visual studio code ou android studio passo 1 – configurando seu backend back4app 1 1 criar um projeto back4app faça login no seu painel do back4app https //dashboard back4app com/ clique em "criar novo app" digite um nome para sua aplicação, por exemplo, "authdemo" , e clique em "criar" uma vez que o projeto é criado, navegue até configurações do app > segurança e chaves anote seu id da aplicação e chave do cliente você precisará desses valores para inicializar o parse em seu aplicativo flutter 1 2 habilitar provedores de autenticação no seu painel do back4app, navegue até configurações do servidor > autenticação habilite os métodos de autenticação que você pretende usar facebook google apple para cada provedor, você precisará inserir credenciais específicas (ids de app, ids de cliente, segredos, etc ), que serão configuradas nos próximos passos passo 2 – instalando e configurando o sdk parse no flutter 2 1 criar um novo projeto flutter abra seu terminal e crie um novo projeto flutter flutter create auth demo cd auth demo 2 2 adicionar dependências abra pubspec yaml e adicione as seguintes dependências para parse e opções de login de terceiros dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter facebook auth ^5 0 5 google sign in ^5 4 0 sign in with apple ^3 3 0 execute flutter pub get para instalar as dependências 2 3 inicializar o parse em main dart no arquivo lib/main dart , importe o sdk do parse e inicialize o na função main import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/auth screen dart'; // you'll create this file later void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'parse auth demo', theme themedata( primaryswatch colors blue, ), home authscreen(), ); } } substitua 'your app id' e 'your client key' pelas suas credenciais reais do back4app da etapa 1 etapa 3 – implementando autenticação padrão 3 1 criar o serviço de autenticação crie um novo diretório chamado services sob lib e adicione um arquivo chamado auth service dart este serviço irá gerenciar o registro e login de usuários usando o parse // lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<parseuser?> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return user; } else { return null; } } future\<parseuser?> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return user; } else { return null; } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser?; await user? logout(); } } 3 2 crie a tela de autenticação crie um novo diretório chamado screens sob lib e adicione um arquivo chamado auth screen dart esta tela fornecerá a interface do usuário para autenticação padrão // lib/screens/auth screen dart import 'package\ flutter/material dart'; import ' /services/auth service dart'; class authscreen extends statefulwidget { @override authscreenstate createstate() => authscreenstate(); } class authscreenstate extends state\<authscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); final authservice authservice = authservice(); void signup() async { var user = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('user created successfully!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('sign up failed '))); } } void login() async { var user = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed '))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title const text('parse auth')), body padding( padding const edgeinsets all(16 0), child singlechildscrollview( child column( children \[ const text( 'standard authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), textfield( controller usernamecontroller, decoration const inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration const inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration const inputdecoration(labeltext 'password'), obscuretext true, ), const sizedbox(height 20), elevatedbutton( onpressed signup, child const text('sign up'), ), elevatedbutton( onpressed login, child const text('login'), ), const divider(), const sizedbox(height 20), const text( 'third party authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), // buttons for third party authentication will be added here ], ), ), ), ); } } passo 4 – integrando a autenticação do facebook 4 1 configurar conta de desenvolvedor do facebook criar um aplicativo do facebook vá para facebook para desenvolvedores https //developers facebook com/ e faça login clique em "meus aplicativos" e então "criar aplicativo" selecione "consumidor" como o tipo de aplicativo e clique em "próximo" preencha o nome do app e email de contato , então clique em "criar app" adicione o login do facebook ao seu app no painel do seu aplicativo, navegue até "adicionar um produto" e selecione "login do facebook" escolha "android" e/ou "ios" dependendo da sua plataforma alvo siga os passos de configuração fornecidos pelo facebook você precisará do identificador do pacote para ios e nome do pacote para android configurar uri de redirecionamento oauth defina o oauth redirect uri para https //parseapi back4app com/auth/facebook/callback obtenha o id do aplicativo e o segredo do aplicativo no painel do seu aplicativo, vá para "configurações" > "básico" anote o app id e app secret adicione o id do app e o segredo ao back4app no painel do back4app, navegue até configurações do servidor > autenticação sob facebook , insira seu id do app e segredo do app 4 2 atualizar auth service dart com login do facebook adicione o seguinte código para lidar com a autenticação do facebook // add these imports at the top import 'package\ flutter facebook auth/flutter facebook auth dart'; // inside authservice class map\<string, dynamic> facebookauthdata( string? accesstoken, string? userid, datetime? expirationdate) { return { 'id' userid, 'access token' accesstoken, 'expiration date' expirationdate? toutc() toiso8601string(), }; } future\<parseuser?> loginwithfacebook() async { final loginresult result = await facebookauth instance login(); if (result status == loginstatus success) { final accesstoken accesstoken = result accesstoken!; var user = parseuser(null, null, null); var response = await user loginwith( 'facebook', facebookauthdata( accesstoken token, accesstoken userid, accesstoken expires, ), ); if (response success) { return user; } } return null; } 4 3 adicione o botão de login do facebook ao auth screen dart adicione o seguinte botão à sua interface elevatedbutton( onpressed () async { var user = await authservice loginwithfacebook(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login failed '))); } }, child const text('login with facebook'), ), 4 4 configurações específicas da plataforma android atualize seu android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! add this inside the \<application> tag > \<meta data android\ name="com facebook sdk applicationid" android\ value="@string/facebook app id"/> \<activity android\ name="com facebook facebookactivity" android\ configchanges="keyboard|keyboardhidden|screenlayout|screensize|orientation" android\ label="@string/app name" /> \<! existing configurations > \</manifest> adicione seu id do app do facebook a android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="facebook app id">your facebook app id\</string> \</resources> ios atualize seu info plist arquivo \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>fbyour facebook app id\</string> \</array> \</dict> \</array> \<key>facebookappid\</key> \<string>your facebook app id\</string> \<key>facebookdisplayname\</key> \<string>authdemo\</string> passo 5 – integrando a autenticação do google 5 1 configurar conta de desenvolvedor do google criar um projeto no google cloud console vá para google cloud console https //console cloud google com/ e crie um novo projeto configurar a tela de consentimento do oauth navegue até apis & serviços > tela de consentimento do oauth configure a tela de consentimento com os escopos necessários criar id do cliente oauth vá para credenciais > criar credenciais > id do cliente oauth escolha aplicativo da web adicione uris de redirecionamento autorizados https //parseapi back4app com/auth/google/callback anote o id do cliente e segredo do cliente adicione o id e o segredo do cliente ao back4app no painel do back4app, em configurações do servidor > autenticação , insira seu id do cliente e segredo do cliente para o google 5 2 atualizar auth service dart com login do google adicione o seguinte código para lidar com a autenticação do google // add this import at the top import 'package\ google sign in/google sign in dart'; // inside authservice class map\<string, dynamic> googleauthdata(string? idtoken, string? accesstoken) { return { 'id token' idtoken, 'access token' accesstoken, }; } future\<parseuser?> loginwithgoogle() async { final googlesignin googlesignin = googlesignin( scopes \['email'], ); final googlesigninaccount? googleuser = await googlesignin signin(); if (googleuser == null) { return null; } final googlesigninauthentication googleauth = await googleuser authentication; var user = parseuser(null, null, null); var response = await user loginwith( 'google', googleauthdata( googleauth idtoken, googleauth accesstoken, ), ); if (response success) { return user; } return null; } 5 3 adicionar botão de login do google a auth screen dart adicione o seguinte botão à sua interface elevatedbutton( onpressed () async { var user = await authservice loginwithgoogle(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login failed '))); } }, child const text('login with google'), ), 5 4 configurações específicas da plataforma android adicione o seguinte ao seu android/app/build gradle arquivo dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } adicione seu id de cliente do google a android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> atualize seu android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! existing configurations > \<application> \<! existing configurations > \<meta data android\ name="com google android gms client application id" android\ value="@string/default web client id" /> \</application> \</manifest> ios adicione o id do cliente revertido ao seu info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> passo 6 – integrando a autenticação da apple 6 1 configurar conta de desenvolvedor da apple registrar seu aplicativo faça login em portal de desenvolvedores da apple https //developer apple com/ e registre seu aplicativo ativar login com a apple em identificadores , selecione seu aplicativo e ative login com a apple criar um id de serviços crie um id de serviços para seu aplicativo defina a uri de redirecionamento para https //parseapi back4app com/auth/apple/callback gerar um client secret crie uma chave privada para login com a apple use esta chave para gerar um client secret adicionar credenciais ao back4app no painel do back4app, em configurações do servidor > autenticação , insira seu id de serviços e client secret para a apple 6 2 atualizar auth service dart com login da apple adicione o seguinte código para lidar com a autenticação da apple // add this import at the top import 'package\ sign in with apple/sign in with apple dart'; import 'dart\ io' show platform; // inside authservice class map\<string, dynamic> appleauthdata(string? identitytoken, string? userid) { return { 'id' userid, 'token' identitytoken, }; } future\<parseuser?> loginwithapple() async { if (!platform isios) { // sign in with apple is only available on ios return null; } final credential = await signinwithapple getappleidcredential( scopes \[ appleidauthorizationscopes email, appleidauthorizationscopes fullname, ], ); var user = parseuser(null, null, null); var response = await user loginwith( 'apple', appleauthdata( credential identitytoken, credential useridentifier, ), ); if (response success) { return user; } return null; } 6 3 adicione o botão de login da apple em auth screen dart adicione o seguinte botão à sua interface elevatedbutton( onpressed () async { var user = await authservice loginwithapple(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login failed '))); } }, child const text('login with apple'), ), 6 4 configurações específicas da plataforma apenas ios no xcode, abra seu projeto e vá para assinatura e capacidades clique em "+ capacidade" e adicione "login com apple" certifique se de que seu identificador do pacote corresponda ao registrado no portal de desenvolvedores da apple passo 7 – testando seu aplicativo agora que você configurou todos os métodos de autenticação, pode executar seu aplicativo e testar cada opção de login 7 1 execute o aplicativo flutter run para ios, você deve executar o aplicativo em um dispositivo real para testar o login com apple para android, você pode usar um emulador ou um dispositivo físico 7 2 teste a autenticação padrão digite um nome de usuário, e mail e senha toque em "cadastrar" para criar um novo usuário toque em "login" para entrar com as credenciais criadas 7 3 teste o login com facebook toque "login com facebook" uma tela de login do facebook aparecerá faça login com suas credenciais do facebook 7 4 testar login com google toque "login com google" uma tela de login do google aparecerá faça login com sua conta do google 7 5 testar login com apple (apenas ios) toque "login com apple" o prompt de login da apple aparecerá autentique se usando seu id apple conclusão neste tutorial, você implementou com sucesso a autenticação padrão de email/senha e integrou métodos de autenticação de terceiros (facebook, google e apple) em seu aplicativo flutter usando o parse sdk no back4app essa configuração melhora a experiência do usuário ao oferecer várias opções de login convenientes próximos passos perfis de usuário amplie o aplicativo para gerenciar perfis de usuário, permitindo que os usuários atualizem suas informações funcionalidade de logout implemente recursos de logout para cada método de autenticação segurança de dados proteja seus dados implementando controle de acesso baseado em funções com acls e funções do parse tratamento de erros melhore o tratamento de erros para fornecer feedback mais detalhado aos usuários melhorias na ui personalize a ui para combinar com a marca do seu aplicativo e melhorar a experiência do usuário recursos adicionais documentação do back4app https //www back4app com/docs guia do parse flutter sdk https //docs parseplatform org/flutter/guide/ documentação oficial do flutter https //flutter dev/docs facebook para desenvolvedores https //developers facebook com/ plataforma de identidade do google https //developers google com/identity documentação de login com apple https //developer apple com/sign in with apple/ feliz codificação!