This example shows how to build a simple jogging times tracking app with an ASP.NET Core 2.0 backend API and an Angular 5 frontend.

Read Build a Basic CRUD App with ASP.NET Core and Angular to see how this app was created.

Prerequisites: .NET Core 2.0 and Node.js.

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

• Getting started
• Links
• Help
• License

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/okta-angular-aspnetcore-example.git
cd okta-angular-aspnetcore-example

This will download a copy of the project.

You will need to create an OpenID Connect application in Okta to to perform authentication.

Log in to your Okta Developer account (or sign up if you don't have an account) and navigate to Applications > Add Application. Click Single-Page App, click Next, and give the app a name you'll remember.

Change the Base URI to http://localhost:4200, and the login redirect URI to http://localhost:4200/implicit/callback. Click Done.

Set the issuer (authority) in Startup.cs.

Note: The value of {yourOktaDomain} should be something like dev-123456.oktapreview.com. Make sure you don't include -admin in the value!

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
    options.Authority = "https://{yourOktaDomain}.com/oauth2/default";
    options.Audience = "api://default";
});

Set the issuer and copy the clientId of the Okta application into the app.module.ts file:

const config = {
  issuer: 'https://{yourOktaDomain}.oktapreview.com/oauth2/default',
  redirectUri: 'http://localhost:4200/implicit/callback',
  clientId: '{clientId}',
  scope: 'openid profile email'
};

To install all of the dependencies and start the ASP.NET Core 2.0 Web API, run:

cd Backend/Backend
dotnet run

To install all of the dependencies and start the Anguar app, run:

cd Frontend/JoggingDiary
npm install
npm start

Note that in the Frontend/JoggingDiary/src/app/workout.service.ts you need to set the port of the API access point:

private accessPointUrl: string = 'http://localhost:{MyPort}/api/workouts'

This example uses the following libraries provided by Okta:

• Okta Angular SDK

Please post any questions as comments on the blog post, or visit the Okta Developer Forums. You can also email [email protected] if you would like to create a support ticket.

Apache 2.0, see LICENSE.