Pular para o conteúdo principal
Para nossos novos amigos:

Logto é uma alternativa ao Auth0 projetada para aplicativos modernos e produtos SaaS. Ele oferece serviços tanto Cloud quanto Open-source para ajudá-lo a lançar rapidamente seu sistema de identidade e gerenciamento (IAM). Desfrute de autenticação, autorização e gerenciamento multi-inquilino tudo em um.

Recomendamos começar com um tenant de desenvolvimento gratuito no Logto Cloud. Isso permite que você explore todos os recursos facilmente.

Neste artigo, vamos percorrer os passos para construir rapidamente a experiência de login Twilio (autenticação de usuário) com Flutter e Logto.

Pré-requisitos

Criar um aplicativo no Logto​

Logto é baseado na autenticação OpenID Connect (OIDC) e na autorização OAuth 2.0. Ele suporta o gerenciamento de identidade federada em vários aplicativos, comumente chamado de Autenticação Única (SSO).

Para criar seu aplicativo Native app, basta seguir estas etapas:

  1. Abra o Logto Console. Na seção "Get started", clique no link "View all" para abrir a lista de frameworks de aplicativos. Alternativamente, você pode navegar para Logto Console > Applications e clicar no botão "Create application". Get started
  2. No modal que se abre, clique na seção "Native app" ou filtre todos os frameworks "Native app" disponíveis usando as caixas de seleção de filtro rápido à esquerda. Clique no cartão do framework "Flutter" para começar a criar seu aplicativo. Frameworks
  3. Insira o nome do aplicativo, por exemplo, "Bookstore", e clique em "Create application".

🎉 Ta-da! Você acabou de criar seu primeiro aplicativo no Logto. Você verá uma página de parabéns que inclui um guia de integração detalhado. Siga o guia para ver como será a experiência em seu aplicativo.

Integrar Logto SDK​

dica:
  • O pacote SDK está disponível no pub.dev e no repositório GitHub do Logto.
  • O projeto de exemplo é construído usando Flutter material. Você pode encontrá-lo no pub.dev e em nosso repositório GitHub.
  • O SDK é compatível apenas com as plataformas Android e iOS.
  • O SDK v1.x é compatível com Dart 2.x. Para o SDK v2.x, você precisa atualizar sua versão do Dart para 3.x ou superior.

Instalação​

Você pode instalar o logto_dart_sdk package diretamente usando o gerenciador de pacotes pub. Execute o seguinte comando no diretório raiz do seu projeto:

flutter pub get logto_dart_sdk

Módulos​

O logto_dart_sdk inclui dois módulos principais:

  • logto_core.dart Este módulo principal fornece as funções e interfaces básicas para o Logto SDK.

  • logto_client.dart Este módulo cliente oferece uma classe cliente Logto de alto nível para interagir com o servidor Logto.

Dependência e configurações​

Dependências e configurações​

Este SDK possui as seguintes dependências, algumas requerem configurações adicionais:

flutter_secure_storage​

Usamos flutter_secure_storage para implementar o armazenamento seguro de tokens persistente e multiplataforma.

  • Keychain é usado para iOS
  • Criptografia AES é usada para Android.

Configurar versão do Android​

Defina o android:minSdkVersion para 18 no arquivo android/app/build.gradle do seu projeto.

build.gradle
  android {
      ...

      defaultConfig {
          ...
          minSdkVersion 18
          ...
      }
  }

Desativar backup automático​

Por padrão, o Android pode fazer backup de dados no Google Drive automaticamente. Isso pode causar a exceção java.security.InvalidKeyException:Failed to unwrap key.

