A autenticação:
Tem uma tela de login produzida com linguagem nativa (react-native), que ao fazer login num servidor remoto através de um webservice, acessado por um componente importado dentro do meu app, onde ele me retorna um hash do tipo jwt, e algumas informações do usuário, quando logado corretamente.
Em seguida ele faz uma segunda autenticação, que é na nossa base de dados, onde ele pega os dados completos deste usuário, e cria uma autenticação de navegação e acesso por cookie, que é carregado dentro de uma webview.
Esta webview está definida dentro do app nativo, e é renderizada ao verificar se existe um jwt.
Através da navegação no webview, eu tenho o controle de urls que são enviados para a camada nativa (react-native), uma destas urls e a rota de saída (logout), então quando bato nesta página o sistema faz o logout, porém a aplicação fica com uma tela em branco e perde a tela inicial de login nativo, e este é o problema:
A tela do nativo(react-native) não atualiza, e não consigo recomeçar o processo de login depois disso.
Eu estou utilizando Hooks na página, ou seja, não tem mais uma classe instanciada onde eu posso ficar reinstanciando o render com o componentDidMount()
.
A documentação não tem nada sobre como fazer para trabalhar com hooks e webview.
Tem esse github que também não explica nada de como usar com hooks.
Eu até tentei fazer como se fosse um return do App, mas não funcionou, veja o código:
import React, { useState, Fragment, Component } from 'react'
import { SafeAreaView } from 'react-native'
import { WebView, onNavigationStateChange } from 'react-native-webview'
// import { createAppContainer } from 'react-navigation';
// import { createStackNavigator } from 'react-navigation-stack';
import { Login } from 'combo-mobile'
import { NativeModules, Platform, Alert, Button, TextInput, View, StyleSheet, Text, Modal, Keyboard, Linking } from 'react-native'
import CookieManager from 'react-native-cookies'
import {
DOMAIN_APP,
TEST_PARAMS_LOGIN,
APPLICATION_ENV
} from './src/config/env'
import {version as appVersion} from './app.json'
//O aplicativo que é exportado...
const App = () => {
const [jwt, setJWT] = useState(null)
const [urlWebview, setURL] = useState(`${DOMAIN_APP}/path/index`)
const json_encode_platform = btoa(JSON.stringify({
tk_os:Platform.OS,
tk_os_version:Platform.Version,
tk_version_app:appVersion
}));
const jsLib = `window.postMessage("{script:'${DOMAIN_APP}/js/add-script-${Platform.OS}-platform.js',platform:'${json_encode_platform}'}");`
const _onNavigationStateChange = (webViewState) => {
console.log('nav -> '+Date.now())
console.log(webViewState)
if (typeof webViewState.url !== 'undefined') {
_loadingStatus = false
setURL(webViewState.url)
if(urlWebview !== `${DOMAIN_APP}/path/index`) {
console.log('navigation-change')
if(urlWebview.indexOf('external_id') !== -1) {
Linking.openURL(urlWebview);
}
if (urlWebview.indexOf('/logout') !== -1) {
console.log('fez logout...')
CookieManager.clearAll();
console.log('limpei login')
/*
AQUI DEVERIA VOLTAR TUDO NOVAMENTE PARA O ORIGINAL
::: SÓ QUE ESTÁ DEIXANDO A TELA EM BRANCO :::
*/
setJWT(false)
setURL(`${DOMAIN_APP}/path/index`)
/*
AQUI É A TENTATIVA DE FAZER ELE
RENDERIZAR, SÓ QUE NÃO FUNCIONOU
*/
return goWebcombo()
}
}
}
}
const _createCookie = (name, value, call) => {
CookieManager.setFromResponse(`${DOMAIN_APP}/, ${name}=${value};path=/;expires=2030-05-30T12:30:00.00-05:00;secure`)
.then((res) => {
console.log('setFromResponse.set =>', res);
CookieManager.get(`'${DOMAIN_APP}/'`)
.then((resGet) => {
console.log(resGet[name]);
if (resGet[name] != undefined ){
console.log('COOKIE SETADO????? =>', resGet);
call();
}
});
});
}
const _cookiesTypeLogin = () => {
if (DOMAIN_APP) {
CookieManager.clearAll()
_createCookie('tk_os', Platform.OS, (res) => {
_createCookie('type_login','app', (res) => {
})
})
}
}
let _loadingStatus = true;
const defaultUrlAuthenticate = `${DOMAIN_APP}/path/api/oauth/auth?tk_os=${Platform.OS}&tk_os_version=${Platform.Version}&tk_version_app=${appVersion}&jwt_combo=${jwt}&url=${encodeURIComponent(
// `${DOMAIN_APP}/path/index`
// )}`
//O comboJWT é o componente externo que atribui o jwt
//render() {
const webCombo = (
<Fragment>
<Login product="productName" onLoginCombo={({ comboJWT }) => {
setJWT(comboJWT)
if(jwt) {
//seta cookie da origem
_cookiesTypeLogin()
}
}} />
{
//aqui verifica se o jwt foi criado e carrega a webview
jwt && (
<SafeAreaView style={{ flex: 1 }}>
<WebView
style={{ flex: 1 }}
onNavigationStateChange={_onNavigationStateChange}
onError={_onNavigationStateChange}
source={{ uri: defaultUrlAuthenticate }}
javaScriptEnabledAndroid={true}
mixedContentMode={'compatibility'}
allowsInlineMediaPlayback={true}
javaScriptEnabled={true}
domStorageEnabled={true}
injectedJavaScript={jsLib}
startInLoadingState={_loadingStatus}
thirdPartyCookiesEnabled={true}
useWebKit={true}
sharedCookiesEnabled={true}
onMessage={e => {
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:",e)
console.log("teste", e.nativeEvent)
e.nativeEvent.loading = false;
_loadingStatus = false;
const dataMessage = e.nativeEvent.data;
if (dataMessage.open_url != undefined) {
Linking.openURL(dataMessage.open_url);
}
}
}
/>
</SafeAreaView>
)
}
</Fragment>
)
const goWebcombo = () => {
return webCombo;
}
//criei como um método só para tentar renderizar (só que não fez nada)
return goWebcombo();
// }
}
export default App
Eu tentei usar o useEffect, mas veja o erro que deu:
componentDidMount()
?useEffect
ouuseCallback
, mas não sei como aplicar o uso deles aqui.useEffect(App, [])
...componentDidMount
é ouseEffect(função, [])
, caso você queira o "substituto" dele.componentDidMount
? Daria certo? Você já tentou converter esse componente funcional para um class-based?