Read WebView localStorage after registration - xamarin

On my Xamarin App i have a webview that hosts a "web based" registration page and login page built on React (SPA Web application). We do not want to develop that pages from scratch using Xamarin. After registration or login, React stores the access token in the web localStorage Web object.
I would like to read that token from Xamarin C# function and use it for other operations.
i succeed to read the value using javascript injection, something like:
var access_token = await webView.InjectJavascriptAsync("localStorage.getItem('access_token')");
the problem is that the value is populated only after the registration that hosted in the webview and the "Navigated" event not fires on SPA applications URL changes.
Do you know how can i read that localstorage value after registration completed in the webview container?
Something like ScriptNotify of Windows Phone would be great for me to notify Xamarin that the registration completed but couldn't find equivalent for Android and IOS.

as you could edit the web page,you could create a function in js and return the access token after registration completed ,you could refer to this :
Js calls methods in C#
WebSettings settings = webview.Settings;
settings.JavaScriptEnabled = true;
// load the javascript interface method to call the foreground method
webView.AddJavascriptInterface(new MyJSInterface(this), "CSharp");
webview.SetWebViewClient(new WebViewClient());
Create a C# class :
class MyJSInterface : Java.Lang.Object
{
Context context;
public MyJSInterface (Context context)
{
this.context = context;
}
[JavascriptInterface]
[Export]
public void GetAccessToken(string accesstoken)
{
Toast.MakeText(context, accesstoken, ToastLength.Short).Show();
}
}
And then it's called in JS (in your case ,after registration completed,you could call like CSharp.GetAccessToken('accesstoken')):
<button type="button" onClick="CSharp.GetAccessToken('Call C#')">Call C#</button>
You can refer to this document:https://github.com/xamarin/recipes/tree/master/Recipes/android/controls/webview/call_csharp_from_javascript

Related

How to Register a device through Azure Notification Hub App Service SDK or manually for a Xamarin Forms App?

So i'm using Azure Notification Hub, and in that i followed their tutorial where they had mentioned to use FCM for Android , configure it and use their API key, and creating a certificate for iOS, which is working flawless
But the problem is i'm working on Xamarin forms, and i'd like to know if i could do the registration manually through API, and i've already written a method to do that in my API Service
public async Task<string> RegisterDevice([FromBody] string handle = null)
{
string newRegistrationId = null;
//newRegistrationId = await hub.CreateRegistrationIdAsync();
//// make sure there are no existing registrations for this push handle (used for iOS and Android)
//if (handle != null)
//{
// var registrations = await hub.GetRegistrationsByChannelAsync(handle, 100);
// foreach (var registration in registrations)
// {
// if (newRegistrationId == null)
// {
// newRegistrationId = registration.RegistrationId;
// }
// else
// {
// await hub.DeleteRegistrationAsync(registration);
// }
// }
//}
newRegistrationId = await hub.CreateRegistrationIdAsync();
return newRegistrationId;
}
But i'm not able to understand how the device would be linked to this registration ID and/or what is a pns handle, i know the abbreviation but i dont know how to use it in this case or if at all is it necessary?
Any help would be deeply appreciated
While registering Azure Notification Hub, If you want to ask for Push permissions after login, you have to call RegisterForRemoteNotifications(); (iOS) & CreateNotificationChannel(); (Android) after Login.
What you're asking would require a few steps-
You would have to created a DependencyService like this, which would require creating an Interface like IPushRegistrationService with a RegisterForPush() function that would basically be called after login:
var pushService = DependencyService.Get<IPushRegistrationService>();
pushService.RegisterForPush();

Xamarin OAuth2Authenticator Microsoft Account returns malformed JWT token for Azure App Service

