Usando o Widget de login

Com o IBM Cloud® App ID, é possível usar uma IU padrão, chamada de Widget de login, para permitir que os usuários do aplicativo escolham o provedor de identidade ao qual desejam se conectar. Se você estiver usando o Cloud Directory, o Login Widget também fornecerá interfaces de usuário adicionais para funcionalidades como inscrição, esquecimento de senha, autenticação multifator e muito mais.

Uma das melhores partes do Widget de login é que você pode iniciar usando o App ID antes de implementar qualquer uma de suas próprias IUs de autenticação, o que torna a experiência de integração do desenvolvedor muito mais fácil.

Por padrão, o Widget de login é ativado para usar o Facebook, o Google e o Cloud Directory. É possível mudar o comportamento a qualquer momento escolhendo quais provedores de identidade você deseja configurar como uma opção. Quando mais de um provedor de identidade é ativado, o Widget de login apresenta uma tela na qual o usuário pode fazer sua seleção de provedor de identidade. Mas, se você tiver um único provedor ativado, os usuários não verão a tela de seleção mencionada anteriormente. Eles são levados diretamente ao provedor de identidade para iniciar o processo de conexão.

Por exemplo, se você estiver usando o padrão, Facebook, Google e Cloud Directory, os usuários verão a tela. Se você ativar apenas o Facebook, os usuários serão levados diretamente para o Facebook para autenticação.

Quando você usa o Cloud Directory, o App ID é capaz de fornecer a funcionalidade estendida de gerenciamento de usuário. A funcionalidade estendida também se aplica às capacidades do Widget de Login. Os usuários armazenados no Cloud Directory podem aproveitar a funcionalidade, como inscrever-se ou reconfigurar sua senha, diretamente no Widget de login. Verifique a tabela a seguir para ver quais telas podem ser exibidas para cada tipo de provedor de identidade.

As telas do Login Widget que cada provedor de identidade pode exibir
Tela do widget de login	Provedor de identidade social	Provedor de identidade corporativa	Cloud Directory
Registrar
Inscrever
Esqueci a senha
Alterar senha
Detalhes da conta

O Widget de Login é dinâmico. É possível customizar a aparência ou a configuração do provedor de identidade e as mudanças são aplicadas imediatamente. Não é necessário atualizar seu código do aplicativo nem reimplementar seu app de nenhuma maneira.

Você precisa de mais customização do que o Widget de login fornece? É possível implementar sua própria IU totalmente customizada para conexão, inscrição, reconfiguração de senha do usuário e outros fluxos para criar uma experiência que seja exclusiva para seu app. Para iniciar, verifique marcando seu app.

Para customizar a tela:

Abra o painelde serviço App ID.
Selecione a seção Customização de login. É possível modificar a aparência do widget de login paraque se alinhe com a marca de sua empresa.
Faça upload do logotipo da sua empresa selecionando um arquivo PNG ou JPG em seu sistema local. O tamanho da imagem recomendado é 320 x 320 pixels. O tamanho máximo do arquivo é 100 Kb.
Selecione uma cor de cabeçalho para o widget no selecionador de cor ou insira o código hexadecimal para outra cor.
Inspecione a área de janela de visualização e clique em Salvar mudanças quando estiver satisfeito com as suas customizações. Uma mensagem de confirmação é exibida.
Em seu navegador, atualize sua página de login para verificar suas mudanças.

Você pode chamar telas pré-configuradas com o SDK do cliente Android.

Coloque o comando a seguir em seu código.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launch(this, new AuthorizationListener() {
      @Override
      public void onAuthorizationFailure (AuthorizationException exception) {
      //Exception occurred
      }

      @Override
      public void onAuthorizationCanceled () {
      //Authentication canceled by the user
      }

      @Override
      public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, refreshToken: RefreshToken) {
      //User authenticated
      }
   });

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.

Inclua o código a seguir em seu app. Quando um usuário se inscreve para o seu aplicativo de sua tela customizada, o fluxo de inscrição é iniciado. A chamada a seguir não apenas registra o usuário, como também pode enviar um e-mail deverificação para concluir o registro, dependendo das configurações do Cloud Directory.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchSignUp(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         //Sign up canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         if (accessToken != null && identityToken != null) {
            //User authenticated
         } else {
            //email verification is required
         }
   }
});

Defina as configurações do Cloud Directory no console. Permitir que os usuários gerenciem a sua conta por meio de seu app deve ser configurado como Ativado.
Na guia Reconfigurar senha do painel de serviço, certifique-se de que E-mail de senha esquecida esteja configurado como Ativado.

Inclua o código a seguir em seu app. Quando um usuário clica em "esqueci a senha" no aplicativo, o SDK chama a APIforgot_password para enviar um e-mail ao usuário que permite a ele reconfigurar sua senha.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchForgotPassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Forogt password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // Forgot password finished, in this case accessToken and identityToken will be null.
   }
});

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.
Na guia Senha mudada do painel de serviço, configure E-mail mudado por senha como

