Personalizar o FlutterFlow CustomAuthManager usando Logto SDK

FlutterFlow possui um recurso de autenticação personalizada embutido que permite autenticar usuários usando seu próprio backend. No entanto, o fluxo de autenticação personalizada embutido foi projetado para funcionar com uma única chamada de API de autenticação. Se você estiver usando um Provedor de Identidade (IdP) de terceiros, a solicitação de autenticação só pode ser feita usando o tipo de concessão Resource Owner Password Credentials, o que não é recomendado para uso em produção. Veja Tipo de concessão ropc obsoleto para mais detalhes.

Um fluxo de autenticação padrão OpenID Connect (OIDC) envolve várias etapas, como autorização, troca de tokens e recuperação de informações do usuário. Para implementar um fluxo de autenticação OIDC padrão com um IdP como Logto, você precisa personalizar a classe CustomAuthManager no FlutterFlow.

Este tutorial mostrará como personalizar a classe CustomAuthManager no FlutterFlow usando o Logto Flutter SDK. Você pode aproveitar o Logto SDK para o fluxo de autenticação OIDC padrão enquanto mantém os benefícios do construtor de interface do FlutterFlow.

dica:

• O pacote Logto SDK está disponível no pub.dev e no repositório github do Logto.
• O SDK atualmente é adequado apenas para plataformas Android e iOS.

Pré-requisitos

• Uma conta Logto Cloud ou um Logto auto-hospedado.
• Criar um aplicativo Logto Flutter.
• Um projeto FlutterFlow.

Habilitar código personalizado no FlutterFlow

Para personalizar a classe CustomAuthManager, você precisa habilitar o recurso de código personalizado no FlutterFlow. Siga o guia Gerenciar Código Personalizado no GitHub para sincronizar seu projeto FlutterFlow com o GitHub.

nota:

Gerenciar código personalizado no GitHub é um recurso premium no FlutterFlow. Você precisa atualizar seu FlutterFlow para o plano pro para habilitar esse recurso.

Uma vez feito isso, você terá três branches diferentes no seu repositório GitHub FlutterFlow:

1. main: A branch principal para o projeto flutter. Você precisará dessa branch para implantar seu projeto.
2. flutterflow: A branch onde o FlutterFlow sincronizará as alterações do editor FlutterFlow.
3. develop: A branch onde você pode modificar seu código personalizado.

Crie sua interface no FlutterFlow

Primeiro, crie sua interface no FlutterFlow. Você pode seguir a documentação do FlutterFlow para criar sua interface com base em seus requisitos. Para este tutorial, como requisito mínimo, criaremos duas páginas:

1. Uma página inicial simples com um botão de login.
2. Uma página de perfil do usuário para exibir informações do usuário e botão de logout.

Vá para App Settings -> página Authentication e habilite a autenticação personalizada. Isso criará uma classe CustomAuthManager no seu projeto FlutterFlow.

Uma vez que você tenha a interface pronta, navegue até integrations -> página GitHub e clique no botão Push to Repository para enviar as alterações para a branch flutterflow.

Personalizar o CustomAuthManager

Mude para a branch develop no seu repositório GitHub e mescle as últimas alterações da branch flutterflow. Incluindo suas páginas de interface e a classe CustomAuthManager pré-construída.

Instalar a dependência do Logto SDK

Adicione a dependência do Logto SDK ao seu projeto.

  flutter pub add logto_dart_sdk

nota:

Pacote Http opcional:

O cliente Logto requer um cliente http para fazer chamadas de API. Você pode usar o pacote http ou qualquer outro pacote de cliente http de sua escolha.

  flutter pub add http

Atualizar o UserProvider

Adicione a classe OpenIdClaims à classe CustomAuthUserProvider para armazenar as informações do usuário.

A classe OpenIdClaims faz parte do Logto SDK, que fornecerá as reivindicações do id_token para o usuário autenticado.

// lib/auth/custom_auth/custom_auth_user_provider.dart

import 'package:logto_dart_sdk/src/modules/id_token.dart';
import 'package:rxdart/rxdart.dart';

import 'custom_auth_manager.dart';

class FlutterFlowAuthAuthUser {
  FlutterFlowAuthAuthUser({required this.loggedIn, this.uid, this.idToken});

  bool loggedIn;
  String? uid;
  OpenIdClaims? idToken;
}

/// Gera um fluxo do usuário autenticado.
BehaviorSubject<FlutterFlowAuthAuthUser> flutterFlowAuthAuthUserSubject =
    BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false));
Stream<FlutterFlowAuthAuthUser> flutterFlowAuthAuthUserStream() =>
    flutterFlowAuthAuthUserSubject
        .asBroadcastStream()
        .map((user) => currentUser = user);

Inicializar o cliente logto no CustomAuthManager

Inicialize o cliente Logto na classe CustomAuthManager.

// lib/auth/custom_auth/custom_auth_manager.dart

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'package:logto_dart_sdk/logto_client.dart';
import 'package:logto_dart_sdk/src/modules/id_token.dart';

import 'custom_auth_user_provider.dart';

export 'custom_auth_manager.dart';


class CustomAuthManager {
  late LogtoClient logtoClient;

  final logtoConfig = const LogtoConfig(
      appId: '<YOUR-APP-ID>',
      endpoint: '<YOUR-LOGTO-ENDPOINT>');


  // ...

