时空索引>> okta-angular-bootstrap-example>> 返回
项目作者： oktadeveloper

项目描述 ：
Angular with Bootstrap Example
高级语言： TypeScript
项目地址: git://github.com/oktadeveloper/okta-angular-bootstrap-example.git
创建时间： 2020-02-24T16:45:35Z
项目社区：https://github.com/oktadeveloper/okta-angular-bootstrap-example
开源协议：Apache License 2.0
下载


Angular 9.0 + Bootstrap

This example app shows how to add Bootstrap to an Angular 9 app, configure validation, and implement searchable, sortable, and pageable data. Please read Build Beautiful Angular Apps with Bootstrap to see how this app was created. This blog post is the 2nd in a series. Other blog posts in this series include:

Prerequisites:

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

To install this example application, run the following commands:

  1. git clone https://github.com/oktadeveloper/okta-angular-bootstrap-example.git
  2. cd okta-angular-bootstrap-example

This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.

Spring Boot Configuration

To create a new OIDC app for Spring Boot on Okta:

  1. Log in to your developer account, navigate to Applications, and click on Add Application.
  2. Select Web and click Next.
  3. Give the application a name and add http://localhost:8080/login/oauth2/code/okta as a login redirect URI.
  4. Click Done.

Create an okta.env file in the notes-api directory and copy your settings into it.

  1. export OKTA_OAUTH2_ISSUER=https://{yourOktaDomain}/oauth2/default
  2. export OKTA_OAUTH2_CLIENT_ID={yourClientId}
  3. export OKTA_OAUTH2_CLIENT_SECRET={yourClientSecret}

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

Start your Spring Boot app by navigating to the notes-api directory, sourcing this file, and starting your app.

  1. cd notes-api
  2. source okta.env
  3. ./gradlew bootRun

Angular Configuration

To create a new OIDC app for Angular on Okta:

  1. Log in to your developer account, navigate to Applications, and click on Add Application.
  2. Select Single-Page App and click Next.
  3. Give the application a name and set the login redirect URI to http://localhost:4200/callback
  4. Click Done.

Copy the issuer and clientId into notes/src/app/auth-routing.module.ts.

  1. const oktaConfig = {
  2.   issuer: 'https://{yourOktaDomain}/oauth2/default',
  3.   redirectUri: window.location.origin + '/callback',
  4.   clientId: '{yourClientId}',
  5.   pkce: true
  6. };

Navigate into the notes folder and run:

  1. npm install && npm start

Open your browser to http://localhost:4200, log in, and create notes to your hearts content!

TIP: If you get a CORS error, you’ll need to add http://localhost:4200 as a trusted origin on Okta (API > Trusted Origins).

This example uses the following open source libraries from Okta:

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.