Para evitar isso, você pode desativar o backup automático para seu aplicativo ou excluir sharedprefs do FlutterSecureStorage.

  1. Para desativar o backup automático, vá para o arquivo de manifesto do seu aplicativo e defina os atributos android:allowBackup e android:fullBackupContent como false.

    AndroidManifest.xml
    <manifest ... >
        ...
        <application
          android:allowBackup="false"
          android:fullBackupContent="false"
          ...
        >
            ...
        </application>
    </manifest>

  2. Excluir sharedprefs do FlutterSecureStorage.

    Se você precisar manter o android:fullBackupContent para seu aplicativo em vez de desativá-lo, pode excluir o diretório sharedprefs do backup. Veja mais detalhes na documentação do Android.

    No seu arquivo AndroidManifest.xml, adicione o atributo android:fullBackupContent ao elemento <application>, como mostrado no exemplo a seguir. Este atributo aponta para um arquivo XML que contém regras de backup.

    AndroidManifest.xml
    <application ...
      android:fullBackupContent="@xml/backup_rules">
    </application>

    Crie um arquivo XML chamado @xml/backup_rules no diretório res/xml/. Neste arquivo, adicione regras com os elementos <include> e <exclude>. O exemplo a seguir faz backup de todas as preferências compartilhadas, exceto device.xml:

    @xml/backup_rules
    <?xml version="1.0" encoding="utf-8"?>
    <full-backup-content>
      <exclude domain="sharedpref" path="FlutterSecureStorage"/>
    </full-backup-content>

Por favor, verifique flutter_secure_storage para mais detalhes.

flutter_web_auth​

flutter_web_auth é usado por trás do SDK flutter do Logto. Dependemos de sua interface de interação baseada em webview para autenticar usuários.

nota:

Este plugin usa ASWebAuthenticationSession no iOS 12+ e macOS 10.15+, SFAuthenticationSession no iOS 11, Chrome Custom Tabs no Android e abre uma nova janela na Web.

Registrar a URL de callback no Android​

Para capturar a URL de callback da página de login do Logto, você precisará registrar seu redirectUri de login no arquivo AndroidManifest.xml.

AndroidManifest.xml
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
    <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="io.logto"/>
    </intent-filter>
</activity>

http.dart​

Como o SDK precisa fazer requisições de rede, você precisará passar um cliente HTTP para o SDK. Você pode usar o http.Client padrão do http.dart ou criar seu próprio http.Client com configurações personalizadas.


  import 'package:http/http.dart' as http;

Integração​

Iniciar LogtoClient​

Importe o pacote logto_dart_sdk e inicialize a instância LogtoClient na raiz do seu aplicativo.

lib/main.dart
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Logto Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late LogtoClient logtoClient;

  void render() {
    // mudança de estado
  }

  // LogtoConfig
  final logtoConfig = const LogtoConfig(
    endpoint: "<your-logto-endpoint>",
    appId: "<your-app-id>"
  );

  void _init() {
    logtoClient = LogtoClient(
      config: logtoConfig,
      httpClient: http.Client(), // Cliente http opcional
    );
    render();
  }

  @override
  void initState() {
    super.initState();
    _init();
  }

  // ...
}

Implementar login​

Antes de mergulharmos nos detalhes, aqui está uma visão geral rápida da experiência do usuário final. O processo de login pode ser simplificado da seguinte forma:

  1. Seu aplicativo invoca o método de login.
  2. O usuário é redirecionado para a página de login do Logto. Para aplicativos nativos, o navegador do sistema é aberto.
  3. O usuário faz login e é redirecionado de volta para o seu aplicativo (configurado como o URI de redirecionamento).

Sobre o login baseado em redirecionamento​

  1. Este processo de autenticação segue o protocolo OpenID Connect (OIDC), e o Logto aplica medidas de segurança rigorosas para proteger o login do usuário.
  2. Se você tiver vários aplicativos, pode usar o mesmo provedor de identidade (Logto). Uma vez que o usuário faz login em um aplicativo, o Logto completará automaticamente o processo de login quando o usuário acessar outro aplicativo.

Para saber mais sobre a lógica e os benefícios do login baseado em redirecionamento, veja Experiência de login do Logto explicada.

Antes de começar, você precisa adicionar um URI de redirecionamento no Admin Console para o seu aplicativo.

Vamos mudar para a página de detalhes do Aplicativo no Logto Console. Adicione um URI de redirecionamento io.logto://callback e clique em "Salvar alterações".

URI de redirecionamento no Logto Console
  • Para iOS, o esquema de URI de redirecionamento não importa realmente, pois a classe ASWebAuthenticationSession ouvirá o URI de redirecionamento independentemente de estar registrado ou não.
  • Para Android, o esquema de URI de redirecionamento deve ser registrado no arquivo AndroidManifest.xml.

