Entendendo o fluxo

Embora seja o padrão atual do setor para SPAs, o grupo de trabalho OAuth não recomenda mais o uso do fluxo implícito devido a várias preocupações com a segurança. Com base em suas recomendações, o site App ID está configurado para usar o fluxo do Código de Autorização com o PKCE.

1. Um usuário tenta efetuar login em seu aplicativo de página única.
2. O SDK do App ID cria um verificador de código para a solicitação de autorização, que é a versão de texto simples do desafio de código. Juntamente com a solicitação de autorização, o cliente envia o desafio de código e o método de desafio que é usado para codificar o desafio.
3. O fluxo de autenticação é iniciado pelo App ID em uma nova janela.
4. O usuário escolhe um provedor de identidade para se autenticar e conclui o processo de conexão.
5. O SDK do App ID no aplicativo recebe o código de concessão
6. Então, o SDK faz uma solicitação de XHR para o terminal do token do App ID juntamente com o código de concessão e o verificador de código para obter tokens de acesso e de identidade.

Você está usando a conexão única para o Cloud Directory? É possível usar o SDK do cliente App ID para obter automaticamente um novo par de tokens sem requerer que o usuário se conecte explicitamente. Para obter mais informações, consulte Login silencioso.

Antes de Iniciar

Antes de começar, certifique-se de que você tenha os pré-requisitos a seguir.

• Uma instância de um serviço do App ID.
• Seus URIs de redirecionamento configurados no painel de serviço do App ID.
• Um aplicativo de página única. Se você não tem um e deseja experimentar o fluxo, tente fazer o download do aplicativo de amostra na página de visão geral do painel do App ID.

Configurando o SDK do JavaScript

Para instalar o SDK em seu aplicativo, use as etapas a seguir como um guia.

1. Usando o prompt de comandos, mude para o diretório que contém o seu aplicativo.

2. Instale o serviço do App ID usando o NPM ou vinculando o CDN em seu arquivo HTML principal.

   • Para usar o NPM, execute o comando a seguir.

     npm install ibmcloud-appid-js
     

   • Para incluir o CDN, inclua o link a seguir em seu arquivo HTML principal.

     <script src="https://cdn.appid.cloud.ibm.com/appid-0.3.0.min.js"></script>
     

3. Inclua seu ID de cliente e terminal de descoberta em seu app para inicializar o SDK.

   const appID = new AppID();
   await appID.init({
      clientId: '<spaClientID>',
      discoveryEndpoint: '<wellKnownEndpoint>'
   });
   

4. Em seu código do aplicativo, após a configuração do seu botão de login, inclua uma chamada para signin. Uma janela pop-up é aberta onde um usuário é solicitado a inserir suas credenciais. Depois de uma autenticação bem-sucedida, a tela fecha e o usuário é autenticado.

   const tokens = await appID.signin();
   

Configurando o login silencioso

Quando a conexão única para o Cloud Directory estiver ativada, será possível obter automaticamente novos tokens para um usuário sem que ele tenha que se autenticar novamente usando o login silencioso. Para ativar o login silencioso, use as etapas a seguir como um guia.

Os tokens de atualização não são retornados no fluxo do SPA.

1. No painel do App ID, navegue para Cloud Directory > Conexão única.

2. Alterne Ativar conexão única para Ativado.

3. Clique em Salvar.

4. Inclua o código a seguir no aplicativo. Certifique-se de configurar seu aplicativo para mostrar o botão de login se o login silencioso falhar.

   const tokens = await appID.silentSignin();
   if (!tokens) {
      document.getElementById('login').addEventListener('click', async () => {
      const tokens = await appID.signin();
      });
   }