I am building a Xamarin.Forms app to learn the framework and working on the authentication services while using an Azure App Service for an API (also new to me). And trying to authenticate against a Microsoft account (Outlook.com).
I am using the Xamarin.Auth OAuth2Authenticator class and it is returning a very peculiar, malformed JWT token. This has been driving me nuts for days and finally decided to turn to where the experts are.
I have an IAuthService interface that will be used by the platform apps to build out the authentication service
public interface IAuthService
{
Task SignInAsync(string clientId,
Uri authUrl,
Uri callbackUrl,
Action<string> tokenCallback,
Action<string> errorCallback);
}
Said service (for iOS) is built out as follows (shortened for brevity):
public class AuthService : IAuthService
{
public async Task SignInAsync(string clientId, Uri authUrl, Uri callbackUrl, Action<string> tokenCallback, Action<string> errorCallback)
{
var auth = new OAuth2Authenticator(clientId, "openid", authUrl, callbackUrl);
auth.AllowCancel = true;
var controller = auth.GetUI();
await UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewControllerAsync(controller, true);
auth.Completed += (s, e) =>
{
controller.DismissViewController(true, null);
if (e.Account != null && e.IsAuthenticated)
{
Console.WriteLine(e.Account.Properties["access_token"]);
tokenCallback?.Invoke(e.Account.Properties["access_token"]);
}
else
{
errorCallback?.Invoke("Not authenticated");
}
};
...
}
}
So I instantiate a new instance of the OAuth2Authenticator class, specifying the scope as "openid"; the MS authorize endpoint requires a scope.
When it hits the console writeline I can see a value came back... but it's not like any JWT token I have seen before.
EwB4A8l6BAAURSN/FHlDW5xN74t6GzbtsBBeBUYAAWPAOehpFaoAKb8Kz67ZZzgzBS3KUtHGZri2sbgIJfA5xZYDv5K417HIz2P+ggUeB/gFMxRfXH1Hd1qT90bfo6skGpIc/K2vDgBoRY0VnlA9nnCyct9B2tSaNQn3hZjPOiOchmSCJxrUMILGKdKy4kxxn5qFlTXAy0hWIQjHXcwGeKXDm1w3wY6x8xsmBxNNXor9FluuUXNNTtu4iP6s424JwIiJ7HCyu6ftORXCfIlemRSv5hcHLa1MXS9vUq95lRc08S05Ek7IiUfMiAnYbrqwD7H+vheAtfDc9kYleebyxlFl6gpVKmv43DV2yYgYIqgqswO6ktJ6Gar4zmqUYUIDZgAACGWNlS0Ln+wWSAJC2apVPWWIsKPobIL0uBImdORjOWvFOnLtKhQfCnngoo1Tw1UItqo5FRj1f/KWj3if/DPgWaQx5Bf4tbqCjuuOdEkR9r/Ru1v/ccjrg2oqp0hicWwIoSaQm2JHgnrrCQ1cfcvXhAuVlAo9tKyqW/dCehdz7NRpQbNtmLvba+PjWWYEcDROJJSwTRqNTGkwiwzNhw8p/Zlf7G51F205S4vDZob1MsWythkrUJAjA6MUJy4wZ5B/8ChF7J3WRSTapjr+6mNgvgvhcflGo6GoEID24aSDL6h9QGPylk6zfghksweu9/AmSMO4BKwLDVSr04BJj1n1rfKsadUBqWUQMaXFGu+OfGbOCm6E5zLSJyO2JKbcsI468gb0/vC6FYFJOzp56GXD5brQtKNtu9urtge02kOwaGlHsK2I28BMdCRVFYJI9kEiqhqr342ZDlob7mpBCoNDk1uLLH2MPDAW9NOpq+V0bab+WawINAjl1GY/obL3zRsVNMoAszFSfdbbWS/KDbx6rw5bUPMC37s6LTbECkXHhqeqDlNQs4G9BccfiJNI5CQa+QPmaRNOBKhD2K97Z9fXmAFY155WzTPoIVKupxkPXo0zp/9vOc/HHEtMlkoUUNzxX5Q7T8awfN/7F4IfShXQKEVLaIStdx5istw7rxfuv1v/U+EMj4fmYUW9sNG/5irVyGAAOVvvPNkavLnl+NaKYysvAxYVPlrj+zJIDi5C91MmRhiTfH/Lgyq9Mlr/FaLIa/Ow6rCIjO4oBZSl9dXwLxFI4oQC
It's not encoded/decoded.
The authUrl I am using is
https://login.microsoftonline.com/common/oauth2/v2.0/authorize
If I attempted to use the v1.0 of the authorize endpoint, the phone OS appears to throw an error to me stating Authentication Error - Invalid state from server. Possible forgery!
I have set up an Azure App Service to act as my API and if I hit my app login url directly it gives me back a well formed token which I then could use to hit the api with no problem. So that tells me that my cliend_id are correct and everything should work.
So I am doing it wrong somewhere. I don't know if I trust the OAuth2Authenticator class from Xamarin when using MS accounts. But documentation is old and/or lacking. I feel like it's going to be an easy answer but I am going cross-eyed trying to interpret MS/Xamarin/Googled documentation.

