Skip to content

Upgrade to Angular 6 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 8, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix README
  • Loading branch information
Matt Raible committed May 7, 2018
commit 1d5d37421e4f447cf3cfad7eefddbf5de4fb3741
84 changes: 71 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,85 @@
# NgDemo
# Angular Authentication with OpenID Connect and Okta

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
This example app shows how to use [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) and the
[Okta Auth SDK](https://github.com/okta/okta-auth-js) to perform authentication in an Angular app.

## Development server
Please read [Angular Authentication with OpenID Connect and Okta in 20 Minutes](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc) to learn how to create this application.

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.5.

## Code scaffolding
> [Okta](https://developer.okta.com/) 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.

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
* [Getting Started](#getting-started)
* [Links](#links)
* [Help](#help)
* [License](#license)

## Build
## Getting Started

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
To install this example application, run the following commands:

## Running unit tests
```bash
git clone https://github.com/oktadeveloper/okta-angular-openid-connect-example.git
cd okta-angular-openid-connect-example
npm install
```

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
This will get a copy of the project installed locally, install all of its dependencies and start the app.

## Running end-to-end tests
### Create an OIDC App in Okta

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
You will need to [create an OIDC App in Okta](https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc#create-an-openid-connect-app-in-okta) to get your values to perform authentication.

## Further help
OpenID Connect is built on top of the OAuth 2.0 protocol. It allows clients to verify the identity of the user and, as well as to obtain their basic profile information. To learn more, see [http://openid.net/connect](http://openid.net/connect/).

Login to your Okta account, or [create one](https://developer.okta.com/signup/) if you don't have one. Navigate to **Applications** and click on the **Add Application** button. Select **SPA** and click **Next**. On the next page, specify `http://localhost:4200` as a Base URI, Login redirect URI, and Logout redirect URI. Click **Done** and copy the generated `Client ID`.

In `src/app/app.component.ts`, set the `issuer` and paste your `clientId`.

```typescript
constructor(private oauthService: OAuthService) {
this.oauthService.redirectUri = window.location.origin;
this.oauthService.clientId = '{clientId}';
this.oauthService.scope = 'openid profile email';
this.oauthService.issuer = 'https://{yourOktaDomain}.com/oauth2/default';
this.oauthService.tokenValidationHandler = new JwksValidationHandler();

// Load Discovery Document and then try to login the user
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
```

You'll also need to update the `url` in `src/app/shared/auth/okta.auth.wrapper.ts`.

```typescript
constructor(private oauthService: OAuthService) {
this.authClient = new OktaAuth({
url: 'https://{yourOktaDomain}.com',
issuer: 'default'
});
}
```

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

After making these changes, you should be able to start the app (using `ng serve) and log in with your credentials at `http://localhost:4200`.

## Links

This example uses the following libraries provided by Okta:

* [Okta Auth SDK](https://github.com/okta/okta-auth-js)

It also uses the following library provided by [Manfred Steyer](https://github.com/manfredsteyer):

* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)

## Help

Please post any questions as comments on the [blog post](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email [email protected] if would like to create a support ticket. You can also hit me up on Twitter [@mraible](https://twitter.com/mraible).

To 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).

## License

Apache 2.0, see [LICENSE](LICENSE).