Aplicativo de página única: Entrar e sair

Saiba como adicionar início de sessão ao código da sua aplicação de página única.

Antes de obter tokens para acessar APIs em seu aplicativo, você precisa de um contexto de usuário autenticado. Pode iniciar sessão de utilizadores na sua aplicação de MSAL.js de duas formas:

• Janela pop-up, usando o loginPopup método
• Redirecionar, usando o loginRedirect método

Opcionalmente, você também pode passar os escopos das APIs para as quais você precisa que o usuário consinta no momento da entrada.

Se seu aplicativo já tiver acesso a um contexto de usuário autenticado ou token de ID, você poderá pular a etapa de login e adquirir tokens diretamente. Para obter detalhes, consulte SSO com dica de usuário.

Escolher entre uma experiência de início de sessão pop-up ou de redirecionamento

A escolha entre uma experiência pop-up ou de redirecionamento depende do fluxo do seu aplicativo:

• Se você não quiser que os usuários se afastem da página principal do aplicativo durante a autenticação, recomendamos o método pop-up. Como o redirecionamento de autenticação acontece em uma janela pop-up, o estado do aplicativo principal é preservado.

• Se os usuários tiverem restrições de navegador ou políticas em que as janelas pop-up estejam desativadas, você poderá usar o método de redirecionamento. Use o método de redirecionamento com o navegador Internet Explorer, porque há problemas conhecidos com janelas pop-up no Internet Explorer.

Iniciar sessão com uma janela pop-up

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

JavaScript (MSAL.js v1)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

const myMsal = new UserAgentApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    //login success
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

Angular (MSAL.js v2)

O wrapper MSAL Angular permite que você proteja rotas específicas em seu aplicativo adicionando MsalGuard à definição de rota. Esse guarda invocará o método para entrar quando essa rota for acessada.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Para uma experiência de janela pop-up, defina a interactionType configuração como InteractionType.Popup na configuração do Guard. Você também pode passar os escopos que exigem consentimento da seguinte maneira:

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

Angular (MSAL.js v1)

O wrapper MSAL Angular permite que você proteja rotas específicas em seu aplicativo adicionando MsalGuard à definição de rota. Esse guarda invocará o método para entrar quando essa rota for acessada.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";
const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Para uma experiência de janela pop-up, ative a popUp opção de configuração. Você também pode passar os escopos que exigem consentimento da seguinte maneira:

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
            }
        }, {
            popUp: true,
            consentScopes: ["User.ReadWrite"]
        })
    ]
})

React

O wrapper MSAL React permite proteger componentes específicos envolvendo-os no MsalAuthenticationTemplate componente. Esse componente invocará o login se um usuário ainda não estiver conectado ou renderizará componentes filho de outra forma.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Você também pode usar as @azure/msal-browser APIs diretamente para invocar um login emparelhado com os AuthenticatedTemplate componentes e/ou UnauthenticatedTemplate para renderizar conteúdo específico para usuários conectados ou desconectados, respectivamente. Esta é a abordagem recomendada se você precisar invocar o login como resultado da interação do usuário, como um clique no botão.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Entrar com redirecionamento

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

JavaScript (MSAL.js v1)

Os métodos de redirecionamento não retornam uma promessa por causa do afastamento do aplicativo principal. Para processar e acessar os tokens retornados, registre retornos de chamada de sucesso e erro antes de chamar os métodos de redirecionamento.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

const myMsal = new UserAgentApplication(config);

function authCallback(error, response) {
  //handle redirect response
}

myMsal.handleRedirectCallback(authCallback);

myMsal.loginRedirect(loginRequest);

Angular (MSAL.js v2)

O código aqui é o mesmo descrito anteriormente na seção sobre entrada com uma janela pop-up, exceto que o interactionType está definido para InteractionType.Redirect a Configuração do MsalGuard e o MsalRedirectComponent é inicializado para lidar com redirecionamentos.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Angular (MSAL.js v1)

O código aqui é o mesmo descrito anteriormente na seção sobre login com uma janela pop-up. O fluxo padrão é redirecionamento.

React

O wrapper MSAL React permite proteger componentes específicos envolvendo-os no MsalAuthenticationTemplate componente. Esse componente invocará o login se um usuário ainda não estiver conectado ou renderizará componentes filho de outra forma.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Você também pode usar as @azure/msal-browser APIs diretamente para invocar um login emparelhado com os AuthenticatedTemplate componentes e/ou UnauthenticatedTemplate para renderizar conteúdo específico para usuários conectados ou desconectados, respectivamente. Esta é a abordagem recomendada se você precisar invocar o login como resultado da interação do usuário, como um clique no botão.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Comportamento de saída em navegadores

