Cal tenir clar com funciona el sistema de seguretat de Cordova (que per defecte no permet cap tipus de connexió de xarxa) excepte que utilitzem cordova-white-list (que a la app plantilla creada amb cordova create està posat per defecte).
Si volem que la URL d'autorització es pugui navigar des de la pròpia WebView aleshores cal afegir aquesta URL explícitament a una etiqueta html allow-navigation del fitxer de config.xml de Cordova.
Vegeu abans Redirect URI vs Callback URL i REDIRECT URI/redirect_uri
Quan el proveïdor del servei OAuth per la raó que sigui no suporta/no deixa posar la redirect URI que ens interessaria (per exemple no deixa posar localhost o obliga a posar una URL accessible des de Internet tipus http://domini.com) podem crear una Forward page o pàgina de redirecció i utilitzar window.location.assign o window.location.replace
Acacha Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none';script-src 'unsafe-inline';">
</head>
<body>
<script>window.location.assign('mycoolapp://token' + window.location.hash);</script>
</body>
</html>
La diferència entre assign i replace és que replace no deixa rastre de la pàgina de forward a l'historial de navegació. Suposem que la pàgina HTMl anterior la tenim al domini/URL:
http://example.com/oauth/fw
Aleshores hem de posar com a redirect_uri al proveïdor del servei:
http://example.com/oauth/fw
I realment la petició acabarà a la URL que naltors haguem escollit amb el access_token al hash de la URL. Segons l'exemple:
mycoolapp://token#access_token=TOKEN_HERE
IMPORTANT: observeu que en aquest exemple hem utilitzant una custom URL però podem utilitzar qualsevol valor com file:// o http://localhost o el que ens convingui.
Possibles formats (Google [1]):
Recursos:
https://calendee.com/2014/05/12/custom-urls-in-ionic-cordova-apps/ Exemple amb Ionic: https://github.com/calendee/ionicCustomUrl
aka:
Vegeu també:
En compte amb CSP si fem un schema a mida:
<meta http-equiv="Content-Security-Policy"
content="default-src * signsrestaurantandbar:;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
Usually the wildcard setting (*) can handle most applications, but not your "custom" protocol.
NOTE: Wildcard setting have the potential of keep your app out of the "app stores".
I la configuració del plugin cordova-whitelist al fitxer config.xml:
<allow-intent href="signsrestaurantandbar:" />
Resources:
https://software.intel.com/en-us/xdk/article/oauth2-with-intelxdk-cordova-html5 https://github.com/krisrak/jquery-cordova-oauth2
Vegeu primer InAppBrowser un plugin de Cordova que s'utilitza per navegar des de Cordova (Webviews) a dominis/webs de tercers que no siguin de confiança. És important que entengueu la diferència/implicacions de seguretat entre utilitzar InAppBrowser i permetre la navegació directe utilitzant allow-navigation del plugin cordova-whitelist (Amb InAppBrowser la web visitada no pot utilitzar els plugins de Cordova i amb allow-navigation si).
Un cop entès com funciona InAppBrowser cal entendre per que l'utilitzem amb Cordova per implementar el flux d'autenticació Oauth amb implicit grant:
Bàsicament s'utilitza per l'opció que tenim de capturar l'esdeveniment:
Exemple de codi extret de ([5]):
var ref = window.open('https://accounts.google.com/o/oauth2/auth?client_id=' + clientId + '&redirect_uri=http://localhost/callback&scope=https://www.googleapis.com/auth/urlshortener&approval_prompt=force&response_type=code&access_type=offline', '_blank', 'location=no');
ref.addEventListener('loadstart', function(event) {
if((event.url).startsWith("http://localhost/callback")) {
requestToken = (event.url).split("code=")[1];
ref.close();
}
});
IMPORTANT: els esdeveniment loadstart i loaderror no es disparen si estem utilitzant el navegador i per tant el que tindrem es un simple window.open en una nova finestra! segurament no es el que volem
Observeu com tanquem la finestra abans que doni in error i un cop hem obtingut el token!
Resources:
Google no vol suportar més OAuth a WebViews:
https://github.com/nraboy/ng-cordova-oauth/issues/283 https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html?m=1
I plugins nous per Chrome Custom tabs:
Aquesta solució té el problema que les WebViews no permeten la navegació cap a recursos locals (file://) des de Internet. Vegeu Apache_Cordova#Cordova_Navigation._Navegaci.C3.B3_from_website_to_local_content
Sembla la solució més acceptada tot i que també hi ha alguns problemes. Llegiu OAuth a Cordova amb App Browser
Solució trobada a:
https://medium.com/@jlchereau/stop-using-inappbrowser-for-your-cordova-phonegap-oauth-flow-a806b61a2dc5#.2hl7wjm5x
Però és especifica per iOS i també implica l'ús de Deep Linking/Custom URL Schemes
No provat:
Vegeu Deep Linking/Custom URL Schemes
Utilitzar algun plugin com https://github.com/napolitano/cordova-plugin-intent per capturar els Android Intents amb Cordova (no provat). Vegeu Cordova Android Intents
Utilitzar com a redirect_uri una URL del servidor que reculli el token i l'envii per sockets a l'aplicació Cordova client?
Vegeu Not allowed to load local resource
Resources: