UI development and webview

developing a webview for iOS and Android to log in to Spotify directly through their respective webview browsers

Constants.cs

@@ -0,0 +1,11 @@
+using System;
+namespace app {
+    public static class Constants {
+
+        public const string SpotifyClientId = "791961aaeda34500b77fda86eaaa69a7";
+        public const string SpotifyClientSecret = "5103b160f8ca41cfb57b20e56c9e44a9";
+        public const string RedirectUrl = "https://app/login";
+
+    }
+}
+

MauiProgram.cs

@@ -9,6 +9,8 @@ global using app.Views;
 global using CommunityToolkit.Mvvm.Input;
 global using CommunityToolkit.Mvvm.ComponentModel;
 
+global using Microsoft.Maui.Controls;
+
 
 namespace app;
 

Views/LoginView.xaml

@@ -17,7 +17,7 @@
         <!-- using a frame to hold everything; easy to animate -->
         <Frame x:Name="Login" IsVisible="False" CornerRadius="10" BorderColor="Black" Padding="10">
             <!-- a webview for signing in to an individual spotify account -->
-            <WebView x:Name="WebviewLogin"/>
+            <WebView x:Name="LoginWeb"/>
         </Frame>
     </Grid>
 </mvvm:TinyView>

Views/LoginView.xaml.cs

@@ -1,28 +1,56 @@
-namespace app.Views;
+using System.Net;
+
+namespace app.Views;
 
 public partial class LoginView {
 
     private readonly LoginViewModel loginViewModel;
+    private readonly string state;
 
     public LoginView(LoginViewModel loginViewModel) {
         InitializeComponent();
         this.loginViewModel = loginViewModel;
 
         BindingContext = loginViewModel;
+
+        state = Guid.NewGuid().ToString();
+
+        //adding a webview handler to allow login through the browser
+        //different compiler instructions to handle each platform's native webview
+        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("UserAgentLogin", (handler, webview) => {
+            var userAgent = "Chrome";
+#if ANDROID
+            handler.PlatformView.Settings.UserAgentString = userAgent;
+#elif IOS
+            handler.PlatformView.CustomUserAgent = userAgent;
+#endif
+        });
     }
 
     protected override void OnAppearing() {
         base.OnAppearing();
         loginViewModel.PropertyChanged += LoginViewModel_PropertyChanged;
+        LoginWeb.Navigating += LoginWeb_Navigating;
     }
 
-
     protected override void OnDisappearing() {
         base.OnDisappearing();
         loginViewModel.PropertyChanged -= LoginViewModel_PropertyChanged;
+        LoginWeb.Navigating -= LoginWeb_Navigating;
     }
 
     private void LoginViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
+        if (e.PropertyName == nameof(loginViewModel.ShowLogin)) {
+            var scopes = "playlist-read-private playlist-modified-private";
+            var querystring = $"response_type=code&client_id={Constants.SpotifyClientId}&scopes={WebUtility.UrlEncode(scopes)}&redirect_uri={Constants.RedirectUrl}&state={state}";
+            LoginWeb.Source = $"https://accounts.spotify.com/authorize?{querystring}";
+            Login.TranslationY = this.Height;
+            Login.IsVisible = true;
+            Login.TranslateTo(Login.X, 100, easing: Easing.Linear);
+        }
+    }
+
+    private void LoginWeb_Navigating(object sender, WebNavigatingEventArgs e) {
         throw new NotImplementedException();
     }
 

bin/Debug/net7.0-ios/iossimulator-x64/err.log

@@ -1,2 +1,2 @@
-objc[14938]: Class CDPCAReporter is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDPInternal.framework/CoreCDPInternal (0x15c0a41d8) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDP.framework/CoreCDP (0x154c39eb0). One of the two will be used. Which one is undefined.
-objc[14938]: Class CDPCABackupRecoveryReporter is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDPInternal.framework/CoreCDPInternal (0x15c0a4ef8) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDP.framework/CoreCDP (0x154c3a0e0). One of the two will be used. Which one is undefined.
+objc[61091]: Class CDPCAReporter is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDPInternal.framework/CoreCDPInternal (0x15abd51d8) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDP.framework/CoreCDP (0x15376aeb0). One of the two will be used. Which one is undefined.
+objc[61091]: Class CDPCABackupRecoveryReporter is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDPInternal.framework/CoreCDPInternal (0x15abd5ef8) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/PrivateFrameworks/CoreCDP.framework/CoreCDP (0x15376b0e0). One of the two will be used. Which one is undefined.

