Aplicativo de página única: entrada e saída

Antes de obter tokens para acessar APIs em seu aplicativo, você precisa de um contexto de usuário autenticado. Para autenticar um usuário, você pode usar uma janela pop-up e/ou um método de login de redirecionamento .

Se seu aplicativo tiver acesso a um contexto de usuário autenticado ou token de ID, você poderá ignorar a etapa de entrada e adquirir tokens diretamente. Para obter detalhes, consulte Logon único (SSO) com dica de usuário.

Escolher entre uma experiência pop-up ou de redirecionamento

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

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

• Use um redirecionamento se os usuários tiverem restrições de navegador ou políticas em que as janelas pop-up estejam desativadas. Por exemplo, existem 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);
  });

Angular (MSAL.js v2)

Para invocar uma experiência de entrada para uma rota específica, importe @angular/router e adicione MsalGuard à definição de rota.

// 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 habilitar uma experiência de janela pop-up, defina a interactionType configuração como InteractionType.Popup no MsalGuardConfiguration. Você também pode passar os escopos que exigem consentimento.

// 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: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

React

Para invocar uma experiência de início de sessão quando um utilizador ainda não tiver sessão iniciada, utilize a MsalAuthenticationTemplate função de @azure/msal-react. O wrapper MSAL React protege componentes específicos envolvendo-os no MsalAuthenticationTemplate componente.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Para invocar uma experiência de início de sessão específica com base na interação do utilizador (por exemplo, seleção de botão), utilize a função e/ou UnauthenticatedTemplate de AuthenticatedTemplate @azure/msal-react.

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

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

// SignInButton Component returns a button that invokes a popup sign in 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>
    </>
  );
}

Iniciar sessão com um 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);

Angular (MSAL.js v2)

Para habilitar uma experiência de redirecionamento, defina a interactionType configuração como InteractionType.Redirect no e, em MsalGuardConfigurationseguida, inicialize MsalRedirectComponent para manipular 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 {}

React

Para invocar uma experiência de início de sessão quando um utilizador não tem sessão iniciada, utilize a MsalAuthenticationTemplate função de @azure/msal-react.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Para invocar uma experiência de início de sessão específica com base na interação do utilizador (por exemplo, seleção de botão), utilize a função e/ou UnauthenticatedTemplate de AuthenticatedTemplate @azure/msal-react.

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

Para garantir a saída segura de um ou mais aplicativos, os seguintes métodos são recomendados:

• Em dispositivos partilhados, os utilizadores devem utilizar o modo privado/anónimo do navegador e fechar todas as janelas do navegador antes de se afastarem do dispositivo.

• Em dispositivos que não são compartilhados, os usuários devem usar uma tela de bloqueio do sistema operacional para 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 de privacidade e segurança.

Para obter mais informações, consulte as práticas recomendadas de privacidade na Internet da Microsoft.

Se um usuário optar por não sair usando as recomendações, a seguir estão outros métodos para habilitar a funcionalidade de logout:

• Logout do canal frontal do OpenID Connect da Microsoft para saída federada. Pode utilizar esta opção quando uma aplicação partilha um estado de início de sessão com uma nova aplicação, mas gere os seus próprios tokens/cookies de sessão. Existem algumas limitações a esta implementação quando o conteúdo é bloqueado, por exemplo, quando os navegadores bloqueiam cookies de terceiros.

• Janela pop-up e/ou um Redirecionamento para sair do aplicativo local. Os métodos pop-up e de redirecionamento encerram a sessão do usuário no ponto de extremidade e para o aplicativo local. Mas, esses métodos podem não limpar imediatamente a sessão para outros aplicativos federados se a comunicação de canal frontal estiver bloqueada.

Sair com uma janela 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 sair, o redirecionamento assume como padrão a página inicial de entrada e o pop-up é fechado.

Para a experiência após a saída, você pode definir o postLogoutRedirectUri para redirecionar o usuário para um URI específico. 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, 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);

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: "/"
    });
}

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 pop-up sign out 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 logout método na v1 e um logoutRedirect método na v2 que limpa o cache no armazenamento do navegador e redireciona para a página de saída do Microsoft Entra. Após sair, o redirecionamento assume como padrão a página inicial de entrada.

Para a experiência após a saída, você pode definir o postLogoutRedirectUri para redirecionar o usuário para um URI específico. Esse URI deve ser registrado como um URI de redirecionamento no registro do aplicativo.

Como o lembrete da Microsoft das práticas recomendadas de privacidade na Internet sobre o uso de um navegador privado e da tela de bloqueio não é mostrado nesse método, convém descrever as práticas recomendadas e lembrar os usuários de fechar todas as janelas do navegador.

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);

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();
}

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.