...
Í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
(veja aqui como.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 que 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)); } |
} }; } } |
...
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 quando para nas telas com o com fundo claro e, portanto, utiliza textos escuros.Dark
deve ser usado quando para nas telas com o 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_solidColor
.
Adicione no arquivo values/colors.xml dois atributos com os nomes login_background_gradient_leftColor
e login_background_gradient_rightColor
.
...
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 é um 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
....