En otros posts he probado a manejar un evento de un control Silverlight y redirigirlo a una propiedad del tipo ICommand en mi VistaModelo.
Actualmente estoy trabajando en una página de configuración en la que, una de las acciones a llevar a cabo es registrar la aplicación en Foursquare. El mecanismo de autenticación utilizado es OAuth v2 (un estándar en la web, si echáis por ahí un vistazo). En el caso de Foursquare, el mecanismo recomendado para autenticación desde dispositivos móviles viene indicado aquí.
Esencialmente el proceso es muy simple y consiste en lo siguiente.
- Navegamos a la página de autenticación proporcionando el código de nuestra aplicación y una url de vuelta “callback”. Esta url no tiene por que ser una url real para una aplicación en desarrollo (algo del estilo http://localhost te va a funcionar perfectamente).
- Foursquare recibe la petición, comprueba el ID de la aplicación y la url de vuelta. Si el usuario está ya autenticado pasa al paso 4, si no.
- Si el usuario no está autenticado, pide sus credenciales de Foursquare.
- Una vez autenticado el usuario, Foursquare le pregunta si quiere registrar la aplicación.
- Si el usuario acepta, se redirige a la url de vuelta (callback) con un token específico para el usuario, que es el que utilizaremos para hacer llamadas al API de Foursquare desde la aplicación, en nombre del usuario.
En una primera aproximación me voy a limitar a crear un control de tipo WebBrowserControl con el que realizar este proceso.
Nada muy complicado.
1: <!--ContentPanel - place additional content here-->
2: <Grid x:Name="ContentPanel"
3: Grid.Row="1"
4: Margin="12,0,12,0">
5: <phone:WebBrowser
6: HorizontalAlignment="Stretch"
7: Name="webBrowser1"
8: VerticalAlignment="Stretch"
9: IsScriptEnabled="True"
10: Source="{Binding Path=FourSquareAuthUrl}">
11:
12: </phone:WebBrowser>
13:
14: </Grid>
Atención a la propiedad IsScriptEnabled, sin ella no he conseguido hacer funcionar el ejemplo ya que, por defecto, el valor está a falso y no permite ejecutar scripts.
Como con el resto de la aplicación, estoy tratando de mantener un patrón MVVM con lo que:
- La url (propiedad Source) la he de obtener de la VistaModelo
- Cuando navegemos a la URL de callback y deba de obtener el token, debo de hacerlo desde la VistaModelo también.
El primer punto no supone dificultad, el problema viene cuando queremos manejar los eventos de navegación. Veamos los intentos que he realizado.
Navegando con Code-behind
El primer intento evidente es crear un manejador en el “code behind” de la página.
1: <phone:WebBrowser
2: HorizontalAlignment="Stretch"
3: Name="webBrowser1"
4: VerticalAlignment="Stretch"
5: IsScriptEnabled="True"
6: Source="{Binding Path=FourSquareAuthUrl}"
7: Navigating="webBrowser1_Navigating" />
Y el manejador…
1: namespace Lcdad.SquareMatrix.ViewModel
2: {
3: using GalaSoft.MvvmLight.Ioc;
4: using Microsoft.Phone.Controls;
5:
6: /// <summary>
7: /// Description for FourSquareLogin.
8: /// </summary>
9: public partial class FourSquareLogin : PhoneApplicationPage
10: {
11: /// <summary>
12: /// Initializes a new instance of the FourSquareLogin class.
13: /// </summary>
14: public FourSquareLogin()
15: {
16: InitializeComponent();
17: }
18:
19: private void webBrowser1_Navigating(object sender, NavigatingEventArgs e)
20: {
21: // Manejar aquí el evento de navegación para ver si estamos en la
22: // uri de callback.
23: }
24: }
25: }
Sin embargo habíamos quedado en que esta no es la forma adecuada.
Navegando con MVVM (no funciona como me gustaría)
El segundo intento me llevó un poco más de tiempo y lectura. El framework MVVM Light implementa un comportamiento (behavior) que puede utilizarse como mecanismo para asociar el evento con un comando en la VistaModelo. El EventToCommand Behavior
Primero de todo hemos de incluir la referencia correspondiente del espacio de nombres dentro de la página.
1: xmlns:gse="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
A continuación declaramos unos cuantos disparadores para capturar los eventos de navegación.
1: <phone:WebBrowser
2: HorizontalAlignment="Stretch"
3: Name="webBrowser1"
4: VerticalAlignment="Stretch"
5: IsScriptEnabled="True"
6: Source="{Binding Path=FourSquareAuthUrl}">
7: <i:Interaction.Triggers >
8: <i:EventTrigger EventName="Navigating" >
9: <gse:EventToCommand
10: Command="{Binding Path=EstaNavegando, Mode=OneWay}"
11: MustToggleIsEnabled="True"
12: CommandParameter="{Binding ElementName=webBrowser1, Path=Source.AbsoluteUri}" />
13: </i:EventTrigger>
14:
15: <i:EventTrigger EventName="Navigated" >
16: <gse:EventToCommand
17: Command="{Binding Path=HaNavegado, Mode=OneWay}"
18: MustToggleIsEnabled="True"
19: CommandParameter="{Binding ElementName=webBrowser1, Path=Source.AbsoluteUri}" />
20: </i:EventTrigger>
21:
22: <i:EventTrigger EventName="NavigationFailed" >
23: <gse:EventToCommand
24: Command="{Binding Path=ErrorNavegando, Mode=OneWay}"
25: MustToggleIsEnabled="True"
26: CommandParameter="{Binding ElementName=webBrowser1, Path=Source.AbsoluteUri}" />
27: </i:EventTrigger>
28: </i:Interaction.Triggers>
29: </phone:WebBrowser>
Como puede verse, se declaran disparadores de eventos y se incluye el comportamiento EventToCommand para manejar dicho evento. En este segundo intento, pasé la Uri del control. Sin embargo, no conseguí el objetivo deseado.
Mi intención era, aprovechar la url durante las redirecciones, analizarla y cuando estuviéramos en la url de callback, extraer el token. Para mi mala suerte, pude comprobar que la url pasada como parámetro no cambiaba en absoluto durante las redirecciones (quizá tenga que analizar esto un poco más y sea una cuestión de configuración).
En resumen, lo que yo quería era disponer del estado de la navegación. Había podido observar que, en los manejadores de evento los argumentos NavigatingEventArgs, NavigationEventArgs y NavigationFailedEventArgs sí contenían la información que buscaba, así que. ¿Cómo pasar los argumentos del evento directamente a la VistaModelo?
Navegando con MVVM (ahora sí que sí)
Si le echas un vistazo a la documentación de la MSDN se indica claramente que el evento Navigating contiene información de navegación incluso durante redirecciones, así que poder pasar los parámetros de dicho evento a mi VistaModelo es fundamental para poder obtener mi token (al menos durante las pruebas).
La respuesta es muy sencilla, eliminar el primer intento de pasara la Url del control y, simplemente, poner a true el atributo PassEventArgsToCommand.
1: <phone:WebBrowser
2: HorizontalAlignment="Stretch"
3: Name="webBrowser1"
4: VerticalAlignment="Stretch"
5: IsScriptEnabled="True"
6: Source="{Binding Path=FourSquareAuthUrl}" >
7: <i:Interaction.Triggers >
8: <i:EventTrigger EventName="Navigating" >
9: <gse:EventToCommand
10: Command="{Binding Path=EstaNavegando, Mode=OneWay}"
11: PassEventArgsToCommand="True"
12: MustToggleIsEnabled="True" />
13: </i:EventTrigger>
14: </i:Interaction.Triggers>
15: </phone:WebBrowser>
Y en la VistaModelo…
1: namespace Lcdad.SquareMatrix.ViewModel
2: {
3: public class FourSquareLoginViewModel : ViewModelBase
4: {
5: private IFourSquareHelper _fsHelper;
6: private ICommand _haNavegado;
7: private ICommand _estaNavegando;
8: private ICommand _errorNavegando;
9: private ICommand _paginaCargada;
10:
11: public FourSquareLoginViewModel()
12: {
13: ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
14:
15: _fsHelper = SimpleIoc.Default.GetInstance<IFourSquareHelper>();
16:
17: _haNavegado = new RelayCommand<NavigationEventArgs>(AccionNavegado);
18: _estaNavegando = new RelayCommand<NavigatingEventArgs>(AccionNavegando);
19: _errorNavegando = new RelayCommand<NavigationFailedEventArgs>(AccionErrorNavegando);
20: _paginaCargada = new RelayCommand<NavigationEventArgs>(AccionPaginaCargada);
21: }
22:
23: private void AccionNavegado(NavigationEventArgs nea)
24: {
25: }
26:
27: private void AccionPaginaCargada(NavigationEventArgs nea)
28: {
29: }
30:
31: private void AccionNavegando(NavigatingEventArgs nea)
32: {
33: // Cuando llega la redirección del token, esta no se procesa enteramente, debemos de capturarla aquí mismo.
34: if (_fsHelper.EsUriCallback(nea.Uri))
35: {
36: var token = _fsHelper.ObtenerTokenDesdeUri(nea.Uri);
37:
38: if (!String.IsNullOrEmpty(token))
39: {
40: // TODO: Almacenar el token en BBDD
41: }
42: }
43: }
44:
45: private void AccionErrorNavegando(NavigationFailedEventArgs nfea)
46: {
47: }
48: }
49: }
Con esto ya lo hemos conseguido. ¡Nos registramos en Foursquare!
Lo siguiente: consumir los servicios expuestos.
jdmveira 