Tutorial 2 : Ionic Authentication with Spring Security

Tutorial 2 : Ionic Authentication with Spring Security

Generate a new Ionic Application

If you don’t have Ionic installed on your machine run this command to install ionic npm install -g cordova ionic.
the –lab flag is quite new and shows how your app will look on ios & Android. Epic stuff the guys at ionic are creating!

Modify the template

As we want to display our login page before the tabs you see right now, we must add a new file in the www/templates folder, named login.html with this content:
www/templates/login.html

For now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:

As we want to display our profile page before the tabs you see right now, we must add a new file in the www/templates folder, named profile.html with this content:
www/templates/profile.html

For now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:

As we want to display our device page before the tabs you see right now, we must add a new file in the www/templates folder, named device.html with this content:
www/templates/device.html

In order to create singleton objects or functions AngularJS supports the concepts using services architecture. These services can be used within any Controller by just declaring them as dependencies.
www/js/services.js

Now open up the controllers.js, and add our simple login,profile and device controller and inject LoginService in the login controller.
www/js/controllers.js

www/js/constants.js

www/index.html

Run the server application

Downloas the server source code(lab1) from bitbucket:
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab1/?at=master

Create database with name and run the script in PostgreSQL database :

Now, run the application by launching the SpringBootApplication class using the command mvn spring-boot:run and visit and authenticate with one of the two users:
: username=user, password=user
: username=admin, password=admin

Run the Mobile application

Download Ionic source code from bitbucket and run the following command
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab2(IONIC)/?at=master
and run the following command

Author: Ayman Ben Amor

No Comments

Post a Comment

Comment
Name
Email
Website