Quanto mais aplicativos um usuário tiver entrado e quiser sair, maior a chance de ocorrerem problemas, dadas as maneiras limitadas de implementar essa funcionalidade nos navegadores. As práticas recomendadas de privacidade na Internet da Microsoft recomendam que, em um dispositivo compartilhado em que um usuário queira sair de um aplicativo, o usuário use o modo privado/anônimo de um navegador e feche todas as janelas do navegador antes de se afastar do dispositivo.

Em dispositivos que não são compartilhados, os usuários devem aproveitar uma tela de bloqueio do sistema operacional para que possam bloquear ou sair de toda a sessão do sistema operacional no dispositivo. A Microsoft usa sua página de saída para lembrar os usuários dessas práticas recomendadas para ajudar a melhorar sua privacidade e segurança.

Para usuários que não optam por seguir a abordagem segura, o aplicativo pode tentar se preparar para ambos os seguintes casos:

1. O usuário que iniciou a saída do aplicativo diretamente.
2. De outro aplicativo que compartilha o estado de entrada com o novo aplicativo, mas gerencia seus próprios tokens/cookies de sessão.

Para o primeiro caso, as seções a seguir descrevem opções sobre como sair do usuário de um aplicativo local usando um pop-up ou redirecionamento.

Para o segundo caso em que a saída é iniciada a partir de outro aplicativo, a Microsoft usa o Logout do Canal Frontal do OpenID Connect para saída federada. Existem algumas limitações para esta implementação quando o conteúdo de terceiros é bloqueado, como quando os navegadores bloqueiam cookies de terceiros por padrão.

Os seguintes métodos pop-up e de redirecionamento encerrarão a sessão do usuário no ponto de extremidade e para o aplicativo local, mas podem não limpar imediatamente a sessão para outros aplicativos federados, se a comunicação de canal frontal estiver bloqueada. Para uma saída federada garantida, independentemente do comportamento do navegador, recomendamos as práticas recomendadas aos usuários de usar navegação privada ou telas de bloqueio.

Sair com uma janela pop-up

Este modo é suportado, mas tem as mesmas limitações de início de sessão com uma janela pop-up que as restrições ou políticas dos navegadores podem desativar as janelas pop-up. MSAL.js v2 e superior fornece um logoutPopup método que limpa o cache no armazenamento do navegador e abre uma janela pop-up para a página de saída do Microsoft Entra. Após a saída, o Microsoft Entra ID redireciona o pop-up de volta para o seu aplicativo e MSAL.js fechará o pop-up.

Você pode configurar o URI para o qual o ID do Microsoft Entra deve redirecionar após a saída definindo postLogoutRedirectUri. Esse URI deve ser registrado como um URI de redirecionamento no registro do aplicativo.

Você também pode configurar logoutPopup para redirecionar a janela principal para uma página diferente, como a home page ou a página de login, depois que o logout for concluído, passando mainWindowRedirectUri como parte da solicitação.

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

JavaScript (MSAL.js v1)

Não há suporte para sair com uma janela pop-up no MSAL.js v1

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

Angular (MSAL.js v1)

Não há suporte para sair com uma janela pop-up no MSAL Angular v1

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton Component returns a button that invokes a popup logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Sair com um redirecionamento

MSAL.js fornece um método na v1 e introduziu logoutRedirect o logout método na v2 que limpa o cache no armazenamento do navegador e redireciona a janela para a página de saída do Microsoft Entra. Após a saída, por padrão, o ID do Microsoft Entra redireciona de volta para a página que invocou o logout.

Como o usuário não verá o lembrete da Microsoft sobre as práticas recomendadas de privacidade na Internet sobre o uso de um navegador privado e tela de bloqueio, o aplicativo SPA também pode querer descrever as práticas recomendadas e lembrar os usuários de fechar todas as janelas do navegador.

Você pode configurar o URI para o qual ele deve redirecionar após a saída definindo postLogoutRedirectUri. Esse URI deve ser registrado como um URI de redirecionamento no registro do aplicativo.

JavaScript (MSAL.js v2)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

JavaScript (MSAL.js v1)

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new UserAgentApplication(config);

myMsal.logout();

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

Angular (MSAL.js v1)

//In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: "your_app_logout_redirect_uri"
            }
        })
    ]
})
// In app.component.ts
this.authService.logout();

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Próximos passos

Passe para o próximo artigo neste cenário, Adquirindo um token para o aplicativo.