Giter VIP home page Giter VIP logo

ng-boot-oauth's Introduction

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

ng-boot-oauth's People

Contributors

qihaiyan avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.