# Sample Angular Application

This code sample demonstrates how to obtain an Access [Token](/guides/cloud-apis/create-first-app/concepts) using the SLB Authenticator (SAuth) service for a public client. You will use Authorization Code Flow (ACF) with a [Proof Key for Code Exchange (PKCE)](https://tools.ietf.org/html/rfc7636), the Angular Library for OpenID Connect, and [OAuth2](/guides/cloud-apis/create-first-app/concepts) certified by the [OpenID foundation](https://openid.net/foundation/).

## Code Sample

For this sample, use the "**Angular Lib for OpenID Connect & OAuth2**" from [GitHub](https://github.com/damienbod/angular-auth-oidc-client).

## Pre-requisites

* Access to the [SLB Developer Portal](https://developer.delfi.slb.com/).
* You must be a member of a Team in the SLB Developer Portal.
* Install [NodeJS v18.15.0](https://nodejs.org/en/download) or later.


## Installation

1. Open your preferred IDE.
2. Open [Angular-auth-oidc-client](https://github.com/damienbod/angular-auth-oidc-client).
3. Copy the GitHub link and clone it into a local directory.

```
Git clone https://github.com/damienbod/angular-auth-oidc-client.git
```
4. Navigate to `angular-auth-oidc-client-main/projects/sample-code-flow-refresh-tokens/src/app/`.
5. Edit the configuration file, `auth-config.module.ts` and make the following changes:
a.  Set "Authority" to `https://csi.slb.com/v2` for the SLB Authenticator service.
b.  Set "clientId" to the client ID from your single-page application client. Refer to [create client for single page apps](/guides/cloud-apis/developer-portal/create-clients#create-clients-for-single-page-apps) to know details on how to create client.
c.	Make sure the scope is 'openid' and the responseType is 'code'.
d.	Save `auth-config.module.ts`.


## Run the code sample

1. In the terminal, run the following:

```
npm install
```

```
npm run build -lib
```

```
npm start
```
2. Browse to `https://localhost:4204/`.

![Python-ACF](/assets/angularwebpage-login.19cbe887dc56e445f905d8c3691a3f8144d914161b34bbfce888708b7eb2dd1f.ab5388e2.jpeg)
3. Click *continue to localhost*.

![Python-ACF](/assets/angularwebpage-configuration.ec139c7ac04f977117495b8635f7ba50387fa8cfe3f711fbd8aed0aa088de33d.ab5388e2.jpeg)
4. Click **Log in**.
The window shows your user data and the configuration.

![Python-ACF](/assets/angularwebpage-userdata.7ecd6c81b4a6e8e40b481e71c1544810ffdedddadc36e0344a4c17c40ea12d91.ab5388e2.jpeg)


## Conclusion

With this code sample, you used the angular library to authenticate and generate a token for a public client using ACF with PCKE SLB Authenticator services.

## Disclaimer

These instructions work with Damien Bod's OIDC sample as of April 1st, 2023, but this public sample is constantly being updated. The detailed instructions are provided as a convenience for new web developers and are only to be used as a guide. The documentation in Damien Bod's OIDC client take precedence.

## Additional resources

[Getting started with AngularJS](https://docs.angularjs.org/misc/started#!)

## Recommended further Reading

- [User context](/solutions/ccm/tutorial/user-context-service) in SLB Digital platform.
- [Secret management](/solutions/sauth/tutorial/secret-management-service) on SLB Digital platform.
- [API Maturity](/guides/cloud-apis/references/api-lifecycle) of cloud APIs.
- Refer to the tutorial of various solutions (such as [FDPlan](/solutions/fdplan/tutorial/about), [DrillPlan](/solutions/drillplan/docs/tutorials/tutorial), [MPDF](/solutions/core-service/tutorial/osdu-core-services-about) etc.) to learn more about their extensibility and how to integrate with APIs offered by these solutions into your application.