bin/Debug/net7.0-maccatalyst/maccatalyst-x64/app.app/Contents/Resources/MauiInfo.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>UIAppFonts</key>
+  <array>
+	<string>OpenSans-Regular.ttf</string>
+	<string>OpenSans-Semibold.ttf</string>
+  </array>
+
+</dict>
+</plist>

bin/Debug/net7.0-maccatalyst/maccatalyst-x64/app.app/Contents/_CodeSignature/CodeResources

@@ -12,6 +12,10 @@
 		<data>
 		XeNJCWAjipe3f59TxQGWtSCBAQI=
 		</data>
+		<key>Resources/MauiInfo.plist</key>
+		<data>
+		iEtuUGCV6JM3gxS/pO33swhmpp8=
+		</data>
 		<key>Resources/MonoTouchDebugConfiguration.txt</key>
 		<data>
 		oowkf1sL6T19nanXUObgmuayWqM=
@@ -40,9 +44,20 @@
 		<data>
 		AgG9OaBqGlLlSsDbnE/6b1bb0xU=
 		</data>
+		<key>Resources/logo.png</key>
+		<data>
+		IDsoHh36AQc5kIM7YtCMIOetXS0=
+		</data>
 	</dict>
 	<key>files2</key>
 	<dict>
+		<key>MonoBundle/CommunityToolkit.Mvvm.dll</key>
+		<dict>
+			<key>hash2</key>
+			<data>
+			ZdC70jHEKi0+I0r1FTTj/23Iyvsb7SVj3Y78fa45r8o=
+			</data>
+		</dict>
 		<key>MonoBundle/Microsoft.CSharp.dll</key>
 		<dict>
 			<key>hash2</key>
@@ -1317,6 +1332,13 @@
 			yNBFrd//oJVZZHv78FtIXculJd8jLjSKYHZ1ctW6ehg=
 			</data>
 		</dict>
+		<key>MonoBundle/TinyMvvm.Maui.dll</key>
+		<dict>
+			<key>hash2</key>
+			<data>
+			I0XahygD5zbvZK038yipwCsVc4hFMSaTkdftRU73pls=
+			</data>
+		</dict>
 		<key>MonoBundle/WindowsBase.dll</key>
 		<dict>
 			<key>hash2</key>
@@ -1328,14 +1350,14 @@
 		<dict>
 			<key>hash2</key>
 			<data>
-			d/7O64fJcrzYCJ7N3BwOtr+5lrTW/hnbTVy2S7Xi5yY=
+			H6QDeePoc+HBEHzHDkeLwm6CcbeIbrGV029lTn3DQus=
 			</data>
 		</dict>
 		<key>MonoBundle/app.pdb</key>
 		<dict>
 			<key>hash2</key>
 			<data>
-			ZFc44gvO0W00l5PwxPIa5vtAkcazIIMZJQ23GEfOtN0=
+			gtbxd6399cegsSyEyoYFKLdrgl80mNXPTVyJDY9C/GE=
 			</data>
 		</dict>
 		<key>MonoBundle/icudt.dat</key>
@@ -1422,6 +1444,13 @@
 			jxdtgqkMJEyuNwZZSFxELD/Kt3Zu2RhwpGEO2sOawo4=
 			</data>
 		</dict>
+		<key>Resources/MauiInfo.plist</key>
+		<dict>
+			<key>hash2</key>
+			<data>
+			tx0KXqEC+DvcCGyogQTEQWHcCWJYYqH24NtPwhpQEjo=
+			</data>
+		</dict>
 		<key>Resources/MonoTouchDebugConfiguration.txt</key>
 		<dict>
 			<key>hash2</key>
@@ -1471,6 +1500,13 @@
 			06Dw48r2qORp1zVQzu1FMEqEQpN18taU/bp0JACYc40=
 			</data>
 		</dict>
+		<key>Resources/logo.png</key>
+		<dict>
+			<key>hash2</key>
+			<data>
+			OkkgW7lnHMsgE93wMOVLwXwym++4OYG1n1RKekGA/A4=
+			</data>
+		</dict>
 	</dict>
 	<key>rules</key>
 	<dict>