In this article, I want to tell you how you can make authentication by using third-party service authentication such as Okta. Actually, it's super easy, and I'll show a detailed tutorial.
Preconditions
It would be fine if you create a new ASP.NET Core MVC project. Anything else no need from your side.
dotnet new mvc -n OktaAuthSample
Registration application
Before using Okta, you need to register an account if you don't have it, otherwise log in. For people who don't have an account go to this link https://developer.okta.com/signup/.
After you go by the link, you'll see different plans, you need a free plan.
I prefer GitHub authentication, but you can choose a different way.
Further, you need to select Other, which means the individual using.
Next step, you'll be redirected to the main page where you need to create a new application.
You need to select the type of application. We created ASP.NET MVC project, which means we need to select Regular Web Applications.
Here just select ASP.NET Core
You'll be redirected to the Application page and you need to go to the Settings tab. You'll see the secret data of your application.
Implementation
Here we'll begin implementing the application and create login and logout endpoints and also an endpoint for checking authenticated users.
For the next work, you need to install this package:
Next, go to the appsettings.json file an paste this code, where you need replace to your ClientId and Domain values.
"Auth0": {
"Domain": "*********************.auth0.com",
"ClientId": "******************************"
},
And now go to the Program.cs and paste this code:
builder.Services.AddAuth0WebAppAuthentication(options =>
{
options.Domain = builder.Configuration["Auth0:Domain"];
options.ClientId = builder.Configuration["Auth0:ClientId"];
});
And don't forget to add use authentication:
app.UseAuthentication();
Further you need to create a new controller in the Controllers folder:
public class AccountController : Controller
{
public async Task Login(string returnUrl = "/")
{
var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
.WithRedirectUri(returnUrl)
.Build();
await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
var usr = User.Claims.FirstOrDefault(c => c.Type == "name");
}
[Authorize]
public IActionResult Profile()
{
return View(new
{
Name = User.Identity.Name,
EmailAddress = !string.IsNullOrEmpty(User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)
?.Value)
? User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)
?.Value
: User.Claims.FirstOrDefault(c => c.Type == "nickname")
?.Value,
ProfileImage = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value
});
}
[Authorize]
public async Task Logout()
{
var authenticationProperties = new LogoutAuthenticationPropertiesBuilder()
.WithRedirectUri(Url.Action("Index", "Home"))
.Build();
await HttpContext.SignOutAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
}
}
As you are able to see, we created one opened endpoint for login and two closed for enter to the profile and logout. The Profile action will highlight the error that the view doesn't exist. You need to go to the Views folder, create the Account folder, and create the Profile.cshtml file.
@{
ViewData["Title"] = "Profile Page";
}
<div class="text-center">
<h1 class="display-4">Welcome @Model.Name</h1>
<img style="align-content: center" src="@Model.ProfileImage"/>
<p style="text-align: center">@Model.EmailAddress</p>
</div>
Actually, we do not need to write code anymore, but I don't want to use a REST client and I decided to implement a login layout. Go to the Views => Shared and create _LoginPatrial.cshtml file:
<ul class="navbar-nav">
@if (User.Claims.FirstOrDefault(c => c.Type == "name") != null)
{
<li class="nav-item">
<img style="width: 30px; height: 30px; margin-top: 5px" src="@User.Claims.FirstOrDefault(c => c.Type == "picture").Value"/>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Profile">Hello @User.Identity?.Name!</a>
</li>
<li class="nav-item">
<form class="form-inline" asp-area="" asp-controller="Account" asp-action="Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>
</li>
}
</ul>
And don't forget update _Layout.cshtml:
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial"/>
</div>
Running and settings
If everything is made correct, your application will run. However if you'll click to log in, you'll get an error like this:
It is caused by reason security protection. You need to set a callback that returns after successful authentication. However, there are some pitfalls. In the settings of your application, you should find the Application URIs block and Allowed Callback URLs area. You need to set a URL that ends with the callback key:
For logout set base URL:
As a bonus, if you decided to change Application Login URI and want to test it locally, you need the necessary set the real IP address of localhost, since Okta doesn't know anything about localhost and it is replaced automatically on your PC form 127.0.0.1 to localhost. For this reason, you need set IP.
And now let's check this out. Run the application and you'll see the start page:
Try to log in and you'll be redirected to the login page:
I entered with a Google account, you can choose different ways. If everything is OK, you'll see this:
If you click by name you'll go to the profile page.
And let's check out the logout, you'll be redirected to the main page and the profile won't be accessible.
If you'll try to get to the "Account/Profile" URI, you'll be suggested log in:
The source code you can find by link and sure make subscribes and thank you for reading. I hope it'll be useful for you. Happy coding and see you the next week.
Top comments (0)