What is the best solution for "reseting" the Authentication stack?

Currently in my application I have two Navigation stacks.
Authentication
Main
My Authentication stack looks like this:
Splash Page
Choose Create or Login Page
Login Page
After that I call:
CoreMethods.SwitchOutRootNavigation(NavigationContext.Main);
This all works fine.
When I call Logout from within the Main stack like this:
CoreMethods.SwitchOutRootNavigation(NavigationContext.Authentication);
I will currently be on "Login Page", but I really want it to be the first page "Splash Page".
Having the Navigation stacks remember the stack history is perfect for all other cases.
Question: What is the best solution for "reseting" the Authentication stack?
What I normally do in my apps is following.
I have IAuthenticationService which has a State property, which can be LoggedIn or LoggedOut. When session state changed due to explicit login, or for instance token expires, I set the State to LoggedOut. Also I fire a broadcast message SessionStateChanged through Messenger, so I can catch this message all around the app, and react correspondingly in UI level, like change screen states and so on.
If need to completely log the user, I mean show login page when State is LoggedOut, which is your case, I do the following. I use Xamarin.Forms, but the approach would be similar if you use native iOS or Android.
In my main App class (the one which derives from Xamarin.Forms.Application) I create a method call UpdateMainPage, something like this
private async void UpdateMainPage()
{
if (_authService.State == SessionState.LoggedIn)
MainPage = new NavigationPage(new RequestPage());
else
MainPage = new NavigationPage(new SignInPage());
}
What happens I just change the root page of the application to SignIn flow or Main flow depending on SessionState. Then in my constructor I do the following.
public FormsApp()
{
InitializeComponent();
_authService = Mvx.Resolve<IAuthenticationService>();
UpdateMainPage();
var messenger = Mvx.Resolve<IMvxMessenger>();
_sessionStateChangedToken = messenger.Subscribe<SessionStateChangedMessage>(HandleSessionStateChanged);
}
What I need to do, I need to setup main page beforehand, then I subscribe to SessionStateChanged event, where I trigger UpdateMainPage
private void HandleSessionStateChanged(SessionStateChangedMessage sessionStateChangedMessage)
{
UpdateMainPage();
}
I used this approach for several apps, and it work perfect for me. Hope this helps
I had the very same problem recently and this is what I did:
Navigation stacks:
public enum NavigationStacks {Authentication, Main}
In the App.xaml.cs:
//Navigation stack when user is authenticated.
var mainPage = FreshPageModelResolver.ResolvePageModel<MainPageModel>();
var mainNavigation = new FreshNavigationContainer(MainPage, NavigationStacks.Main.ToString());
//Navigation stack for when user is not authenticated.
var splashScreenPage= FreshPageModelResolver.ResolvePageModel<SplashScreenPageModel>();
var authenticationNavigation = new FreshNavigationContainer(splashScreenPage, NavigationStacks.Authentication.ToString());
here you can leverage James Montemagno's Settings Plugin
if (Settings.IsUserLoggedIn)
{
MainPage = mainNavigation;
}
else
{
MainPage = authenticationNavigation;
}
So far you had already done the code above. But the idea for the problem is to clear the authentication stack except the root page i.e splash Screen:
public static void PopToStackRoot(NavigationStacks navigationStack)
{
switch (navigationStack)
{
case NavigationStacks.Authentication:
{
var mainPage = FreshPageModelResolver.ResolvePageModel<MainPageModel>();
var mainNavigation = new FreshNavigationContainer(MainPage, NavigationStacks.Main.ToString());
break;
}
case NavigationStacks.Main:
{
var splashScreenPage= FreshPageModelResolver.ResolvePageModel<SplashScreenPageModel>();
var authenticationNavigation = new FreshNavigationContainer(splashScreenPage, NavigationStacks.Authentication.ToString());
break;
}
}
}
And finally here is the code inside Logout command:
private void Logout()
{
Settings.IsUserLoggedIn = false;
NavigationService.PopToStackRoot(NavigationStacks.Authentication);
CoreMethods.SwitchOutRootNavigation(NavigationStacks.Authentication.ToString());
}
I know there may be better and more efficient approaches. But that worked for me.