Chame o widget de login para iniciar o fluxo de detalhes de mudança.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangeDetails(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Changed details canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.

Coloque o código a seguir em seu app para iniciar o fluxo de mudança de senha.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangePassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Change password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Você pode chamar telas pré-configuradas com o SDK do cliente iOS Swift.

Coloque o comando a seguir em seu código.

import IBMCloudAppID
class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken, identityToken: IdentityToken, refreshToken: RefreshToken?) {
         //User authenticated
   }

   public func onAuthorizationCanceled() {
         //Authentication canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launch(delegate: delegate())

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.

Coloque o código a seguir em seu aplicativo. Quando um usuário tenta se inscrever para o seu aplicativo, o widget de login é chamado e exibe sua página de inscrição customizada.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      if accessToken == nil && identityToken == nil {
      //email verification is required
      return
      }
   //User authenticated
   }

   public func onAuthorizationCanceled() {
      //Sign up canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchSignUp(delegate: delegate())

Defina as configurações do Cloud Directory no console. Permitir que os usuários gerenciem a sua conta por meio de seu app deve ser configurado como Ativado.
Na guia Reconfigurar senha do painel de serviço, certifique-se de que E-mail de senha esquecida esteja configurado como Ativado.

Coloque o código a seguir em seu aplicativo. Quando um de seus usuários do aplicativo solicita que sua senha sejaatualizada, o widget de login é chamado e o processo é iniciado.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //forgot password finished, in this case accessToken and identityToken will be null.
   }

   public func onAuthorizationCanceled() {
      //forgot password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchForgotPassword(delegate: delegate())

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.
Na guia Senha mudada do painel de serviço, configure E-mail mudado por senha como

Chame o widget de login para iniciar o fluxo de detalhes de mudança.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //changed details canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangeDetails(delegate: delegate())

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.

Coloque o código a seguir em seu app para iniciar o fluxo de mudança de senha.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
         //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //change password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangePassword(delegate: delegate())

Você pode chamar telas pré-configuradas com o SDK do servidor Node.js.

Inclua uma rota de post para seu app que possa ser chamada com os parâmetros de nome do usuário e senha e efetue login usando a senha do proprietário do recurso.

app.post("/form/submit", bodyParser.urlencoded({extended: false}), passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
failureRedirect: ROP_LOGIN_PAGE_URL,
failureFlash : true // allow flash messages
}));

WebAppStrategy permite que os usuários se conectem aos seus apps da web com um nome de usuário e senha. Após um login bem-sucedido, o token de acesso de um usuário é armazenado na sessão HTTP e fica disponível durante a sessão. Após a sessão HTTP ser destruída ou expirada, o token é invalidado.

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.
Coloque o código a seguir em seu aplicativo. Quando um usuário tenta se inscrever para o seu aplicativo, o widget de login é chamado e exibe sua página de inscrição customizada.
```
app.get("/sign_up", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.SIGN_UP
}));
```

Defina as configurações do Cloud Directory no console. Permitir que os usuários gerenciem a sua conta por meio de seu app deve ser configurado como Ativado.
Na guia Reconfigurar senha do painel de serviço, certifique-se de que E-mail de senha esquecida esteja configurado como Ativado.
Coloque o código a seguir em seu aplicativo para passar a propriedade show para WebAppStrategy.FORGOT_PASSWORD. Quandoum usuário solicita que sua senha para seu aplicativo seja atualizada, o widget de login é chamado e o processo éiniciado.
```
app.get("/forgot_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.FORGOT_PASSWORD
}));
```

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.
Na guia Senha mudada do painel de serviço, configure E-mail mudado por senha como

Coloque o código a seguir em seu aplicativo para passar a propriedade show para WebAppStrategy.FORGOT_PASSWORD para ativar o formulário de detalhes de mudança.

app.get("/change_details", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_DETAILS
}));

Defina as configurações do Cloud Directory no console. Ambos Permitir que os usuários se conectem ao seu app e Permitir que os usuários gerenciem a sua conta por meio do seu app devem ser configurados como Ativado.
Na guia Senha mudada do painel de serviço, configure E-mail mudado por senha como

Coloque o código a seguir em seu aplicativo para passar a propriedade show para WebAppStrategy.FORGOT_PASSWORD para ativar o formulário de detalhes de mudança.

app.get("/change_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_PASSWORD
}));

Usando o Widget de login

Entendendo o widget de login

Qual é o comportamento padrão do Widget de login?

Quais telas podem ser exibidas para cada provedor?

Customizando um fluxo de login SSO

Customizando o widget de login

Exibindo o widget de login com o SDK do Android

Inscrever

Esqueci a senha

Mudar detalhes

Alterar senha

Exibindo o widget de login com o SDK do iOS Swift

Inscrever

Esqueci a senha

Mudar detalhes

Alterar senha

Exibindo o widget de login com o SDK do Node.js

Inscrever

Esqueci a senha

Mudar detalhes

Alterar senha