Esta pregunta se refiere a una aplicación web compilada en React a la que se accederá con teléfonos inteligentes a través de sus navegadores. Uso iPhone con Safari y Chrome para probar.
Un paso consiste en abrir una aplicación de autenticación nativa. De acuerdo con los documentos de la aplicación nativa, se puede abrir desde el navegador haciendo esto:
const openAuthApp = () => (window.location = "https://app.bankid.com/?autostarttoken=&redirect=");Esto funciona bien si llamo a la función al hacer clic en un botón, así:
<button onClick={openAuthApp}>Open</button>El código anterior activa la apertura de la aplicación de autenticación inmediatamente al hacer clic en el botón.
Pero cuando activé la función inmediatamente después de que se cargó la página, sin usar un botón, como este
useEffect(() => { openAuthApp(); }, []);Recibo un error en el navegador que dice que la aplicación no se encontró en este dispositivo.
No sé mucho sobre cómo funcionan los navegadores, pero mi primera suposición fue que el navegador tarda un tiempo en adquirir información sobre todas las aplicaciones instaladas, por lo que agregué un tiempo de espera antes de ejecutar el método:
useEffect(() => { setTimeout(openAuthApp, 5000); }, []);Todavía falló. Funciona si presiono el botón menos de 5 segundos después de la carga de la página, por lo que el tiempo de inicio después de la carga de la página no debería ser un factor aquí.
No sé cómo proceder con esto, y agradecería ideas sobre cómo seguir adelante.
Sospecho que su problema es un gesto de usuario faltante, que es común cuando se usan esquemas HTTPS reclamados, por ejemplo, consulte este requisito del navegador Chrome .
Hay un problema similar cuando se usan flujos OAuth y el patrón AppAuth con URI de redireccionamiento HTTPS, que ocurre tanto para iOS como para Android. Consulte las secciones tituladas Problemas para recibir respuestas de redirección en mis publicaciones de blog de iOS y Android .
La solución para mis muestras móviles fue agregar una página web intersticial y, si realiza una vista de código fuente, verá que tiene un controlador onclick que invoca un vínculo profundo después del gesto del usuario:
document.getElementById('continueButton').onclick = () => { const redirectUri = 'https://mobile.authsamples.com/basicmobileapp/oauth/callback'; window.location.href = redirectUri; };Por supuesto, no necesitará llegar a estos extremos, pero creo que necesitará un gesto de usuario para invocar la aplicación BankID y realizar un inicio de sesión externo de manera confiable. De alguna manera, esta también es una UX razonable, ya que mantiene informado al usuario antes de cambiar de aplicación, en lugar de hacerlo abruptamente. Le daría un giro positivo así:
You will now be redirected to the BankID app to perform strong authentication and to provide consent. Please click Next to proceed.Opción 1:
Usa window.location.href en lugar de window.location
const openAuthApp = () => (window.location.href = "https://app.bankid.com/?autostarttoken=&redirect="); Si su aplicación web tiene el mismo dominio que bankid.com , use window.location.assign en su lugar.
const openAuthApp = () => (window.location.assign= "https://app.bankid.com/?autostarttoken=&redirect=");Opcion 2:
esto tomará 5 minutos, use branch.io para los enlaces (no necesita instalar el SDK)
Esto debería funcionar sin problema