Skip to content
oauth2 demo with angularjs and springboot
CSS Java JavaScript HTML
Branch: master
Clone or download
Latest commit e6b9432 Mar 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
authserver
gradle/wrapper init Oct 1, 2016
ui-implicit add auth0 login Sep 10, 2017
ui add auth0 login Sep 10, 2017
.gitignore update handlebars.js Mar 11, 2018
.travis.yml
LICENSE Initial commit Sep 30, 2016
README-zh.md Update README-zh.md Oct 15, 2016
README.md Create README.md Jun 10, 2017
gradlew fix .gitignore Oct 15, 2016
gradlew.bat init Oct 1, 2016
settings.gradle add auth client module Oct 2, 2016

README.md

ng-boot-oauth

中文介绍

An oauth2 demo with angularjs and springboot.

Default username is admin, and password is 111111.

1. Features

Modules

The project contains 3 modules

  • authserver
  • ui (A client using oauth2 code flow)
  • ui-implicit (A client using oauth2 implicit flow, with a standalone frontend module)

Frontend

  • ES6
  • AngularJs 1.x
  • webpack dev server reload (by inserting a web-dev-server script into index.html when the environment is set to DEV )
<% if (webpackConfig.metadata.ENV === 'dev') { %>
<!-- webpack dev server reload -->
<script src="http://<%= webpackConfig.metadata.host %>:<%= webpackConfig.metadata.port %>/webpack-dev-server.js"></script>
<!-- end webpack dev server reload -->
<% } %>

Backend

  • Gradle Build Tool
  • Spring Boot
  • Spring security Oauth2 integration
  • Thymeleaf server-side Java template engine

2. RUNNING IN DEVELOPMENT MODE

Note that ui module and ui-implicit module can't be running at the same time, because they use the same port 8080.

GET THE CODE

git clone https://github.com/qihaiyan/ng-boot-oauth.git
cd ng-boot-oauth

RUNNING OAuth2 Server

cd authserver
./gradlew bootRun

RUNNING ui MODULE

cd ui
./gradlew bootRun

Now we can visit the app at http://localhost:8080

RUNNING ui-implicit MODULE

  • RUNNING BACKEND SERVER
cd ui-implicit
./gradlew bootRun

If it's the first time to run ui-implicit module, install dependencies at first.

cd ui-implicit
npm install
  • RUNNING DEV SERVER
cd ui-implicit
npm run dev
  • CORS

We use the following configuration for dev-server in webpack.config.js to avoid the CORS error. And the proxies for api calls can also be configured here.

devServer: {
            port: 3000,
            contentBase: './src/main/frontend',
            headers: {
                'Access-Control-Allow-Origin': 'http://localhost:8080',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'authorization',
                'Access-Control-Allow-Methods': 'GET'
            },
            // proxy: {
            //     '/user': 'http://localhost:8080/'
            // },
        },

Now we can visit the app at http://localhost:8080

3. RUNNING IN PRODUCTION MODE

Compile and package project:

gradle build

Then run auth server:

cd authserver/
java -jar ./build/libs/ng-boot-oauth-0.0.1.jar

Then run ui server:

cd ui/
java -jar ./build/libs/ng-boot-oauth-ui-0.0.1.jar

Or run ui-implicit server:

cd ui-implicit/
java -jar ./build/libs/ng-boot-oauth-ui-implicit-0.0.1.jar

Now we can visit the app at http://localhost:8080

You can’t perform that action at this time.