campsi-login v1.3.2

campsi/login

Client-side widget that implements campsi/api authentification and registration.

Features

• User / Password login flow
• Social and entreprise login flow
• Custom and built-in themes
• Follows jQuery plugins conventions
  • Named methods
  • Minimal $.fn footprint
• Responsive

Demo themes

Modal.Transparent.Sunset	Modal.Flat.Carmin	Modal.Flat.Neonblue

Installation

Pre-requisites

campsi/login is a jQuery plugin, and therefore requires an instance of jQuery. You can either use an official jQuery CDN or download your own custom version, but do not use the slim version. This version strips out $.ajax(), which is required to call the authentification endpoint of the api.

Step 1 : Get the script

Using NPM

$ npm install --save campsi-login

Step 2 : Import the plugin

<!-- jQuery isn't bundled, you have to import it first. Reminder : do not use the slim version -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/campsi-login/dist/jquery.campsi-login.js"></script>

Like most jQuery plugins, campsi/login ships with a minified version. Just use jquery.campsi-login.min.js if you need to.

Step 3 : Configure

camspi/api returns the auth token in the query string, so we have to parse it to obtain the value. The campsi/login plugin can also use an invitation token and display the issuer and the message.

// here's the URL to the campsi/api server
var apiUrl = 'http://api.mysuperwebsite.com/';

$('#login').CampsiLogin({
    baseUrl: apiUrl + '/auth'
}).on('login', function(event, user){
    console.info('user logged in', user);
});

Documentation

Methods

Constructor options

The parameters token and invitation have precedence over the query string and the local storage.

Events

The login event listener is called with an additional parameter: an object containing the user infos:

$('#login').on('login', function(event, user){
    var whatAUserLooksLike =  {
        _id: "58334d2a41015672d3b3f147",
        displayName: "Romain Bessuges-Meusy",
        picture: "https://",
        email: "romain@agilitation.fr",
        identities: {
            local: {
                id: "romain@agilitation.fr",
                username: "romain@agilitation.fr"
            }
        },
        token: {
            value: "9e7f91f5-9d47-403a-9604-dcb8b1d9e938",
            expiration: "2016-12-10T17:19:01.839Z"
        },
        isAdmin: false
   };
});