Após o URI de redirecionamento ser configurado, adicionamos um botão de login à sua página, que chamará a API logtoClient.signIn para invocar o fluxo de login do Logto:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
  // ...
  final redirectUri = 'io.logto://callback';

  @override
  Widget build(BuildContext context) {
    // ...

    Widget signInButton = TextButton(
      onPressed: () async {
        await logtoClient.signIn(redirectUri);
        render();
      },
      child: const Text('Sign In'),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SelectableText('My Demo App'),
            signInButton,
          ],
        ),
      ),
    );
  }
}

Implementar logout​

Agora vamos adicionar um botão de logout na página principal para que os usuários possam sair do seu aplicativo.

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    // ...

    Widget signOutButton = TextButton(
      onPressed: () async {
        await logtoClient.signOut();
        render();
      },
      child: const Text('Sign Out'),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SelectableText('My Demo App'),
            signInButton,
            signOutButton,
          ],
        ),
      ),
    );
  }
}

Lidar com o status de autenticação​

O SDK do Logto fornece um método assíncrono para verificar o status de autenticação. O método é logtoClient.isAuthenticated. O método retorna um valor booleano, true se o usuário estiver autenticado, caso contrário, false.

No exemplo, renderizamos condicionalmente os botões de login e logout com base no status de autenticação. Agora vamos atualizar o método render em nosso Widget para lidar com a mudança de estado:

lib/main.dart
class _MyHomePageState extends State<MyHomePage> {
  // ...
  bool? isAuthenticated = false;

  void render() {
    setState(() async {
      isAuthenticated = await logtoClient.isAuthenticated;
    });
  }

  @override
  Widget build(BuildContext context) {
    // ...

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SelectableText('My Demo App'),
            isAuthenticated == true ? signOutButton : signInButton,
          ],
        ),
      ),
    );
  }
}

Ponto de verificação: Teste seu aplicativo​

Agora, você pode testar seu aplicativo:

  1. Execute seu aplicativo, você verá o botão de login.
  2. Clique no botão de login, o SDK iniciará o processo de login e redirecionará você para a página de login do Logto.
  3. Após fazer login, você será redirecionado de volta para seu aplicativo e verá o botão de logout.
  4. Clique no botão de logout para limpar o armazenamento de tokens e sair.

Adicionar conector Twilio​

O conector SMS é um método usado para enviar senhas de uso único (OTPs) para autenticação. Ele permite a verificação de Phone number para suportar autenticação sem senha, incluindo registro baseado em SMS, login, autenticação de dois fatores (2FA) e recuperação de conta. Você pode facilmente conectar Twilio como seu provedor SMS. Com o conector SMS do Logto, você pode configurá-lo em apenas alguns minutos.

Para adicionar um conector SMS, basta seguir estas etapas:

  1. Navegue até Console > Connector > Email and SMS connectors.
  2. Para adicionar um novo conector SMS, clique no botão "Set up" e selecione "Twilio".
  3. Revise a documentação README para o provedor selecionado.
  4. Complete os campos de configuração na seção "Parameter Configuration".
  5. Personalize o modelo SMS usando o editor JSON.
  6. Teste sua configuração enviando um código de verificação para seu Phone number.

Aba do conector

nota:

Se você estiver seguindo o guia do conector no local, pode pular a próxima seção.

Configurar Twilio SMS connector​

Registrar conta Twilio​

Crie uma nova conta no Twilio. (Pule para o próximo passo se você já tiver uma.)

Configurar números de telefone dos remetentes​

Vá para a página do console Twilio e faça login com sua conta Twilio.

Compre um número de telefone em "Phone Numbers" -> "Manage" -> "Buy a number".

dica:

Às vezes, você pode encontrar a situação em que o serviço de SMS não é suportado em países ou áreas específicas. Escolha um número de outras regiões para contornar isso.

Uma vez que tenhamos um número válido reivindicado, navegue para "Messaging" -> "Services". Crie um novo Serviço de Mensagens clicando no botão.

