Com o logon único (SSO), os chatbots no seu site podem conectar os clientes se eles já estiverem acessado a página ou o aplicativo em que o bot está implantado.
Na versão preliminar do Power Virtual Agents, o SSO é compatível apenas com o canal de site personalizado. Ele não é compatível com os seguintes canais:
- Serviço de Bot do Azure
- Site de demonstração
- Facebook
- Microsoft Teams
- Aplicativo móvel
ou quando um bot estiver:
- Publicado no Teams, um site do SharePoint ou um portal do Power Apps
- Integrado ao Dynamics 365 Customer Service
Criar registros de aplicativo para seu site personalizado
Para habilitar o SSO, você precisará criar dois registros de aplicativo separados:
- Um registro de aplicativo de autenticação que habilita a autenticação do usuário do Azure Active Directory (Azure AD) no seu bot
- Um registro de aplicativo de tela, que habilita o SSO para sua página da Web personalizada
Não recomendamos reutilizar o mesmo registro de aplicativo para seu bot e seu site personalizado, por motivos de segurança.
- Siga as instruções em Configurar a autenticação do usuário com o Azure AD para criar um registro de aplicativo de autenticação.
- Siga as mesmas instruções novamente para criar um segundo registro de aplicativo, que servirá como seu registro de aplicativo de tela.
- Retorne a este artigo.
Após criar seu registro de aplicativo de tela, acesse Autenticação e selecione Adicionar uma plataforma.
Em Configurações da plataforma, selecione Adicionar uma plataforma e Web.
Em Redirecionar URIs, insira a URL da sua página da Web, por exemplo, http://contoso.com/index.html.
Na seção Concessão implícita e fluxos híbridos, ative as opções Tokens de acesso (usados para fluxos implícitos) e Tokens de ID (usados para fluxos implícitos e híbridos).
Selecione Configurar.
Localize o URL do ponto de extremidade do token do bot
No, Power Virtual Agents, acesse as Configurações e selecione Canais.
Selecione Aplicativo móvel.
Em Ponto de extremidade do token, selecione Copiar.
Configure o SSO em sua página da Web
Use o código fornecido no Repositório do GitHub do Power Virtual Agents para criar uma página da Web para o URL de redirecionamento. Copie o código do repositório do GitHub e modifique-o usando as instruções abaixo.
Acesse a página Visão geral no portal do Azure e copie o ID do aplicativo (cliente) e o ID do diretório (locatário) a partir do registro do seu aplicativo de tela.
Para configurar o Microsoft Authentication Library (MSAL):
- Atribua
clientId para a sua ID do aplicativo (cliente).
- Atribua
authority para https://login.microsoftonline.com/ e adicione a sua ID do diretório (locatário) até o fim.
Por exemplo:
var clientApplication;
(function (){
var msalConfig = {
auth: {
clientId: '692e92c7-xxxx-4060-76d3-b381798f4d9c',
authority: 'https://login.microsoftonline.com/7ef988bf-xxxx-51af-01ab-2d7fd011db47'
},
Defina a variável theURL para o URL do ponto de extremidade do token que você copiou anteriormente. Por exemplo:
(async function main() {
var theURL = "https://1c0.0.environment.api.powerplatform.com/powervirtualagents/bots/5a099fd/directline/token?api-version=2022-03-01-preview"
Edite o valor de userId para incluir um prefixo personalizado. Por exemplo:
var userId = clientApplication.account?.accountIdentifier != null ?
("My-custom-prefix" + clientApplication.account.accountIdentifier).substr(0, 64)
: (Math.random().toString() + Date.now().toString()).substr(0,64);
Salve suas alterações.
Teste seu bot usando a página da Web
Abra sua página da Web em seu navegador.
Selecione Logon.
Observação
Se o seu navegador bloquear pop-ups ou se você estiver usando uma janela de navegação anônima ou privada, você precisará fazer login. Caso contrário, o login será concluído usando um código de validação.
Uma nova guia do navegador é aberta.
Alterne para a nova guia e copie o código de validação.
Volte para a guia com seu bot e cole o código de validação na conversa do bot.
Por exemplo, o bot está hospedado na intranet corporativa ou em um aplicativo ao qual o usuário já está conectado.
Há quatro etapas principais para configurar o SSO para o Power Virtual Agents:
Criar um registro de aplicativo no Azure AD para sua tela personalizada.
Definir um escopo personalizado para seu bot.
Configurar autenticação no Power Virtual Agents para habilitar SSO.
Configurar seu código HTML de tela personalizada para habilitar SSO.
Importante
Atualmente, o SSO não é compatível quando um bot foi:
Canais compatíveis
A tabela a seguir detalha os canais compatíveis com o SSO no momento. Você pode sugerir suporte para tipos de canais adicionais no fórum de ideias do Power Virtual Agents.
1 Se também tiver o canal do Teams habilitado, você precisará seguir as instruções de configuração na documentação Configurar o SSO para o canal do Teams. A falha ao definir as configurações de SSO do Teams conforme instruído nesta página fará com que seus usuários sempre falhem na autenticação ao usar o canal do Teams.
2 Apenas o canal de chat ao vivo é compatível. Para obter mais informações, consulte Configurar transferência para o Dynamics 365 Customer Service
Visão geral técnica
A ilustração a seguir mostra como um usuário é conectado sem ver um prompt de logon (SSO) no Power Virtual Agents:
O usuário do bot digita uma frase que dispara um tópico de credenciais. O tópico de credenciais foi criado para conectar o usuário e usar o token autenticado (variável AuthToken) do usuário.
O Power Virtual Agents envia um prompt de logon para permitir que o usuário entre com seu provedor de identidade configurado.
A tela personalizada do bot intercepta o prompt de entrada e solicita um token OBO (em nome de) do Azure AD. A tela envia o token para o bot.
Ao receber o token OBO, o bot troca o token OBO por um "token de acesso" e preenche a variável AuthToken usando o valor do token de acesso. A variável IsLoggedIn também é definida nesse momento.
Criar um registro de aplicativo no Azure AD para sua tela personalizada
Para habilitar o SSO, você precisará de dois registros de aplicativo separados:
Importante
Você não pode reutilizar o mesmo registro de aplicativo para autenticação de usuário do bot e sua tela personalizada.
Criar um registro de aplicativo para a tela do bot
Entre no Portal do Azure.
Acesse Registros de aplicativo selecionando o ícone ou pesquisando na barra de pesquisa superior.
Selecione Novo registro.
Insira um nome para o registro. Pode ser útil usar o nome do bot cuja tela você está registrando, e incluir "tela" para ajudar a diferenciá-lo do registro do aplicativo para autenticação.
Por exemplo, se o nome do seu bot for "Ajuda de vendas do Cabral", você poderá nomear o registro do aplicativo como "TelaAjudaCabral", ou algo semelhante.
Selecione o tipo de conta em Tipos de conta com suporte. Recomendamos que você selecione Contas em qualquer diretório organizacional (Qualquer diretório do Azure AD - Multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox).
Deixe a seção URI de Redirecionamento em branco por enquanto, pois você inserirá essas informações nas próximas etapas. Selecione Registrar.
Após a conclusão do registro, ele será aberto na página Visão geral. Acesse Manifesto. Confirme se accessTokenAcceptedVersion está definido como 2. Se não estiver, altere para 2 e selecione Salvar.
Adicionar a URL de redirecionamento
Com o registro aberto, acesse Autenticação e selecione Adicionar uma plataforma.
Na folha configurar plataformas, selecione Web.
Em URIs de Redirecionamento, adicione a URL completa à página em que sua tela de conversa está hospedada. Na seção Concessão implícita, marque as caixas de seleção Tokens de Identificação e Tokens de Acesso.
Selecione Configurar para confirmar as alterações.
Acesse Permissões da API. Selecione Conceder consentimento de administração para <seu nome de locatário> e, em seguida, Sim.
Importante
Para evitar que os usuários tenham que dar consentimento em cada aplicativo, um Administrador global, um Administrador de aplicativos ou um Administrador de aplicativos de nuvem deve conceder consentimento para todo o locatário aos registros do seu aplicativo.
Definir um escopo personalizado para seu bot
Defina um escopo personalizado expondo uma API para o registro do aplicativo de tela dentro do registro do aplicativo de autenticação. Escopos permitem determinar funções de usuário e administrador, além de direitos de acesso.
Essa etapa cria uma relação de confiança entre o registro do aplicativo de autenticação a ser autenticado e o registro do aplicativo para a tela personalizada.
Abra o registro do aplicativo que você criou quando configurou a autenticação.
Acesse Permissões da API e verifique se as permissões corretas foram adicionadas ao seu bot. Selecione Conceder consentimento de administração para <seu nome de locatário> e, em seguida, Sim.
Importante
Para evitar que os usuários tenham que dar consentimento em cada aplicativo, um Administrador global, um Administrador de aplicativos ou um Administrador de aplicativos de nuvem deve conceder consentimento para todo o locatário aos registros do seu aplicativo.
Acesse Expor uma API e selecione Adicionar um escopo.
Insira um nome para o escopo, junto com as informações de exibição que devem ser mostradas aos usuários quando eles acessam a tela de SSO. Selecione Adicionar escopo.
Selecione Adicionar um aplicativo cliente.
Insira o ID do aplicativo (cliente) da página Visão geral para o registro do aplicativo de tela no campo ID do cliente. Marque a caixa de seleção do escopo listado que você criou.
Selecione Adicionar aplicativo.
A URL de troca de tokens na página de configuração de autenticação do Power Virtual Agents é usada para trocar o token OBO pelo token de acesso solicitado por meio da estrutura do bot.
O Power Virtual Agents chama o Azure AD para fazer a troca.
Entre no Power Virtual Agents.
Confirme se você selecionou o bot para o qual deseja habilitar a autenticação, selecionando o ícone do bot no menu superior e escolhendo o bot correto.
No menu de navegação, em Configurações, selecione Segurança. Em seguida, selecione o cartão Autenticação.
Insira o URI de escopo completo da folha Expor uma API para o registro do aplicativo de autenticação do bot no campo URL de troca de token. O URI deve estar no formato api://1234-4567/scope.name.
Selecione Salvar e publique o conteúdo do bot.
Atualize a página de tela personalizada em que o bot está localizado para interceptar a solicitação do cartão de logon e trocar o token OBO.
Configure a Microsoft Authentication Library (MSAL) adicionando o código a seguir em um rótulo de <script> na sua seção <head>.
Atualize o clientId com o ID do aplicativo (cliente) para o registro do aplicativo de tela. Substitua <Directory ID> pelo ID do diretório (locatário). Você obtém esses IDs na página Visão geral do registro do aplicativo de tela.
<head>
<script>
var clientApplication;
(function () {
var msalConfig = {
auth: {
clientId: '<Client ID [CanvasClientId]>',
authority: 'https://login.microsoftonline.com/<Directory ID>'
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: false
}
};
if (!clientApplication) {
clientApplication = new Msal.UserAgentApplication(msalConfig);
}
} ());
</script>
</head>
Insira o seguinte <script> na seção <body>. Esse script chama um método para recuperar o resourceUrl e trocar seu token atual por um token solicitado pelo prompt do OAuth.
<script>
function getOAuthCardResourceUri(activity) {
if (activity &&
activity.attachments &&
activity.attachments[0] &&
activity.attachments[0].contentType === 'application/vnd.microsoft.card.oauth' &&
activity.attachments[0].content.tokenExchangeResource) {
// asking for token exchange with AAD
return activity.attachments[0].content.tokenExchangeResource.uri;
}
}
function exchangeTokenAsync(resourceUri) {
let user = clientApplication.getAccount();
if (user) {
let requestObj = {
scopes: [resourceUri]
};
return clientApplication.acquireTokenSilent(requestObj)
.then(function (tokenResponse) {
return tokenResponse.accessToken;
})
.catch(function (error) {
console.log(error);
});
}
else {
return Promise.resolve(null);
}
}
</script>
Insira o seguinte <script> na seção <body>. No do método main, esse código adiciona uma condicional ao seu store, com o identificador exclusivo do seu bot. Ele também gera um ID exclusivo como sia variável de userId.
Atualize <BOT ID> com o ID do seu bot. Você pode ver o ID do seu bot acessando a guia Canais do bot que você está usando, e selecionando Aplicativo móvel no portal do Power Virtual Agents.
<script>
(async function main() {
// Add your BOT ID below
var BOT_ID = "<BOT ID>";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const {
token
} = await fetchJSON(theURL);
const directLine = window.WebChat.createDirectLine({
token
});
var userID = clientApplication.account?.accountIdentifier != null ?
("Your-customized-prefix-max-20-characters" + clientApplication.account.accountIdentifier).substr(0, 64) :
(Math.random().toString() + Date.now().toString()).substr(0, 64); // Make sure this will not exceed 64 characters
const store = WebChat.createStore({}, ({
dispatch
}) => next => action => {
const {
type
} = action;
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'startConversation',
type: 'event',
value: {
text: "hello"
}
}
});
return next(action);
}
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const activity = action.payload.activity;
let resourceUri;
if (activity.from && activity.from.role === 'bot' &&
(resourceUri = getOAuthCardResourceUri(activity))) {
exchangeTokenAsync(resourceUri).then(function(token) {
if (token) {
directLine.postActivity({
type: 'invoke',
name: 'signin/tokenExchange',
value: {
id: activity.attachments[0].content.tokenExchangeResource.id,
connectionName: activity.attachments[0].content.connectionName,
token,
},
"from": {
id: userID,
name: clientApplication.account.name,
role: "user"
}
}).subscribe(
id => {
if (id === 'retry') {
// bot was not able to handle the invoke, so display the oauthCard
return next(action);
}
// else: tokenexchange successful and we do not display the oauthCard
},
error => {
// an error occurred to display the oauthCard
return next(action);
}
);
return;
} else
return next(action);
});
} else
return next(action);
} else
return next(action);
});
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
hideUploadButton: true
};
window.WebChat.renderWebChat({
directLine: directLine,
store,
userID: userID,
styleOptions
},
document.getElementById('webchat')
);
})().catch(err => console.error("An error occurred: " + err));
</script>
Exemplo de código completo
Para referência, você pode encontrar o exemplo de código completo, com os scripts condicionais da loja e MSAL já inclusos no nosso repositório GitHub.