Em primeiro lugar, o login de autorização do Google precisa criar um projeto na nuvem do Google, após a conclusão da criação, você precisa criar uma credencial e, em seguida, criar um formulário da web da tela de login de consentimento do Google.
fundo
Nosso projeto é construído com base em elétron com um micro-aplicativo micro front-end (base) embutido em cada módulo sub-aplicativo (aplicativo web criado por react scaffolding).
O plug-in de terceiros usado pelo botão de consentimento é react-google-login (um componente usado para conectar-se à API de login do Google e fornecer um estilo de botão de login unificado) e gapi-script (pacote de API do Google) precisa ser inicializado.
Fenômeno estranho
Nosso aplicativo começa com uma base de microsserviço para se conectar ao conteúdo do elétron (cliente) e, ao mesmo tempo, inicia um serviço de subaplicativo local para implementar o botão de login do Google (APIs incorporadas, como retornos de sucesso e falha de clique), separadamente em o serviço do subaplicativo O botão do componente react-google-login é carregado nele e pode ser clicado normalmente, mas o botão no serviço de aplicativo base + electronic (coletivamente referido como o cliente de desktop) está esmaecido. Depois de muitas investigações, descobriu-se que é o micro-front-end do micro-aplicativo JD. O problema causado pelo sandbox pode ser reproduzido desativando o proxy do sandbox.
razão de posicionamento
Escrevi uma demonstração de micro-front-end. Depois de verificar, descobri que, após clicar no botão de consentimento de login, ele chamará espontânea e assincronamente várias interfaces de recursos do Google, incluindo fontes, arquivos JS e assim por diante. Entre eles, existem dois arquivos js que são dependentes. A execução do primeiro depende do segundo, e há muitas modificações na janela no arquivo js. Sabemos que a base controla o objeto global por proxy, portanto, não pode ser modificado diretamente na janela, ao mesmo tempo, o subaplicativo é um botão clicado no ambiente sandbox para acionar a solicitação de recurso. Portanto, neste momento, a janela obtida entre os arquivos js dependentes está indefinida, portanto, um erro é relatado.
Mas nosso projeto precisa de um sandbox, o que devemos fazer?
Há uma premissa aqui. Depois de fazer login e obter o consentimento, podemos obter algumas informações do usuário, como endereço de e-mail, accessToken e outras informações. Neste momento, também precisamos notificar o pessoal do cliente de desktop para nos ajudar com o processamento de dados Ele precisa pegar esse accessToken para obter outras permissões do Google.
Para contornar as restrições do sandbox, temos as seguintes soluções:
1. Abra um formulário na área de trabalho (modo eletrônico) e pule o isolamento sandbox do subaplicativo na base. O defeito desse método é que o processo do formulário recém-aberto não pode ser controlado, ou seja, o processo não pode Killed
2. Use iframe, mas este método perderá o objeto ponte global jsbridge, você precisa usar um método semelhante à notificação de mensagem postMessage para readquirir o objeto ponte global
3. Use window.open para abrir uma nova página (este método também irá O objeto global é perdido, portanto, operações de acompanhamento são necessárias) e, em seguida, acesse por solicitação ou endereço de protocolo do cliente, notifique a interface ou o módulo de interceptação de protocolo, se for uma interface, crie uma votação de front-end, desconecte o link quando os dados são encontrados e feche a sondagem. Se for acessado pelo endereço de protocolo do cliente, esses módulos de interceptação nos ajudarão a chamar o método específico na área de trabalho para passar os parâmetros de autorização do usuário para os alunos na área de trabalho. (Por que é tão desviado? Porque estamos abrindo um novo formulário, que não está no contêiner da área de trabalho. Embora não haja contêiner de host, ele também não possui o objeto de ponte global jsbridge, portanto, precisamos encontrar uma maneira de passar parâmetros para a área de trabalho). 【O plano final adotado】
Cenários que foram tentados e falharam:
1. Abra a página de login de autorização na forma de iframe no subaplicativo, mas o token e as informações relacionadas no aplicativo não podem ser injetados do contêiner (base), resultando em falha de autorização 401. Portanto, os dados precisam ser transmitidos por meio de postMessage entre domínios antes de poderem ser exibidos normalmente.
2. O subaplicativo usa diretamente a janela pop-up para abrir o componente de login autorizado, mas falha porque o sandbox intercepta os recursos de rede necessários para o login do Google. E como o login autorizado do Google para obter recursos é uma solicitação espontânea, não podemos controlá-lo e, como o sandbox também está fechado, não pode ser resolvido apenas por escapeProperties exposto, nem pode desativar o Sandbox diretamente.
3. Abra a página da Web padrão do cliente externo por meio do shell.external do elétron, mas falha. Embora o botão possa ser clicado, ele não pode se comunicar com o subaplicativo no contêiner, mesmo que o objeto global jsbridge seja passado, porque o ambiente do host em execução está ausente.
4. Abra uma janela independente através de window.open, a situação é consistente com o item 3.