javascript - Redireccionamiento a una aplicación móvil desde la vista web de la aplicación en React Native
android react-native (2)
Estoy creando una aplicación de Android que requiere autenticación de un proveedor de autenticación externo. Por lo tanto, estoy usando el paquete react-native-oauth para manejar esto.
El redirect_uri definido es un enlace profundo que idealmente debería abrir mi propia aplicación después de la autenticación exitosa. Pero WebView parece no manejar esta redirección y recibo respuesta porque no se encontró la página 404.
Este es el servicio que he escrito para manejar la autenticación:
const manager = new OAuthManager(''<app_name>'')
manager.addProvider({
''provider'': {
auth_version: ''2.0'',
authorize_url:''<auth-url>'',
access_token_url: ''<auth-url>/token'',
callback_url: ''http://localhost/provider'',
}
});
manager.configure({
provider: {
client_id: ''<id>'',
client_secret: ''<secret>'',
redirect_uri: ''<redirect-uri>'' //DEEP LINK HERE
}
});
module.exports = {
authManager: () => {
manager.authorize(''<provider>'')
.then(resp => console.log(resp))
.catch(err => console.log(err));
}
}
También he definido mi filtro de intención como se especifica en los documentos de Android sobre cómo declarar los enlaces profundos para sus aplicaciones . El enlace profundo funciona bien cuando se abre con Linking.openURL () desde los componentes de la aplicación.
Cualquier ayuda en esto es muy apreciada.
De forma predeterminada, WebView no comparte cookies / datos de sesión con Safari / Chrome. Por lo tanto, no es ideal para el flujo de inicio de sesión, ya que no utiliza la sesión de inicio de sesión existente en Chrome / Safari.
Expo proporciona una api de WebBrowser que abrirá Safari / Chrome en lugar de la vista web. Tenga en cuenta que abre Safari / Chrome dentro de la aplicación, en lugar de redirigirlo a usted mediante el Linking . Por lo tanto, los usuarios siempre tienen un botón en el navegador para volver a su aplicación.
Puede usar WebBrowser.openAuthSessionAsync(url) para abrir una sesión segura que comparta información de cookies / sesión con el navegador nativo del dispositivo.
Expo también proporciona otra API llamada AuthSession que simplifica una gran cantidad de repeticiones y proporciona una API simple.
No puede configurar directamente redirect_uri para su aplicación móvil (porque la mayoría de los proveedores de autenticación no admiten el esquema OAuth personalizado).
Pero puede crear una página web que acepte la redirección de los proveedores de OAuth y abra su aplicación (y envíe todos los parámetros de redirección, como el token ).
Por ejemplo, crea la página https://example.com/oauth/ y configura callback_url en https://example.com/oauth/XXXXX_provider , de modo que cuando el usuario se redirija a la página https://example.com/oauth/XXXXX_provider&token=xxx abrirá su aplicación usando appName://example/oauth/google?token=xxx
Puede manejar appName://example/oauth/google?token=xxx usando Deeplink (abrirá su aplicación móvil cuando esté instalada en el dispositivo)
Ejemplo de página para manejar redirecciones:
<html><head></head><body>
<p>Please wait while we redirect you to Your APP NAME...</p>
<p><a href="javascript:redirectToApp()">Open appname</a></p>
<script>
var redirectToApp = function() {
var scheme = "appnameapp";
var openURL = "appname" + window.location.pathname + window.location.search + window.location.hash;
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
var Android = /Android/.test(navigator.userAgent);
var newLocation;
if (iOS) {
newLocation = scheme + ":" + openURL;
} else if (Android) {
newLocation = "intent://" + openURL + "#Intent;scheme=" + scheme + ";package=com.appnameapp;end";
} else {
newLocation = scheme + "://" + openURL;
}
console.log(newLocation)
window.location.replace(newLocation);
}
window.onload = redirectToApp;
</script>
</body></html>