Can I pre-authenticate my Angular Client Application using Identity Server 4 to call my locally hosted .Net Core WebAPI

Question

I have an Angular Client App, which calls a .Net Core WebAPI hosted on the same box. It is authenticated using Identity Server 4 in a separate WebAPI.OAuth application.

My solution goes on a standalone Raspberry Pi Kiosk, so most of the time interaction between the Client App and the WebAPI is on the same box. The WebAPI drives some hardware which the user can interact with.

The reason for using Identity Server 4 is that it is possible to access the WebAPI from another networked location to monitor what is happening with the API.

My Question is: Can I pre-authenticate the local Angular Client App so that the user doesn't have to log in? I need a bit of a steer on my approach to what to look at as Identity Server 4 is vast with many options, and I just need the simplest.

Answer 1

There are quite a few OAuth 2.0 flows that I think you might be able to use here. You can read about all of them, here. Even though the article is from auth0 but IdentityServer 4 supports most (if not all) of these flows.

It seems like you're trying to authenticate the app (or the IoT device on which the app is running) rather than the user itself. In this case, I would recommend the Authorization Code Flow. For this approach, two HTTP Requests would've to be made. First one would look something like:

GET /connect/authorize?
    client_id=client1&
    scope=openid email api1&
    response_type=id_token token&
    redirect_uri=https://myapp/callback&
    state=abc&
    nonce=xyz

Once you've received your auth code, then you can make another request to get your JWT token from the following endpoint.

POST /connect/token
CONTENT-TYPE application/x-www-form-urlencoded

    client_id=client1&
    client_secret=secret&
    grant_type=authorization_code&
    code=hdh922&
    redirect_uri=https://myapp.com/callback

You can read in detail about the Authorize & Token endpoints of IdentityServer 4, here and here.

Answer 2

You can use the resource owner authentication flow which allows you to automatically get a token on behalf of a user.

when your angular app starts it issues an authorization request to your identity server using resource owner password flow and providing the client_id client_secret, username, password and grant_type once you get the access token you can store it locally and reuse it when interacting with you WebAPi. the authorization request would look like

POST /connect/token HTTP/1.1
Host: <identity server host>
Content-Type: application/x-www-form-urlencoded

client_id=<client_id>&client_secret= 
<client_secret>&grant_type=password&username=<username>&password=<password>