Giter Club home page Giter Club logo

angular-login's Introduction

Angular JS Auth Example App

This is an example app for an Angular JS Authentification mechanism, including server side set-up.

While very simple in set up, the goal is here to show a working implementation of Authentification with Angular.

Server side:

- a nodejs / express server
- mongoDB and mongoose ORM for data persistance
- redis (used as a session store)
- Angular-Ui twitter bootstrap for styling

So you need to have those installed on your machine (Angular-ui does not require any action on your side)

##Directory The repository includes the following files:

app.js              --> Express app
package.json        --> for npm
config/
  database.js       --> database configuration. Edit to match your local setup.
model/
  User.js           --> Mongoose user model definition.
public/
  css/              --> Css files. Include twitter bootstrap for some styling.
  images/           --> Include icons for bootstrap.
  js/
    libs/           --> Angular, Angular-bootstrap libs
    app.js          --> Routing, global variables and $rootScope event listener
    auth-service    --> The actual authentification angular service. 
                                 Uses the angular-ui bootstrap $dialog directive.
    controllers.js  --> Angular controllers.
    directives.js   --> Angular directives.
    filters.js      --> Angular filters.
    services.js     --> Angular services.
routes/
  api.js            --> Group the api logic in one place.
  users.js          --> The actual User API.
  index.js          --> route index for express templates.
  sessions.js       --> handle session logic on the server side
views/
  index.jade        --> Application index. Include the script tags linking to Angular libs
  layout.jade       --> Application layout.
  partials/         --> Angular partials

How to Use

Install

  • Clone the repo into a folder of your choice.
  • Make sure that node and at least mongoDB are installed. Leave them to the default configuration.
  • Run npm install to install the packages. All dependencies are listed in the package.json.
  • Run node app.js
  • Navigate to localhost:3000/home. A login modal should appear asking to login / register.

Redis Session Store

Express (through Connect) comes with its own in-memory session store. This configuration is not to be used in production! (As Connect will remind you if you try to!)

Therefore, and because it really is not difficult to set up, the default configuration includes Redis as the default session store. To use the Express session store, in app.js:

  • comment:

    app.use(express.session({ store: new RedisStore({host:'127.0.0.1', port:6379}), secret: 'secret' }));
    
  • uncomment:

    //app.use(express.session({secret: 'secret'}));
    

Basic Auth Functionality

Basic auth functionatility which are present in the app includes:

  • Authorization is managed on the Server side through sessions and a User / Password mechanisme (with salt based encryption).
  • 401 Interceptor is defined in Angular. When the server sends back a 401 - Not authorized message, it is intercepted and the app presents a login modal.
  • CurrentUser information. CurrentUser status is stored in the $rootScope. A ping functionality ensure that this value stays synchronized with the server.

Contact

Contact me using the comments if you need some help, or if you want to contribute!.

For more information on AngularJS please check out http://angularjs.org/ For more on Express and Jade, http://expressjs.com/ and http://jade-lang.com/ are your friends.

angular-login's People

Contributors

gaetangiraud avatar

Watchers

 avatar  avatar  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.