Índice

Objetivo

O fluxo de login integrado no SDK serve para facilitar a construção de aplicativos na plataforma fluig, provendo um meio de efetuar login sem explicitamente programar todas as etapas necessárias.

Integração

Para integrar o login no seu aplicativo, siga os seguintes passos:

1. Certifique-se que o fluigSDKFlows.framework do SDK foi adicionado como dependência no seu projeto.
2. Altere o fluxo do aplicativo para o login, seguindo os passos abaixo.

   1. Na AppDelegate do seu projeto, chame o método estático start(::) classe LoginFlow passando o tipo de navegação (root para iniciar o fluxo substituindo o UIViewController principal da janela ou from para iniciar a partir de um UIViewController) usado para iniciar o fluxo e uma instância de LoginFlowConfiguration como parâmetro. A classe LoginFlowConfiguration é responsável principalmente pela personalização do fluxo de login. Todos os parâmetros de LoginFlowConfiguration são opcionais. Um dos parâmetros possíveis é onSuccessReplaceRootWith que é um UIViewController para o qual deseja que o login redirecione após sua conclusão. Ao terminar o fluxo, caso esse parâmetro não tenha sido fornecido, será enviado uma Notification informando que o usuário conseguiu se logar com sucesso.
      
      

      AppDelegate.swift

      import UIKit
      import fluigSDKFlows
      
      @UIApplicationMain
      class AppDelegate: UIResponder, UIApplicationDelegate {
      
          var window: UIWindow?
      
          func application(_ application: UIApplication, 
                           didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
      
              let viewController = MyAppViewController()
      
              window = UIWindow(frame: UIScreen.main.bounds)
              window?.makeKeyAndVisible()
              window?.rootViewController = viewController
      
              let configuration = LoginFlowConfiguration(onSuccessReplaceRootWith: viewController)
      
              LoginFlow.start(mode: .root(window!), configuration: configuration)
      
              return true
          }
      }

      
      

      1. No caso de não informar a tela desejada como parâmetro no LoginFlowConfiguration, é recomendado que implemente no seu UIViewController o receptor da Notification enviada pelo fluxo de login.
         
         

         MyAppViewController.swift

         import UIKit
         import fluigSDKFlows
         
         class MyAppViewController: UIViewController {
         
             override func viewDidLoad() {
                 super.viewDidLoad()
         
                 ...
         
                 NotificationCenter.default.addObserver(self,
                                                        selector: #selector(onLoginFlowEnd),
                                                        name: Notification.Name.fluigSdkDidLogin,
                                                        object: nil)
             }
         
             @objc func onLoginFlowEnd() {
                 present(LoggedViewController(), animated: true)
             }
         }

MFA 

Durante o fluxo de login, é possível que o usuário seja apresentado a uma tela de token de MFA, caso o servidor tenha essa configuração habilitada. Neste caso, será apresentado um botão para abrir o aplicativo relacionado a geração do token.

Para que este botão funcione corretamente, altere o arquivo property list do seu projeto (geralmente denominado Info.plist) e adicione um Array de chave LSApplicationQueriesSchemes com um item do tipo String com o valor safeid.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>safeid</string>
	</array>
</dict>
</plist>

Caso esteja mais familiarizado com o editor padrão de property lists do Xcode, confira abaixo o mesmo exemplo de Info.plist.

Personalizações

Na seção Integração, é possível notar a presença de uma classe responsável por diversas personalizações do fluxo de login denominada LoginFlowConfiguration. Esta seção expõe que elementos são esses e como alterá-los para aderir às suas preferências.

• Integração biométrica
• Login obrigatório
• Login avançado
• Fundo das telas
• Logo da empresa
• Conteúdo do page controller
• Cores dos principais botões

Integração biométrica

Para ativar a integração biométrica do dispositivo no login basta usar a opção useBiometryIfAvailable da classe LoginFlowConfiguration.

Login obrigatório

Por padrão o login é exigido apenas na primeira vez que o aplicativo é aberto e uma sessão é mantida para o usuário, caso necessário, é possível exigir que o usuário autentique todas as vezes que ele entrar no aplicativo usando a opção alwaysRequireAuthentication da classe LoginFlowConfiguration.

Login com Identity e login avançado

Por padrão são exibidas ao usuário ambas as opções de login, caso necessário é possível indicar ao fluxo que não exiba a opção de login avançado (para quando não existe a integração com o fluig Identity e é necessário usar o endereço do servidor) usando a opção enableAdvancedLogin da classe LoginFlowConfiguration.

Fundo das telas

O fundo das telas do login foi feito com o componente FluigSDKMediaView. Este componente permite utilizar: vídeo, imagem, uma cor sólida ou um gradiente horizontal de duas cores.

Siga as instruções abaixo para utilizar o fundo desejado.

Vídeo

Atribua ao parâmetro background o valor LoginFlowBackground.video(myVideo) no construtor da classe LoginFlowConfiguration. O tipo da variável myVideo é URL.

Imagem

Atribua ao parâmetro background o valor LoginFlowBackground.image(myImage) no construtor da classe LoginFlowConfiguration. O tipo da variável myImage é UIImage.

Cor de fundo

Atribua ao parâmetro background o valor LoginFlowBackground.gradient(myGradient) no construtor da classe LoginFlowConfiguration. O tipo da variável myGradient é Gradient que é uma tupla (firstColor: UIColor, lastColor: UIColor). Caso os valores firstColor e lastColor sejam iguais, o fundo terá apenas uma cor. Caso contrário, será produzido um gradiente horizontal de duas cores.

import fluigSDKFlows

let configuration = LoginFlowConfiguration(background: .gradient(.blue, UIColor(red: 213.0/255.0,
                                                                                green: 40.0/255.0, 
                                                                                blue: 121.0/255.0, 
                                                                                alpha: 1.0)) 

Logo da empresa

No topo de cada tela do fluxo há o logo da empresa. Por padrão, o logo mostrado é do fluig. Para alterar o logo, atribua ao parâmetro logoImage a UIImage desejada no construtor da classe LoginFlowConfiguration.

Conteúdo do page controller

Na primeira tela do fluxo, existe um UIScrollView paginado cujo conteúdo pode ser alterado. Para personalizar este elemento, no construtor da classe LoginFlowConfiguration atribua aos parâmetros emailRequestPageTitle (do tipo String) e emailRequestPageTips (do tipo [String]) os valores desejados.

import fluigSDKFlows

let configuration = LoginFlowConfiguration(emailRequestPageTitle: "Example Title",
                                           emailRequestPageTips: ["This is an example of a page content.",
                                                                  "This is the second page and will only show if the user scrolls."])

Cores dos principais botões

A maioria das telas do fluxo de login possuem um FluigSDKButton, cuja cor pode ser alterada para se adequar às cores temáticas de seu aplicativo. Antes de começar a personalização dos botões, recomenda-se a leitura da documentação do FluigSDKButton para saber quais são suas cores padrões.

Para alterar os botões, atribua ao parâmetro buttonBackground o Gradient desejado no construtor do LoginFlowConfiguration. O tipo Gradient é uma tupla (firstColor: UIColor, lastColor: UIColor).

import fluigSDKFlows

let configuration = LoginFlowConfiguration(buttonBackground: .gradient(.orange, .cyan))