Índice
Índice |
---|
outline | true |
---|
exclude | .*ndice |
---|
|
Instalação
Adicione o fluigSDKCore.framework, fluigSDKUi.framework e fluigSDKFlows.framework ao seu projeto no Xcode.
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:
- Certifique-se que o
fluigSDKFlows.framework
do SDK foi adicionado como dependência no seu projeto. - Altere o fluxo do aplicativo para o login, seguindo os passos abaixo.
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.
Bloco de código |
---|
language | ruby |
---|
title | 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
}
} |
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.
Bloco de código |
---|
language | ruby |
---|
title | 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)
}
} |
Nota |
---|
|
Caso seu servidor esteja configurado para utilizar o MFA, é necessária mais uma configuração no seu projeto. |
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.
Image Added
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
.
Bloco de código |
---|
language | xml |
---|
title | Info.plist |
---|
|
<?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
.
Image Added
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
Para ativar a integração biométrica do dispositivo no login basta usar a opção useBiometryIfAvailable da classe LoginFlowConfiguration.
Âncora |
---|
| login-obrigatorio |
---|
| login-obrigatorio |
---|
|
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.
Âncora |
---|
| login-avancado |
---|
| login-avancado |
---|
|
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.
Âncora |
---|
| fundo-das-telas |
---|
| fundo-das-telas |
---|
|
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.
Bloco de código |
---|
language | ruby |
---|
title | example.playground |
---|
|
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
.
Âncora |
---|
| conteudo-page-controller |
---|
| conteudo-page-controller |
---|
|
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.
Bloco de código |
---|
language | ruby |
---|
title | example.playground |
---|
|
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."]) |
Âncora |
---|
| cores-principais-botoes |
---|
| cores-principais-botoes |
---|
|
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.
Nota |
---|
|
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)
.
Bloco de código |
---|
language | ruby |
---|
title | example.playground |
---|
|
import fluigSDKFlows
let configuration = LoginFlowConfiguration(buttonBackground: .gradient(.orange, .cyan)) |
...