Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

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.

Âncora
integracao
integracao

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.

    Bloco de código
    languagexml
    titleAndroidManifest.xml
    collapsetrue
    <?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:screenOrientation="portrait"
                android:windowSoftInputMode="adjustPan" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.server.view.ServerRequestActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.password.view.PasswordRequestActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.forgot.view.ForgotPasswordActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.manual.view.ManualLoginActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait"
                android:windowSoftInputMode="adjustPan" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.account.view.AccountSelectActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait" />
            <activity
                android:name="sdk.fluig.com.bll.core.login.mfa.view.MfaRequestActivity"
                android:theme="@style/FluigLoginTheme.Light"
                android:screenOrientation="portrait" />
        </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.

      Bloco de código
      languagejava
      titleLaunchActivity.java
      collapsetrue
      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.

        Bloco de código
        languagejava
        titleApplication.java
        collapsetrue
        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.

Âncora
personalizacoes
personalizacoes

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.

Âncora
tema
tema

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

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

...

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.

Âncora
logo-empresa
logo-empresa

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.

Aviso
titleImportante

A imagem adicionada deve ter no máximo 122px (em mdpi) de altura e a largura deve obedecer o espaçamento dos aparelhos.

Âncora
conteudo-pager
conteudo-pager

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:

...

Nota

Para melhor usabilidade do usuário, recomenda-se até 4 (quatro) páginas para o pager do login.

Âncora
cores-principais-botoes
cores-principais-botoes

Cores dos principais botões

...