O Menu Global é um menu da iônica que permite que o usuário navegue entre as diferentes aplicações da plataforma, além de poder visualizar seu perfil.
O arquivo pode ser importado de duas formas:
Por uma tag script importando o arquivo
<script
type="text/javascript"
async
src="https://ionicastaticfiles.blob.core.windows.net/menu-dev/v2/ionicamenu.js"
></script>
Pelo codigo JavaScript abaixo:
(function (w, d, s, o, f, js, fjs) {
w["ionicamenu"] = o;
w[o] =
w[o] ||
function () {
(w[o].q = w[o].q || []).push(arguments);
};
(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
js.id = o;
js.src = f;
js.async = 1;
fjs.parentNode.insertBefore(js, fjs);
})(
window,
document,
"script",
"https://ionicastaticfiles.blob.core.windows.net/menu-dev/v2/ionicamenu.js"
);Após o arquivo do menu global estar incorporado na página, o plugin deve ser inicializado passando o id do parceiro para poder marcar o item do menu como ativo:
Obs: Você irá receber dois tokens, id_token e access_token. O token a ser enviado na inicialização do menu-global é o access_token. Agora, para o parâmetro activeId, nosso time compartilhará com você no momento da integração um novo ID. O valor "2" mencionado abaixo é apenas um exemplo e está vinculado a um parceiro já existente.
IonicaMenu.init({activeId: "2",getAccessToken: () => { return "ACCESS_TOKEN_GERADO"; }});
Abaixo seguem alguns exemplos de como inicializar o menu global:
Vanilla Javascript
// Executar quando todo o javascript da pagina já tiver sido carregado
document.addEventListener("readystatechange", (event) => {
if (event.target.readyState === "complete") {
IonicaMenu.init({
activeId: "2",
getAccessToken: () => { return "ACCESS_TOKEN_GERADO"; }
});
}
});
ReactJs (React Function Component)
useEffect(() => {
window.IonicaMenu.init({
activeId: "2",
getAccessToken: () => { return "ACCESS_TOKEN_GERADO"; }
});
}, []);ReactJs (React Component)
componentDidMount(){
window.IonicaMenu.init({
activeId: "2",
getAccessToken: () => { return "ACCESS_TOKEN_GERADO"; }
});
};jQuery
$(function () {
IonicaMenu.init({
activeId: "2",
getAccessToken: () => { return "ACCESS_TOKEN_GERADO"; }
});
});Caso o parceiro tenha elementos que tenham position: fixed ou position: absolute deverá verificar se algum desses elementos estão posicionados abaixo ou sobre o menu global e fazer alterações caso necessário, segue abaixo um exemplo de alteração:
// Exemplo de elemento que ficaria embaixo do menu-global
.exemplo-parceiro {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: red;
color: #fff;
}
// Alteração para a versao mobile
.ionicamenu-loaded .exemplo-parceiro {
top: 93px;
}
@media only screen and (min-width: 768px) {
// Alteração para a versão desktop
.ionicamenu-loaded .exemplo-parceiro {
top: 35px;
left: 142px;
}
// Alteração para a versão desktop pequena
.ionicamenu-loaded.ionicamenu__small .exemplo-parceiro {
left: 63px;
}
}
Também é sugerido, para uma melhor exibição dos elementos com position: fixed ou position: absolute de sua aplicação, verificar a existência do elemento menu-global-header no DOM da página, pois este elemento poderá ou não estar posicionado no topo da página, em virtude de uma regra executada internamente pelo menu para exibi-lo.
Em alguns casos, além de utilizar o ADB2C para controlar as sessões, o parceiro pode ter uma solução personalizada ou guardar informações no cache, local storage, session storage ou cookies. Para esses casos, o IonicaMenu permite que seja informado, durante a inicialização, a lógica necessária para terminar a sessão na sua plataforma, por meio da opção onInvalidSession.
IonicaMenu.init({activeId: 2,getAccessToken: () => {...},onInvalidSession: async () => {// lógica do para invalidar sessão, implementada pelo parceiroawait myCustomApi.performLogout();}});
Além disso, é possível repassar uma instância da MSAL (v2) para que o logout seja também realizado no ADB2C pelo menu (nesse caso, o método logoutRedirect será chamado internamente):
IonicaMenu.init({activeId: 2,getAccessToken: () => {...},onInvalidSession: async () => {// lógica para invalidar sessão, implementada pelo parceiroawait myCustomApi.performLogout();},msal: msalInstance});
Após o fluxo de logout, o usuário sera redirecionado para a página de login da Plataforma Iônica. Por fim, caso seja necessário chamar a ação de logout da plataforma em eventos personalizados, é possível fazê-lo pelo IonicaMenu.logout.
O processo de logout é iniciado em dois tipos de situações. O primeiro caso é quando o usuário utiliza explicitamente o botão "Sair" e o segundo quando a plataforma do parceiro tenta utilizar um token previamente invalidado. Nesse processo, a OnInvalidSession é chamada antes da finalização no ADB2C
Suponha o caso em que a plataforma usa uma estratégia de armazenar o token no LocalStorage e não verifica no ADB2C se o usuário possui sessão antes de passar o mesmo para o método "getAccessTokeen", durante a inicialização do IonicaMenu. Um usuário acessa o plataforma "A" e após isso acessa a plataforma "B", onde efetua o logout, invalidando a sessão no ADB2C.
Ao efetuar login novamente e entrar na plataforma "A", será enviado o token armazenado previamente no LocalStorage e por este não estar mais associado a nenhuma sessão válida no ADB2C, é efetuado o fluxo de logout.