How to Monitoring and Navigating URLs in Blazor Maui with Social Authentication

Question

How to Monitoring and Navigating URLs in Blazor Maui with Social Authentication

Raju Gadda 66

I'm currently working on a Blazor Maui app using C# and integrating UAE Pass authentication. In my application, I need to monitor and navigate URLs within a Blazor page, such as Login.razor. I attempted to achieve this using an iframe, but encountered an error due to

Error_BlOCKED-BY-RESPONSE.

I'm looking for guidance on an alternative approach or a solution to monitor and navigate URLs within a Blazor page.

@page "/login" 
 <!-- My attempt with iframe --> 
<iframe src="@myUrl" width="100%" height="500px"></iframe>
  @code 
{    
 string myUrl = "https://stg-id.uaepass.ae/idshub/authorize?response_type=code&client_id=sandbox_web_stage&scope=urn:uae:digitalid:profile:general&state=HnlHOJTkTb66Y5H&redirect_uri=https://stg-selfcare.uaepass.ae&acr_values=urn:safelayer:tws:policies:authentication:level:low"; 
}

Anonymous

2023-12-01T10:00:00.9533333+00:00
The error you are facing is related to the security or the CORS related which is blocking the content being loaded from the iframe.

You could try below other approaches to resolve the issue:

1)Instead of iframe try to use a WebView component which will provide you more control and flexibility.

2)Open the authentication URL in an external browser window and handle the response in your app.

@page "/login" <button @onclick="AuthenticateWithUaePass">Login with UAE Pass</button> @code { private void AuthenticateWithUaePass() { var authUrl = "https://stg-id.uaepass.ae/idshub/authorize?response_type=code&client_id=sandbox_web_stage&scope=urn:uae:digitalid:profile:general&state=HnlHOJTkTb66Y5H&redirect_uri=https://stg-selfcare.uaepass.ae&acr_values=urn:safelayer:tws:policies:authentication:level:low"; // Open the URL in an external browser Browser.OpenAsync(authUrl, BrowserLaunchMode.SystemPreferred); } }

3)Implement a custom URL scheme for your app that UAE Pass can redirect back to after authentication.

4)Redirect users to the authentication page and handle the response server-side.
Raju Gadda 66 Reputation points

2023-12-01T10:42:24.86+00:00
Thanks for reply @Jalp Panchal ,

Scenario 1: UAE Pass App Not Installed:

I have tried and Successfully implemented authentication using Maui Web Authenticator and navigating to the dashboard.

var authResult = await WebAuthenticator.AuthenticateAsync ( new Uri("https://stg-id.uaepass.ae/idshub/authorize?response_type=code&client_id=sandbox_web_stage&scope=urn:uae:digitalid:profile:general&state=HnlHOJTkTb66Y5H&redirect_uri=https://stg-selfcare.uaepass.ae&acr_values=urn:safelayer:tws:policies:authentication:level:low"), new Uri("https://patientmobile/?code="));

Scenario 2: UAE Pass App Installed:

Authorization call:

https://stg-id.uaepass.ae/idshub/authorize?response_type=code&client_id={client_id}&scope=urn:uae:digitalid:profile:general&state=HnlHOJTkTb66Y5H&redirect_uri={redirect_uri}&acr_values=urn:digitalid:authentication:flow:mobileondevice

I need to Monitor the webview for UAEPASS deep linking url as below:

uaepass://digitalid-users-ids/signatures/capTPqaTB648aqBdXHkL?successurl=https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dsuccess%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage&failureurl=https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dfailure%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

Save the success and failure urls in different variables

Successvar1: https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dsuccess%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

failurevar2: https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dfailure%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

Change uaepass to uaepassstg

uaepassqa://digitalid-users-ids/signatures/capTPqaTB648aqBdXHkL?successurl=https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dsuccess%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage&failureurl=https%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dfailure%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

Change the success and failureurl as below.

uaepassstg://digitalid-users-ids/signatures/capTPqaTB648aqBdXHkL?successurl=dds%3A%2F%2Fuaedds.com%3Furl%3Dhttps%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dsuccess%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage&failureurl=dds%3A%2F%2Fuaedds.com%3Furl%3Dhttps%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dfailure%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

SP will receive call back from uaepass.

dds%3A%2F%2Fuaedds.com%3Furl%3Dhttps%3A%2F%2Fqa-ids.uaepass.ae%2Fauthenticationendpoint%2FmobileWaiting.jsp%3Fstatus%3Dsuccess%26sessionDataKey%3D5c406d59-40af-4328-841b-25cfaf41c7ee%26relyingParty%3Duaedds_mob_stage

Need guidance on monitoring web navigation URLs during authentication when the UAE Pass app is installed.
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator

2023-12-05T21:16:26.4033333+00:00

to handle custom protocol (or any link) see:

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.webview.maui.blazorwebview.urlloading?view=net-maui-8.0

1 answer

Your answer

Anonymous

2023-12-01T10:00:00.9533333+00:00

The error you are facing is related to the security or the CORS related which is blocking the content being loaded from the iframe.

You could try below other approaches to resolve the issue:

1)Instead of iframe try to use a WebView component which will provide you more control and flexibility.

2)Open the authentication URL in an external browser window and handle the response in your app.

@page "/login" <button @onclick="AuthenticateWithUaePass">Login with UAE Pass</button> @code { private void AuthenticateWithUaePass() { var authUrl = "https://stg-id.uaepass.ae/idshub/authorize?response_type=code&client_id=sandbox_web_stage&scope=urn:uae:digitalid:profile:general&state=HnlHOJTkTb66Y5H&redirect_uri=https://stg-selfcare.uaepass.ae&acr_values=urn:safelayer:tws:policies:authentication:level:low"; // Open the URL in an external browser Browser.OpenAsync(authUrl, BrowserLaunchMode.SystemPreferred); } }

3)Implement a custom URL scheme for your app that UAE Pass can redirect back to after authentication.

4)Redirect users to the authentication page and handle the response server-side.
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator

2023-12-05T21:16:26.4033333+00:00

to handle custom protocol (or any link) see:

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.webview.maui.blazorwebview.urlloading?view=net-maui-8.0

Answer 1

Bruce (SqlWork.com) 77,926 Volunteer Moderator

Most oauth providers no longer support iframes. Typically the Maui app would create a new webview to host the login. To do want you want, you will need to write native Maui code.

Share via

How to Monitoring and Navigating URLs in Blazor Maui with Social Authentication

1 answer

Your answer