Neste tópico vou mostrar como incorporar uma página do Latromi que exige autenticação dentro de outro site, usando um elemento <iframe>
.
Atenticação
Para fazer a autenticação vamos usar uma API que fica hospeda junto ao site, no caminho “/Services/Authentication.svc”.
A mérito de exemplo, vamos considerar que o endereço do site em que estamos trabalhando seja https://latromi.minha-empresa.com.br/web. Esta será a URL base.
Teste Rápido
Você pode testar a autenticação no seu site usando as páginas a seguir.
OBS.: Use o protocolo correspondente ao utilizado no seu site.
Consumindo a API com JavaScript
Abaixo um exemplo de autenticação usando JavaScript puro:
var baseURL = 'https://latromi.minha-empresa.com.br/web';
var authURL = baseURL + '/Services/Authentication.svc/rest/authenticate2';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
var authResult = JSON.parse(this.responseText);
if (authResult.status !== 100) {
alert('Erro: ' + authResult.message);
}
else {
alert('Autenticado: Token ' + authResult.authToken);
}
}
else {
alert('Erro: ' + (this.responseText || 'Abra o console do navegador para obter mais informações.'));
}
}
};
xhttp.open('POST', authURL, true);
xhttp.setRequestHeader("Content-Type", 'application/json; charset=utf-8');
xhttp.send(JSON.stringify({
username: 'nome_de_usuario',
password: 'senha'
}));
Formato de Retorno
Segue abaixo o formato do JSON retornado:
{
"status": 100,
"message": "Usuário autenticado.",
"details": null,
"authToken": "cePWMY8kb0OpdQT1.......=",
"authType": 1,
"userProfile": {
"id": 1,
"referenceCode": null,
"username": "admin",
"fullName": "Administrador",
"emailAddress": "",
"isActive": true,
"isAdmin": true,
"isIntegratedUser": false,
"keepAliveEnabled": false,
"documentType": 0,
"documentNumber": "",
"policies": null,
"extendedProperties": [
{
"Key": "CampoLivre1",
"Value": null
},
{
"Key": "CampoLivre2",
"Value": null
},
{
"Key": "CampoLivre3",
"Value": null
},
{
"Key": "CampoLivre4",
"Value": null
},
{
"Key": "CampoLivre5",
"Value": null
}
],
"language": null,
"roles": "Administrator,User"
}
}
Códigos de Retorno
Abaixo estão listados os códigos da propriedade “status” do retorno da API (authResult.status
):
Códigos de Retorno | Código | Nome |
---|---|---|
100 | Sucess | Operação realizada com sucesso. |
201 | UserOrPasswordInvalid | |
202 | UserNotFound | |
203 | InactiveUser | |
204 | InvalidToken | |
205 | ExpiredToken | |
206 | AccessDenied | |
207 | SessionNotFound | |
208 | SessionIsClosed | |
209 | IPAddressMismatch |
Incorporando a URL
Após realizar a autenticação, basta passar o token retornado pela API (authResult.authToken
) como um parâmetro de URL para qualquer página do Latromi.
Exemplo:
https://latromi.minha-empresa.com.br/web/Default.aspx?authtk=XXXXXXXXXXXXXXXXXX
Depois é só adicionar essa URL no elemento iframe, dessa forma:
<iframe sandbox="allow-forms allow-same-origin allow-popups allow-scripts allow-top-navigation"
src="https://latromi.minha-empresa.com.br/web/Default.aspx?authtk=XXXXXXXXXXXXXXXXXX"></iframe>
Ocultar o Cabeçalho do site
Geralmente quando incorporamos uma página em outro site, não queremos exibir o cabeçalho do site. Neste caso, basta adicionar na URL o parâmetro showHeader=false
.
Exemplo:
https://latromi.minha-empresa.com.br/web/Default.aspx?authtk=XXXXXXXXXXXXXXXXXX&showHeader=false