× Requests and support related to jBackend.

jBackend login with Ionic Creator - code samples?

  • nathanaeljames
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 5 months ago #6629 by nathanaeljames
I have jBackend installed on my Joomla site, with the endpoint set up to type 'user' and I am able to login and logout of the endpoint using the Postman collection. That was easy enough to set up.

I am building an app in Ionic Creator (creator.ionic.io) and I am trying to implement a login page within the app to authenticate me against the Joomla site and store either cookie or session id in order to be able to access various other information from the Joomla site. However, since I am new to both Ionic and jBackend, I am confused as to what code goes into Login.page-controller.js versus services.js as well as how to store (or pass?) the session id in such a manner that it is available as I access content throughout the rest of the app. I have been trying to do a mashup of the outdated Ionic Auth tutorial and a Sheetsu api turorial with no success so far.

I see many people on here working with Ionic, but most of the code examples I am seeing in this forum are examples of what doesn't work. Can somebody help me out by sharing some code sample for a working login function? I can also send an invite to join my development group on Ionic Creator if you need more context and want to work directly with the app coding. Right now it mostly just the menu tabs and a login page.

I don't want users to register via the app. I just need a simple working login and logout example.

Thank you!

Please Log in or Create an account to join the conversation.

  • nathanaeljames
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 5 months ago #6631 by nathanaeljames
Replied by nathanaeljames on topic jBackend login with Ionic Creator - code samples?
UPDATE:

I have got a basic login function working, but it still requires work. I can see in the Chrome console that I receive a 'KO'/'OK' depending on if the credentials are legitimate, but I need help with:

1. Telling the Session.add() function when it has failed (it currently redirects both failed and passed users to the home page).
2. I would also appreciate some tips on how to store the session_id so that I can use it throughout the rest of the app as I make additional requests of the api.

Here is my code for Login.pagecontroller.js
function ($scope, $stateParams, Session, $state) {

    $scope.data = {
        'username': '',
        'password': ''
    }
    
    $scope.error = '';
    
    $scope.login = function(){
        $scope.error = '';
        Session.add($scope.data).then(function(){
            $state.go('menu.home');
        }, function(){
            $scope.error = 'Error logging in.';
        })
    }

}

And here is my Angular code for services.js
angular.module('app.services', [])

.service('Session', ['$http', function($http){

    var api_url = 'http://xxx/portal/index.php/api/';

    var ret = {
        add: function(data){
            
            return $http.get(api_url+'post/user/login?username='+data.username+'&password='+data.password).then(function(resp){
                console.log(resp);
                //if (resp.data.status == 'ko') return 0;
                //return resp.data;
            });
            
        }, 

    }
    
    return ret;

}]);

Any help is appreciated. Thank you for your time!

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago - 3 years 5 months ago #6638 by admin
Hi James,
first thing first, don't use GET to pass credentials, for security reasons use POST and enable JSON payload on the plugin. Two words about Joomla session:

Joomla uses cookies, and only cookies. So the easy way to go (when possible) is to base session on cookie on your client. With javascript and old Angularjs is could be done using withCredentials:

developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

The same approach can be used with Angular 4 too (I think using interceptors, you can google it).

When this is not possible, jBackend has added the support for the session id (it should be enabled in the plugin settings). In this case you simply have to save the session id you get once after login, and pass it back on each request. More info about the session_id can be found here:

www.selfget.com/documentation/jbackend-joomla30/user-module-api.html

Kind regards
Luigi
Last edit: 3 years 5 months ago by admin.

Please Log in or Create an account to join the conversation.

  • nathanaeljames
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 3 months ago - 3 years 3 months ago #6678 by nathanaeljames
Replied by nathanaeljames on topic jBackend login with Ionic Creator - code samples?
Okay, I think I have mostly figured out the code for a login(), loggedin() check, and logout() function. I have the code included in an angular module, services.js:
angular.module('app.services', [])

.service('LoginCtrl', ['$http', '$q', function($http, $q){

    var api_url = 'https://xxxx/api/';
    var SessID = null;

    var ret = {
        loginUser: function(data){
            var deferred = $q.defer();
            $http.post(api_url+'post/user/login?username='+data.username+'&password='+data.password).then(function(resp){
                console.log(resp);
                if (resp.data.status == 'ok') {
                    deferred.resolve(resp.data);
                    SessID = resp.data.session_id;
                    //console.log(SessID);
                } else {
                    deferred.reject('Wrong credentials.');
                }
            });
            return deferred.promise;
        },
        
        isAuthenticated: function(){
            //console.log(SessID);
            if (SessID !== null) {
                return true;
            } else {
                return false;
            }
        },
        
        logoutUser: function(){
            var deferred = $q.defer();
            $http.get(api_url+'get/user/logout?session_id='+SessID).then(function(resp){
                console.log(resp);
                SessID = null;
                //console.log(SessID);
                deferred.resolve(resp.data);
            });
            return deferred.promise;
        },
    }
    return ret;

}]);

However, I still have two questions:

1) currently I can only access the SessID variable from within this angular module. Obviously, I will need to access it from every page of the app and in every module. What is the best way to make this variable "global" (is that even the right terminology? angular noob).

2) One page of my app uses an iframe to fetch an object from the website. About 50% of the time, I find that I am already logged in by nature of logging into the app. The rest of the time, I am presented with the login screen. I know the above functions rely on "session id," but is there a way to ensure that the proper cookie or session id is always passed to the iframe?

Thank you!
Last edit: 3 years 3 months ago by nathanaeljames.

Please Log in or Create an account to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #6693 by admin

1) currently I can only access the SessID variable from within this angular module. Obviously, I will need to access it from every page of the app and in every module. What is the best way to make this variable "global" (is that even the right terminology? angular noob).


You could create a "config" provider (e.g. a factory) with get/set methods, so after you get your session id you set it and in the aftermath you can get it elsewhere.

2) One page of my app uses an iframe to fetch an object from the website. About 50% of the time, I find that I am already logged in by nature of logging into the app. The rest of the time, I am presented with the login screen. I know the above functions rely on "session id," but is there a way to ensure that the proper cookie or session id is always passed to the iframe.


If I got your question properly, you need to open the content of the iframe as "authenticated" user. If the session is stored in cookies, this will be managed by the web view itself (i.e. the cookie passed is the one associated with the domain/url requested in the iframe). Another solution could be to add the session token (or something like that) as parameter to the URL requested in the iframe, so that the server can get it and manage the content provided according to the identified session. I hope this makes sense for you.

Kind regards,
Luigi
Last edit: 3 years 3 months ago by admin.

Please Log in or Create an account to join the conversation.

Time to create page: 0.150 seconds