{"id":22268078,"url":"https://github.com/curityio/angular-assisted-token-website","last_synced_at":"2025-07-28T12:30:52.728Z","repository":{"id":29124247,"uuid":"114628656","full_name":"curityio/angular-assisted-token-website","owner":"curityio","description":"Example Angular SPA that implements OpenID Connect using the assisted token flow","archived":false,"fork":false,"pushed_at":"2024-11-07T09:11:47.000Z","size":3369,"stargazers_count":6,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-07T09:35:12.584Z","etag":null,"topics":["angular","assisted-token","code-example","oauth2","openid-connect","spa"],"latest_commit_sha":null,"homepage":"https://curity.io/resources/learn/angular-assisted-token-website/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/curityio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-18T10:38:58.000Z","updated_at":"2024-11-07T09:11:09.000Z","dependencies_parsed_at":"2024-03-29T09:53:20.507Z","dependency_job_id":null,"html_url":"https://github.com/curityio/angular-assisted-token-website","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Fangular-assisted-token-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Fangular-assisted-token-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Fangular-assisted-token-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Fangular-assisted-token-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curityio","download_url":"https://codeload.github.com/curityio/angular-assisted-token-website/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227905532,"owners_count":17837906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","assisted-token","code-example","oauth2","openid-connect","spa"],"created_at":"2024-12-03T11:11:01.184Z","updated_at":"2025-07-28T12:30:52.720Z","avatar_url":"https://github.com/curityio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Assisted Token Example\n\n[![Quality](https://img.shields.io/badge/quality-demo-red)](https://curity.io/resources/code-examples/status/)\n[![Availability](https://img.shields.io/badge/availability-source-blue)](https://curity.io/resources/code-examples/status/)\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.21.\n\n## Quick Start\n\nIn this example, an API call is made using access token received from a Curity server after authentication using the \"assisted token flow\". The client uses the Angular framework and shows how to use this development tool to perform the assisted token flow. For that, it calls a RESTful API that is hosted in a separate node server. To start both, simply invoke the following command:\n\n```nodemon\nnpm start\n```\n\nThen, navigate to http://localhost:4200 in a web browser.\n\nYou can make changes to the Angular single-page application (SPA) to perform your own experimentation. If you do, the changes you make to the app's source files will automatically reload. If you change the API that the client invokes, you do not need to start the node API server. To do this, run `ng serve` instead of `npm start`. If you want to start only the API, you can do so with the command `node server/server.js`.\n\n```nodemon\nnpm start\n```\n\n## The Curity Identity Server Configuration\n\nIn order to run this example you need to setup some configurations in the Curity Identity Server. The easiest way is to [download and install the sample configuration](https://developer.curity.io/release/8.5.3/configuration-samples) from the Curity developer portal. This sample configuration already has an authentication profile and an OAuth profile that can be used with this example. The OAuth profile also has a client app configured that can be used -- `client-assisted-example`.\n\nIf you are not using the sample configuration, then you need to make sure the following configuration changes are made before you use this example.\n\n1. Login into the `Admin UI` and make sure that you have uploaded a valid license under `System -\u003e General`.\n\n\n   ![image](./docs/images/license.png)\n   \n2. Go to `Token Service` profile and make sure that at least `Implicit Flow` and `Assisted Token` are enabled on the `Client Settings` page of that profile.\n\n\n   ![image](./docs/images/profile-capabilities.png)\n\n3. Go to the `Clients` page of the profile and create a client called `client-assisted-example`.\n\n\n   ![image](./docs/images/clients.jpg)\n\n4. This client (accessible from `Token Service -\u003e Clients -\u003e client-assisted-example -\u003e Edit Client`) should have `Implicit Flow` and `Assisted Token` capabilities selected under the `Capabilities` section.\n\n\n   ![image](./docs/images/client-capabilities.jpg)\n\n\n5. Navigate to `OAuth/OpenID Settings` section make sure to add `openid` scope.\n\n![image](docs/images/openid-scope.jpg)\n\n6. Update the `Redirect URIs` and `Allowed Origins` settings for the `client-assisted-example` Client. The redirect URI should have `http://localhost:4200`. This is the URL where the Angular CLI will be hosting the SPA. The allowed origin should be the same or, for testing purposes, you can also use `*`.\n   \n\n   ![image](./docs/images/client-application-settings-1.jpg)\n\n   ![image](./docs/images/client-application-settings-2.jpg)\n\n7. `Commit` the changes and you are all setup.\n\nIf you compare the final config with the sample config, then you will find the following salient differences.\n\n```xml\n\u003cclient-store\u003e\n    \u003cconfig-backed\u003e\n        \u003cclient\u003e\n            \u003cid\u003eclient-assisted-example\u003c/id\u003e\n            \u003credirect-uris\u003ehttp://localhost:4200\u003c/redirect-uris\u003e\n            \u003callowed-origins\u003e*\u003c/allowed-origins\u003e\n            \u003ccapabilities\u003e\n                \u003cimplicit/\u003e\n                \u003cassisted-token/\u003e\n            \u003c/capabilities\u003e\n        \u003c/client\u003e\n        \u003c!-- ... --\u003e\n    \u003c/config-backed\u003e\n\u003c/client-store\u003e\n```\n\n## Integrating with an Angular App\n\nTo integrate this example into actual Angular app, you need to copy `AppComponent` (`app.component.html` and `app.component.ts`) into your project and add this component into your app module. The second thing that is needed is to copy the `AuthInterceptor.ts` and `assistant.service.ts` files into your project and add them into your Module providers as shown below.\n\n```typescript\n@NgModule({\n\tdeclarations: [AppComponent],\n\timports: [BrowserModule, HttpClientModule],\n\tproviders: [\n\t\tAssistantService,\n\t\t{\n\t\t\tprovide: HTTP_INTERCEPTORS,\n\t\t\tuseClass: AuthInterceptor,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nYou also need to add `HttpClientModule` in your Module imports as shown in the above code.\n\nThe last thing required is to configure the environment variables like `issuer`, `clientId`, `apiUrl` and `authServerOrigin`. The following is an example of these environment configuration settings (which are similar to those in `src/environments/*.ts`):\n\n```typescript\nexport const environment = {\n\tproduction: false,\n\tissuer: \"https://localhost:8443/\",\n\tclientId: \"client-assisted-example\",\n\tapiUrl: \"http://127.0.0.1:8100\",\n\tauthServerOrigin: \"http://127.0.0.1:8100\",\n\topenIdConfigurationUrl: \"oauth/v2/oauth-anonymous/.well-known/openid-configuration\"\n};\n```\n\n## Building the Sample\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist` directory. Use the `-prod` flag to create a production build.\n\n## More Help with Angular CLI\n\nTo get more help on the Angular CLI, use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n## More Information\n\nFor more information about Curity, its capabilities, and how to use it with Angular and other app development frameworks, visit [developer.curity.io](https://developer.curity.io/). For background information on using Curity for API access, consult the [API integration section of the Curity developer manual](https://support.curity.io/docs/4.5.0/developer-guide/api-integration/overview.html). For additional insights in how to use Curity with microservices and APIs from SPAs, read _[How to Control User Identity within Microservices](http://nordicapis.com/how-to-control-user-identity-within-microservices/)_ on the Nordic APIs blog. You may also be interested in validating tokens sent from the Angular front-end in a gateway like [Apigee](https://developer.curity.io/tutorials/apigee-integration) or [NGINX](https://github.com/curityio/nginx_phantom_token_module).\n\n## Licensing\n\nThis software is copyright (C) 2019 Curity AB. It is open source software that is licensed under the [Apache 2](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurityio%2Fangular-assisted-token-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcurityio%2Fangular-assisted-token-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurityio%2Fangular-assisted-token-website/lists"}