Accessing particular service method from metro app?

i have a web services which i am accessing in my client application(metro app) , but i want to access a particular method inside those many methods i have how should i do it ,
as of now , i am doing it in this way to accessing the web services from my metro app:-
private async void Button_Click_1(object sender, RoutedEventArgs e)
{
string responseBodyAsText;
HttpClient client = new HttpClient();
HttpResponseMessage response = await client.GetAsync("http://182.134.34.99/OE/examplewebservices.svc");
response.EnsureSuccessStatusCode();
StatusText.Text = response.StatusCode.ToString();
responseBodyAsText = await response.Content.ReadAsStringAsync();
}
my requirement is :- there are many methods inside that examplewebservices , so i want to access one of the method inside that , pass input parameters to that method and get the result.
1)How to access one a particular method inside those many methods ( from metro app) ?
2)how to pass input to that service method (from metro app)?
Question might be very basic to you , pls help out. i am new to metro application development.
Thanks in advance.
The code you have does not call a service, it downloads service definition page. You will need to add a service reference to your project (right click on project node, choose Add Service Reference from context menu). Then you will be able to call methods of your service. In WinRT app, you will only be able to call web service asynchronously, so all methods will have 'Async' suffix and you will have to use async/await pattern when calling it.
To call an operation on the service you can use this pattern:
using (HttpClient client = new HttpClient())
{
client.BaseAddress = new Uri("http://182.134.34.99/OE/examplewebservices.svc");
HttpResponseMessage response = await client.GetAsync("MyOperation");
...
}
To send values in this simplistic example you can send them as QueryStrings appended to the MyOperation string as follows: MyOperation?myvalue=1 etc.
Other than that #Seva Titov gave a good response to the dynamic aspect.

Windows Phone MVVM Login Page design pattern?

I want to create a login page where the users enters username/password then a web service authenticates and saves an authentication token retrieved from the server.
I want the page view to be notified when the authentication is done successfully.
my question is: how to implement this in MVVM pattern ? I created a class for the model, a class for the model view and a class for the calling and parsing of the web service.
I can't set my ModelView as a DataContext for the page cause there are no controls that bind to the Model's data.
is this pattern an overkill or it can be implemented in another way ? please suggest.
Thanks
I have a login page that is implemented as described here. The login page itself does not have a viewmodel, but it does use a service that I wrote that contains a callback when the login completes. the service also contains other useful info about the user. I think MVVM would have been overkill here.
private void LoginButton_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(EmailTextBox.Text)) return;
if (string.IsNullOrEmpty(PasswordTextBox.Password)) return;
Login();
}
private void Login()
{
if (DeviceNetworkInformation.IsNetworkAvailable == false)
{
MessageBox.Show("I'm having trouble connecting to the internet." + Environment.NewLine + "Make sure you have cell service or are connected to WiFi then try again");
}
else
{
LoginButton.Focus(); // Removes the keyboard
UserProfile.Name = EmailTextBox.Text;
UserProfile.Password = PasswordTextBox.Password;
UserProfile.Current.Login(result =>
{
// callback could be on another thread
Dispatcher.BeginInvoke(() =>
{
// Did the login succeed?
if (result.Result)
{
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}
else
{
string message = "Sorry, but I was not able to log in that user. Please make sure the name and password were entered correctly.";
MessageBox.Show(message, "Login failed");
}
});
});
}
}
You need to put ICommands in your ViewModel that point to methods who perform calls your web service, and the elements in your View should bind to those commands to perform actions.
And you need one more boolean property in your viewmodel: IsLoggedIn, that you set to true when the Login call to your webservice returns a success.
Then in your view, you can bind to IsLoggedIn to give feedback to your users.
Note: don't forget to raise PropertyChanged for IsLoggedIn in its setter.

Resources