  FlutterFlowAuthAuthUser? _updateCurrentUser(
      {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) {
    // Atualiza o fluxo do usuário atual.
    final updatedUser = FlutterFlowAuthAuthUser(
      loggedIn: loggedIn,
      uid: uid,
      idToken: idToken,
    );

    flutterFlowAuthAuthUserSubject.add(updatedUser);

    return updatedUser;
  }

  Future initialize() async {
    logtoClient = LogtoClient(config: logtoConfig, httpClient: http.Client());

    late OpenIdClaims? idToken;

    try {
      idToken = await logtoClient.idTokenClaims;
    } catch (e) {
      if (kDebugMode) {
        print('Erro ao inicializar a autenticação: $e');
      }
    }

    _updateCurrentUser(
        loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken);
  }
}

FlutterFlowAuthAuthUser? currentUser;
bool get loggedIn => currentUser?.loggedIn ?? false;

O método initialize inicializará o cliente Logto e atualizará o fluxo de usuário atual com o status de autenticação do usuário persistido no armazenamento local.

O Logto SDK usa o pacote flutter_secure_storage para armazenar as informações de autenticação do usuário de forma segura.

Implementar o método de login

Chame o método LogtoClient.signIn para iniciar um fluxo de autenticação OIDC padrão. A página de login do Logto será aberta em uma webview usando flutter_web_auth.

// lib/auth/custom_auth/custom_auth_manager.dart

Future<FlutterFlowAuthAuthUser?> signIn(
    String redirectUri,
  ) async {
    await logtoClient.signIn(redirectUri);

    var idTokenClaims = await logtoClient.idTokenClaims;

    return _updateCurrentUser(
      loggedIn: idTokenClaims != null,
      uid: idTokenClaims?.subject,
      idToken: idTokenClaims,
    );
  }

O LogtoClient lidará com as etapas de autorização, troca de tokens e recuperação de informações do usuário. Uma vez que o usuário é autenticado, as idTokenClaims serão armazenadas no armazenamento local. Recupere as idTokenClaims do LogtoClient e atualize o fluxo de usuário atual.

Implementar o método de logout

// lib/auth/custom_auth/custom_auth_manager.dart

Future signOut() async {
    await logtoClient.signOut();

    flutterFlowAuthAuthUserSubject.add(
      FlutterFlowAuthAuthUser(loggedIn: false),
    );
  }

Atualizar os métodos utilitários de autenticação

• Adicione o getter authManager para acessar a instância do CustomAuthManager.
• Adicione o getter currentUserUid para obter o uid do usuário atual.
• Adicione o getter currentUserData para obter os dados do usuário atual.
• Adicione o getter logtoClient para acessar a instância do cliente Logto.

// lib/auth/custom_auth/auth_util.dart

import 'package:logto_dart_sdk/logto_client.dart';
import 'package:logto_dart_sdk/src/modules/id_token.dart';

import 'custom_auth_manager.dart';

export 'custom_auth_manager.dart';

final _authManager = CustomAuthManager();
CustomAuthManager get authManager => _authManager;
String get currentUserUid => currentUser?.uid ?? '';
OpenIdClaims? get currentUserData => currentUser?.idToken;
LogtoClient get logtoClient => _authManager.logtoClient;

Integrar a autenticação personalizada na sua interface

Página Inicial

Chame o método authManager.signIn para iniciar o fluxo de autenticação quando o usuário clicar no botão de login.

redirectUri é a URL de callback que será usada para capturar o callback de autorização da página de login do Logto. Veja o Flutter SDK para mais detalhes sobre o redirectUri.

// lib/pages/home_page/home_page_widget.dart

final redirectUri = 'io.logto://callback';

// ...

FFButtonWidget(
  onPressed: () async {
    GoRouter.of(context).prepareAuthEvent();

    await authManager.signIn(redirectUri);

    context.replaceNamed('user');
  },
  text: 'Sign In',
  // ...
)

Página de Perfil do Usuário

Use os getters utilitários de autenticação para acessar os dados do usuário atual e a instância do cliente Logto.

// lib/pages/user/user_widget.dart

import '/auth/custom_auth/auth_util.dart';

// ...

children: [
  Text(
    'User ID: $currentUserUid',
  ),
  Text(
    'Display Name: ${currentUserData?.name}',
  ),
  Text(
    'Username: ${currentUserData?.username}',
  ),
  Text(
    'Email: ${currentUserData?.emailVerified ?? currentUserData?.email}',
  ),
]

Implemente o método de logout quando o usuário clicar no botão de logout.

// lib/pages/user/user_widget.dart

FFButtonWidget(
  onPressed: () async {
    await authManager.signOut();

    context.replaceNamed('HomePage');
  },
  text: 'Sign Out',
  // ...
)

Leituras adicionais

O Logto SDK fornece mais métodos para interagir com a API do Logto. Você pode personalizar ainda mais a classe CustomAuthManager para implementar mais recursos.

• Perfil do Usuário
• Recursos de API e organizações

Solução de problemas de dependência

flutter_secure_storage

Usamos flutter_secure_storage para implementar o armazenamento seguro persistente de tokens em várias plataformas. Sob o capô:

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

Configurar versão do Android:

Em [project]/android/app/build.gradle defina minSdkVersion para >= 18.

  android {
      ...

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

Desativar backup automático:

nota:

Por padrão, o Android faz backup dos dados no Google Drive. 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 o valor booleano android:allowBackup:

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

2. Excluir sharedprefs do FlutterSecureStorage.

   Se você precisar habilitar o android:fullBackupContent para seu aplicativo. Configure uma regra de backup para excluir as prefs usadas pelo plugin:

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

   <?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. Nós confiamos em sua interface de interação baseada em webview para abrir as páginas de autorização do Logto.

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. Você pode construí-lo com iOS 8+, mas atualmente é suportado apenas por iOS 11 ou superior.

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 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>