Í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 módulo bllCore do SDK foi adicionado como dependência no seu build.gradle.
2. Crie um classe Application que seja subclasse de FluigSdkApplication.
   1. Implemente o método onCreate() e chame super.onCreate().

3. Adicione no AndroidManifest do seu aplicativo, as seguintes activities.

   AndroidManifest.xml Expandir origem

   <?xml version="1.0" encoding="utf-8"?>
   <manifest
   	xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.myapp.package">
   
       <application
           android:name=".application.Application"
   	    ... >
   		...
           <activity
   		    android:name="sdk.fluig.com.bll.core.login.email.view.EmailRequestActivity"
   		    android:theme="@style/FluigLoginTheme.Light"
       		android:windowSoftInputMode="stateHidden|adjustResize" />
   		<activity
   		    android:name="sdk.fluig.com.bll.core.login.server.view.ServerRequestActivity"
   	    	android:theme="@style/FluigLoginTheme.Light"
   	    	android:windowSoftInputMode="stateHidden|adjustResize"/>
   		<activity
   		    android:name="sdk.fluig.com.bll.core.login.password.view.PasswordRequestActivity"
   		    android:theme="@style/FluigLoginTheme.Light"
   		    android:windowSoftInputMode="stateHidden|adjustResize"/>
   		<activity
   		    android:name="sdk.fluig.com.bll.core.login.forgot.view.ForgotPasswordActivity"
   		    android:theme="@style/FluigLoginTheme.Light"/>
   		<activity
   	    	android:name="sdk.fluig.com.bll.core.login.manual.view.ManualLoginActivity"
     		  	android:theme="@style/FluigLoginTheme.Light"
    		    android:windowSoftInputMode="stateHidden|adjustResize" />
   		<activity
   		    android:name="sdk.fluig.com.bll.core.login.account.view.AccountSelectActivity"
   		    android:theme="@style/FluigLoginTheme.Light"/>
   		<activity
   		    android:name="sdk.fluig.com.bll.core.login.mfa.view.MfaRequestActivity"
   		    android:theme="@style/FluigLoginTheme.Light"
   		    android:windowSoftInputMode="stateHidden|adjustResize" />
   
       </application>
   </manifest>

4. Altere o fluxo do aplicativo para o login, seguindo os passos abaixo.
   
   1. Crie uma Activity que servirá como launch screen. Launch screens são a primeira tela que o usuário visualiza ao abrir um aplicativo.

   2. No código desta Activity, chame o método start da classe LoginFlow. Para instanciar LoginFlow, passe um Context como primeiro parâmetro. O segundo parâmetro é opcional e pode ser ou a classe da Activity ou um Intent contendo a Activity para o qual deseja que o login redirecione após sua conclusão. Ao terminar o fluxo, caso o segundo parâmetro não tenha sido fornecido, será enviado um Broadcast informando que o usuário conseguiu se logar com sucesso.

      LaunchActivity.java Expandir origem

      import sdk.fluig.com.bll.core.login.LoginFlow;
      
      public class LaunchActivity extends Activity {
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              ...
      
              //Caso prefira esperar pelo broadcast do fluxo
              new LoginFlow(LaunchActivity.this).start();
      
      		//Caso queira redirecionar automaticamente para a MainActivity
              new LoginFlow(LaunchActivity.this, MainActivity.class).start();
              
              //Caso possua uma Intent para a Activity desejada
              Intent myIntent = ...;
              new LoginFlow(LaunchActivity.this, myIntent).start();
              
              finish();
          }
      }

      
      

      1. No caso de não informar a tela desejada como segundo parâmetro no LoginFlow, é recomendado que implementa na sua classe Application o receptor do Broadcast enviado pelo fluxo de login.

         Application.java Expandir origem

         public class Application extends FluigSdkApplication {
          
             @Override
             public void onCreate() {
                 ...
         
                 registerReceiver(getLoginReceiver(), new IntentFilter(LoginFlow.ACTION_DID_LOGIN));
             }
         
             private BroadcastReceiver getLoginReceiver() {
                 return new BroadcastReceiver() {
                     @Override
                     public void onReceive(Context context, Intent intent) {
                         String action = intent.getAction();
                         if (action != null && action.equals(LoginFlow.ACTION_DID_LOGIN)) {
                             //após o login o aplicativo será redirecionado para a MainActivity
                             startActivity(new Intent(Application.this, MainActivity.class));
                         }
                     }
                 };
             }
         }

         
         

5. Crie e altere o arquivo de configuração do ViewPager presente em algumas telas do fluxo de login, seguindo as instruções descritas aqui.

6. Por padrão, a rotação de tela pode ser feita de acordo com o tipo de dispositivo em uso, conformo exibido na tabela abaixo:

   
   

   	Portrait	Landscape
   Tablets	Sim	Sim
   Smartphones	Sim	Não

   
   Caso seja necessário, a alteração das configurações padrão podem ser feitas no arquivo bools.xml, presente na pasta values para smartphones e values-sw600dp para tablets:

   Arquivo bools.xml

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <bool name="portrait_only">false</bool>
   </resources>

   Para exibir a tela de login somente em modo retrato deve ser atribuído o valor true para o atributo portrait_only. Ao configurar portrait_only como false a tela de login será exibida em modo retrato e paisagem, de acordo com a orientação do dispositivo.

Personalizações

Existem elementos no layout do login que podem ser personalizados. Esta seção expõe que elementos são esses e como alterá-los para aderir às suas preferências.

• Tema
• Fundo das telas
• Logo da empresa
• Conteúdo do pager
• Cores dos principais botões

Tema

Na seção Integração, é possível notar que todas as activities do login compartilham do mesmo tema FluigLoginTheme. Este tema possui duas variações: Light e Dark. A diferença entre essas variações é a cor usada nos textos.

• Light deve ser usado nas telas com fundo claro e, portanto, utiliza textos escuros.
• Dark deve ser usado nas telas com fundo escuro e, portanto, utiliza textos claros. 

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

Adicione um arquivo de vídeo, no diretório raw do seu aplicativo, com o nome login_background_video.

Imagem

Adicione uma imagem, no diretório drawable do seu aplicativo, com o nome login_background_image. 

Cor de fundo

Adicione no arquivo values/colors.xml um atributo com o nome login_backgroundColor e login_backgroundColor_end. Caso o atributo login_backgroundColor_end seja definido, será produzido um gradiente horizontal de duas cores.

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, adicione uma imagem, no diretório drawable do seu aplicativo, com o nome login_logo.

Conteúdo do pager

Em algumas telas do fluxo, existe um FluigSdkPager cujo conteúdo pode ser alterado. Para alterar o conteúdo desse elemento, siga os seguintes passos:

1. Crie um arquivo JSON no diretório raw chamado login_pager_content.

2. Altere o arquivo criado seguindo o modelo abaixo, onde title será o título da página e content será o texto no corpo da página. Note que a raiz do arquivo é um objeto.

   login_pager_content.json Expandir origem

   {
     "title": "Título da tela",
     [
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor laoreet velit ut condimentum. Fusce posuere mi id justo efficitur.",
       "Lorem ipsum dolor sit.",
       ...
     ]
   }

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.

Siga os passos abaixo para alterar os botões:

1. Abra o arquivo colors.xml que se encontra no diretório values.
2. Adicione novos atributos conforme o que deseja alterar nos botões.
   1. Caso deseje alterar a cor principal do botão, adicione um atributo com nome login_buttons_backgroundColor.
   2. Caso deseje adicionar um gradiente ao botão e alterar a cor direita deste gradiente, adicione um atributo com nome login_buttons_backgroundColor_end.