Dê um nome amigável ao serviço e escolha Notify my users como nosso propósito de serviço. No próximo passo, escolha Phone Number como Sender Type, e adicione o número de telefone que acabamos de reivindicar a este serviço como remetente.

nota:

Cada número de telefone pode ser vinculado apenas a um serviço de mensagens.

Obter credenciais da conta​

Precisaremos das credenciais da API para fazer o conector funcionar. Vamos começar pela página do console Twilio.

Clique no menu "Account" no canto superior direito, depois vá para a página "API keys & tokens" para obter seu Account SID e Auth token.

Volte para a página de configurações de "Messaging" -> "Services" a partir da barra lateral e encontre o Sid do seu serviço.

Compor o JSON do conector​

Preencha os campos accountSID, authToken e fromMessagingServiceSID com Account SID, Auth token e Sid do serviço de mensagens correspondente.

Você pode adicionar vários modelos de conector SMS para diferentes casos. Aqui está um exemplo de adição de um único modelo:

  • Preencha o campo content com conteúdos de string arbitrária. Não se esqueça de deixar o espaço reservado {{code}} para o código de verificação aleatório.
  • Preencha o campo usageType com Register, SignIn, ForgotPassword, Generic para diferentes casos de uso. Para habilitar fluxos completos de usuário, são necessários modelos com usageType Register, SignIn, ForgotPassword e Generic.

Testar conector SMS Twilio​

Você pode inserir um número de telefone e clicar em "Send" para ver se as configurações funcionam antes de "Save and Done".

É isso. Não se esqueça de Habilitar conector na experiência de login.

Tipos de configuração​

NomeTipo
accountSIDstring
authTokenstring
fromMessagingServiceSIDstring
templatesTemplates[]
Propriedades do TemplateTipoValores Enum
contentstringN/A
usageTypeenum string'Register' | 'SignIn' | 'ForgotPassword' | 'Generic'

Salvar sua configuração​

Verifique se você preencheu os valores necessários na área de configuração do conector Logto. Clique em "Salvar e Concluído" (ou "Salvar alterações") e o conector Twilio deve estar disponível agora.

Ativar conector Twilio na Experiência de Login​

Depois de criar um conector com sucesso, você pode habilitar o login e registro sem senha baseado em número de telefone.

  1. Navegue para Console > Experiência de login > Inscrição e login.
  2. Configure os métodos de inscrição (Opcional):
    1. Selecione "Phone number" ou "Email ou número de telefone" como o identificador de inscrição.
    2. "Verificar na inscrição" é forçado a ser habilitado. Você também pode habilitar "Criar uma senha" no registro.
  3. Configure os métodos de login:
    1. Selecione Phone number como um dos identificadores de login. Você pode fornecer vários identificadores disponíveis (email, número de telefone e nome de usuário).
    2. Selecione "Código de verificação" e / ou "Senha" como o fator de autenticação.
  4. Clique em "Salvar alterações" e teste na "Pré-visualização ao vivo".

Aba de Experiência de Login

Além do registro e login via OTPs , você também pode habilitar a recuperação de senha e verificação de segurança baseada em , bem como vincular Phone number ao perfil. Veja Fluxos de usuário final para mais detalhes.

Teste e Validação​

Retorne ao seu aplicativo Flutter. Agora você deve conseguir fazer login com Twilio. Aproveite!

Leituras adicionais​

Fluxos de usuário final: Logto fornece fluxos de autenticação prontos para uso, incluindo MFA e SSO corporativo, juntamente com APIs poderosas para implementação flexível de configurações de conta, verificação de segurança e experiência multi-inquilino.

Autorização (Authorization): A autorização define as ações que um usuário pode realizar ou os recursos que ele pode acessar após ser autenticado. Explore como proteger sua API para aplicativos nativos e de página única e implementar Controle de Acesso Baseado em Papel (RBAC).

Organizações (Organizations): Particularmente eficaz em aplicativos SaaS multi-inquilino e B2B, o recurso de organização permite a criação de inquilinos, gerenciamento de membros, RBAC em nível de organização e provisionamento just-in-time.

Série IAM do cliente: Nossos posts em série sobre Gerenciamento de Identidade e Acesso do Cliente (ou Consumidor), do básico ao avançado e além.