added more advanced login flow for example

Muljin · Jul 21, 2023 · 9a782dc · 9a782dc
1 parent 7210578
commit 9a782dc
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/example/Muljin.B2CMagicLink.Example/Properties/launchSettings.json b/example/Muljin.B2CMagicLink.Example/Properties/launchSettings.json
@@ -23,7 +23,7 @@
       "commandName": "Project",
       "launchBrowser": true,
       "launchUrl": "swagger",
-      "applicationUrl": "https://localhost:7004;http://localhost:5066",
+      "applicationUrl": "https://localhost:7005;http://localhost:5066",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

diff --git a/example/Muljin.B2CMagicLink.Example/Services/EmailService.cs b/example/Muljin.B2CMagicLink.Example/Services/EmailService.cs
@@ -9,14 +9,16 @@ namespace Muljin.B2CMagicLink.Example.Services
 {
 	public class EmailService
 	{
-		private static string magicLinkFlowUrl = "https://Muljin.b2clogin.com/Muljin.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1A_SIGNIN_WITH_EMAIL&client_id=64257a7a-3240-4021-8860-45af0bbd6734&nonce=defaultNonce&redirect_uri={0}&scope=openid&response_type=code";
+		//private static string magicLinkFlowUrl = "https://Muljin.b2clogin.com/Muljin.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1A_SIGNIN_WITH_EMAIL&client_id=64257a7a-3240-4021-8860-45af0bbd6734&nonce=defaultNonce&redirect_uri={0}&scope=openid&response_type=code";
+
+		private readonly string magicLinkFlowUrl;
 		private readonly SendGridOptions _sendGridOptions;
 
         public EmailService(IOptions<SendGridOptions> sendGridOptions,
 			IOptions<AzureAdB2cOptions> azureAdB2cOptions)
 		{
 			_sendGridOptions = sendGridOptions.Value ?? throw new ArgumentNullException(nameof(sendGridOptions));
-			magicLinkFlowUrl = magicLinkFlowUrl.Replace("{0}", HttpUtility.HtmlEncode(azureAdB2cOptions.Value.RedirectUrl));
+			magicLinkFlowUrl = $"{azureAdB2cOptions.Value.RedirectUrl}";
 		}
 
 		public async Task SendMagicLinkAsync(string email, string token)
@@ -28,9 +30,9 @@ public async Task SendMagicLinkAsync(string email, string token)
 			var to = new EmailAddress(email);
 
 
-			var content = $"To login, goto {magicLinkFlowUrl}&id_token_hint={token}";
+			var content = $"To login, goto {magicLinkFlowUrl}?id_token_hint={token}";
 
-			var htmlContent = $"To login, <a href=\"{magicLinkFlowUrl}&id_token_hint={token}\"> click here </a>";
+			var htmlContent = $"To login, <a href=\"{magicLinkFlowUrl}?id_token_hint={token}\"> click here </a>";
 
             var msg = MailHelper.CreateSingleEmail(from, to, "Your Muljin Magic Link Example login link", content, htmlContent);
 

diff --git a/example/Muljin.B2CMagicLink.Example/appsettings.Development.json b/example/Muljin.B2CMagicLink.Example/appsettings.Development.json
@@ -6,7 +6,7 @@
     }
   },
   "AzureAdB2c": {
-    "RedirectUrl": "https://localhost:7004/authresult.html"
+    "RedirectUrl": "https://localhost:7005/authresult.html"
   }
 }
 
diff --git a/example/Muljin.B2CMagicLink.Example/wwwroot/authresult.html b/example/Muljin.B2CMagicLink.Example/wwwroot/authresult.html
@@ -16,14 +16,47 @@ <h1>Auth results:</h1>
         auth: {
             clientId: '64257a7a-3240-4021-8860-45af0bbd6734',
             authority: 'https://muljin.b2clogin.com/tfp/14182de3-6b9b-4138-a0fa-e4107db293e5/B2C_1A_SIGNIN_WITH_EMAIL',
-            knownAuthorities: ['https://muljin.b2clogin.com/tfp/14182de3-6b9b-4138-a0fa-e4107db293e5/B2C_1A_SIGNIN_WITH_EMAIL']
+            knownAuthorities: ['https://muljin.b2clogin.com/']
         }
     };
 
     function loadMsal(){
         muljin.output = document.querySelector('#output');
         muljin.msalInstance = new msal.PublicClientApplication(msalConfig);
-        muljin.msalInstance.initialize().then(checkForCode);
+
+        muljin.msalInstance.initialize().then(handleRedirect);
+    }
+
+    function handleRedirect(){
+        muljin.msalInstance
+            .handleRedirectPromise()
+            .then((tokenResponse) => {
+                // Handle redirect response
+                console.dir(tokenResponse);
+                muljin.output.innerHTML = tokenResponse.idToken;
+            })
+            .catch((error) => {
+                console.log("Error:");
+                console.dir(error);
+                checkForIdTokenHint();
+            });
+    }
+
+    function checkForIdTokenHint(){
+        muljin.output.innerHTML = "Checking for code...";
+        var idTokenHint = window.location.search.split('id_token_hint=')[1];
+        if(idTokenHint==null || idTokenHint == undefined || typeof idTokenHint != 'string')
+        {
+            muljin.output.innerHTML = "No id_token_hint found.";
+            checkForCode();
+            return;
+        }
+
+        muljin.output.innerHTML = "ID token found, redirecting to login...";
+        muljin.msalInstance.loginRedirect({scopes: ['openid'], 
+            prompt: 'none', 
+            redirectUri: "https://" + window.location.host + '/authresult.html', 
+            extraQueryParameters: {'id_token_hint': idTokenHint }});
     }
 
     function checkForCode(){
@@ -36,11 +69,21 @@ <h1>Auth results:</h1>
         }
         else{
             muljin.output.innerHTML = "No code found";
+            checkForError();
+        }
+    }
+
+    function checkForError(){
+        var error = window.location.hash.split('error=')[1];
+        if(error != null && error != undefined){
+            muljin.output.innerHTML = unescape(error);
         }
+
     }
 
     function exchangeCodeForToken(code){
-        muljin.msalInstance.acquireTokenByCode({code: code, scopes: ['openid'], redirectUri: "https://jwt.ms"}).then(function(response){
+        var redirecturi = window.location.host + "/authresult.html";
+        muljin.msalInstance.acquireTokenByCode({code: code, codeVerifier:123, scopes: ['openid'], redirectUri: redirecturi}).then(function(response){
             console.log(response);
             muljin.output.innerHTML = "Token received: " + response.accessToken;
         })