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.
Para integrar o login no seu aplicativo, siga os seguintes passos:
fluigSDKFlows.framework
do SDK foi adicionado como dependência no seu projeto.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.
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 } }
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.
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) } }
Fique atento!
Caso seu servidor esteja configurado para utilizar o MFA, é necessária mais uma configuração no seu projeto.
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
.
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.
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.
Atribua ao parâmetro background
o valor LoginFlowBackground.video(myVideo)
no construtor da classe LoginFlowConfiguration
. O tipo da variável myVideo
é URL
.
Atribua ao parâmetro background
o valor LoginFlowBackground.image(myImage)
no construtor da classe LoginFlowConfiguration
. O tipo da variável myImage
é UIImage
.
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))
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
.
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."])
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.
Importante
Essas alterações serão propagadas para todos os principais botões do fluxo de login. Não é possível alterar separadamente cada botão.
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))