...
Índice |
---|
...
|
...
|
...
|
...
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:
FluigSdkApplication
.onCreate()
e chame super.onCreate()
.Adicione no AndroidManifest do seu aplicativo, as seguintes activities.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<?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.package.Application" ... > ... <activity android:name="sdk.fluig.com.bll.core.login.email.view.EmailRequestActivity" android:theme="@style/FluigLoginTheme.Light" /> android:windowSoftInputMode="stateHidden|adjustResize" /> <activity <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" /> <activity android:windowSoftInputMode="stateHidden|adjustResize"/> <activity android:name="sdk.fluig.com.bll.core.login.serverforgot.view.ServerRequestActivityForgotPasswordActivity" android:theme="@style/FluigLoginTheme.Light" /> <activity android:name="sdk.fluig.com.bll.core.login.manual.view.ManualLoginActivity" android:theme="@style/FluigLoginTheme.Light" /> <activity 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> |
Activity
que servirá como launch screen. Launch screens são a primeira tela que o usuário visualiza ao abrir um aplicativo.No código desta Activity
, crie uma Intent
para EmailRequestActivity
que é a primeira tela do fluxo.Na Intent
criada, adicione outra Intent
para a Activity
que deseja , 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 a conclusão do fluxo. Esta outra Intent
deve estar na chave BaseLoginActivity.ACTIVITY_INTENT_KEY
.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 | ||||||
---|---|---|---|---|---|---|
| ||||||
import sdk.fluig.com.bll.core.login.LoginFlow; public class SplashActivityLaunchActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { ... //Intent para a primeira tela após o login //Caso prefira esperar pelo broadcast do fluxo new LoginFlow(LaunchActivity.this).start(); //Caso queira redirecionar automaticamente para a MainActivity Intent desiredIntent = new Intent(getBaseContext()LoginFlow(LaunchActivity.this, MainActivity.class).start(); // //Caso possua uma Intent para a Activity desejada Intent myIntent = ...; new LoginFlow(LaunchActivity.this, myIntent).start(); finish(); } } |
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 | ||||||
---|---|---|---|---|---|---|
| ||||||
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)); } |
} }; } } |
Nota | ||
---|---|---|
| ||
Caso não seja passado para as telas do login uma |
...
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:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<?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.
...
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.
...
...
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. ...
...
...
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 uma imagem, no diretório drawable do seu aplicativo, com o nome login_background_image
.
...
...
Adicione no arquivo values/colors.xml um atributo com o nome login_background_solid
.
Adicione no arquivo values/colors.xml dois atributos com os nomes login_background_gradient_left
e login_background_gradient_right
.
...
backgroundColor
e login_backgroundColor_end
. Caso o atributo login_backgroundColor_end
seja definido, será produzido um gradiente horizontal de duas cores.
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 |
---|
...
|
...
| |
A imagem adicionada deve ter no máximo 122px (em mdpi) de altura e a largura deve obedecer o espaçamento dos aparelhos. |
...
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:
login_pager_content
.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 é uma listaum objeto.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
[ { "title": "Título da primeira páginatela", [ "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor laoreet velit ut condimentum. Fusce posuere mi id justo efficitur.", } "Lorem ipsum dolor sit.", { ... ] } ] |
Nota |
---|
Para melhor usabilidade do usuário, recomenda-se até 4 (quatro) páginas para o pager do login. |
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. |
Siga os passos abaixo para alterar os botões:
colors.xml
que se encontra no diretório values.login_buttons_backgroundColor
.login_buttons_backgroundColor_end
.