Implementing OAuth2 in Blazor Web App

SDKs & Tools .NET
1

Hello, I am trying to build a Blazor web app that uses Box’s API, and I’m struggling to implement OAuth2 authentication. I followed the instructions/documentation listed here: https://developer.box.com/guides/authentication/oauth2/with-sdk/ , but I’m having issues with obtaining the authorization code once I’m redirected to my app. Below is the code I have so far; it works as expected until I reach that final step. Any help will be greatly appreciated.

-Code-

private async Task OAuth2()
{
	string authorizationUrl = "https://account.box.com/api/oauth2/authorize?client_id=" + clientID + "&response_type=code";

	// Configure SDK
	var config = new BoxConfig(clientID, clientSecret, new Uri(redirectUrl));
	var sdk = new BoxClient(config);

	//Redirect user
	RedirectToAuthUrl(authorizationUrl);

	// Exchange code - TODO:  Get auth code to exchange for access token; check after redirect.
	var session = await sdk.Auth.AuthenticateAsync("[CODE]");
	var client = new BoxClient(config, session);
}

private void RedirectToAuthUrl(string authUrl)
{
	Navigation.NavigateTo(authUrl);
}
2

Hi @OpticSand, welcome to the forum!

I’m not familiar with the .NET SDKs, and I can’t even identify which SDK you are using.

Although the documentation says it is optional, would you mind doing a test where you include your redirect url inn your authorization url?

Also make sure it is the same as specified in the application configurations in the developer console.

Perhaps these snippets from the SDKs can help you track this down:

Let us know if this helps

3

Thanks for your response. I’m using the Box.V2 .NET SDK if that helps. Luckily, I came across a solution that ended up working for OAuth2; I’ll post what I have here in case it helps someone else.

Note: This is in the context of a Blazor web application, and I am only attaching the relevant code.

I have the following variables setup in a Global class since I need to access BoxConfig and BoxClient in different components:

using Box.V2.Config;

namespace App
{
	public static class Global
	{
		private static string clientID = // your client ID;
		private static string clientSecret = // your client secret;
		private static Uri redirectUrl = new Uri() // your app link (ex. "http://localhost");
		public static BoxConfig config = new BoxConfig(clientID, clientSecret, redirectUrl);
		public static BoxClient client = new BoxClient(config); //This could be placed in the main page.
	}
}

On the login page I have the following code (the method is attached to a button). This is how the user authenticates through Box.:

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation

@code 
{
	private void InitializeBoxAuth()
	{
		Navigation.NavigateTo(Global.config.AuthCodeUri.ToString());
	}
}

After redirection to the main page, the following is used to extract and exchange the authorization code for the access key. After that, I’m able to make API calls through the BoxClient.

@page "/main"
@rendermode InteractiveServer
@inject NavigationManager nav

@code 
{
	private async void AuthCallbackAsync()
	{
		var url = nav.ToAbsoluteUri(nav.Uri);
		string authCode = "";

		if (QueryHelpers.ParseQuery(url.Query).TryGetValue("code", out var code))
		{
			authCode = code;
		}

		await Global.client.Auth.AuthenticateAsync(authCode);
		Console.WriteLine("AuthCallback succeeded.");
	}
}
4

This is great @OpticSand !

My only additional recommendation is for you to add the state to the authorization URL, and then check if it is the same when you get the code back.

For example, a sample authorization url:

https://account.box.com/api/oauth2/authorize
?client_id=w4...d9
&response_type=code
&redirect_uri=http%3A%2F%2F127.0.0.1%3A5000%2Fcallback
&state=02296f2a-da7f-4853-8035-5d998493ea1d

And the callback to my app:

http://127.0.0.1:5000/callback
?state=02296f2a-da7f-4853-8035-5d998493ea1d
&code=Gf...79)

The state must match, and it’s purpose is to avoid CSRF attacks.

Cheers

5

@rbarbosa much appreciated! Are you generating the state yourself? If not, how would I obtain it/one to include in the authorization url?

6

I typically use a UUID v4, but any random string, hard to guess, hard to predict will work.

Cheers