Authenticate with Moodle from a mobile app

Question

My mobile app needs to log in to Moodle to get Json data from a webservice and display it using Angular.

In order to do that, I need to pass in a username and password and get a Moodle webservice token back, so my app doesn't need to log in again (at least until the token expires).

(this is one of those "ask and answer your own question" things, so my solution is below, but comments & suggestions welcome.)

With thanks to all the other StackOverflow pages I have used to create this solution!

See also - how to get data from your Moodle webservice with Angular.

Answer 1

Step 1. Check if a token already exists

jQuery(document).ready(function () {

/* when the user clicks log-out button, destroy the session */

    $('#btn_logout').on('click', function () {
        $('.pane').hide();  /* hide all screens */
        $('#menu').toggleClass('ui-panel-open ui-panel-closed');
        $.jStorage.deleteKey('session');
        makeUserLogin();
    });

        var session = $.jStorage.get('session', ''); // syntax: $.jStorage.get(keyname, "default value")


        if (session) { // if  there is already a session, redirect to landing pane

             showApp();

        } else {   // if there is no session *then* redirect to the login pane

           makeUserLogin();

        }

});

Step 2. create functions to show app & redirect to login page

function showApp() {
    $('#home-pane').show(); /* show home screen */
    $('#system-message').hide();
    $('#login-pane').hide();  /* hide login screen*/
    $('#menu_btn').removeClass('hidden'); /* show menu button so user can see rest of app */
}

function makeUserLogin() {

    $('#btn_login').click(function () {
        console.log('click event for login_button');

        var username = $('#username').val();
        var password = $('#password').val();

        postCredentials(username, password, createSession);

    });

    $('#menu_btn').addClass('hidden');  /* hide menu button so user cannot see rest of app */
    $('#home-pane').hide();  /* hide home screen */
    $('#login-pane').show(); /* show login screen */
}

function postCredentials(username, password, callback) {
    if ((username.length && password.length) && (username !== '' && password !='')) {

        var url = 'https://moodle.yourcompany.com/local/login/token.php';
        $.post(url, {
             username: username,
             password: password,
             service: 'webservice_ws' // your webservice name
         }).done(function (data) {
             token = data.token;
             dataString = JSON.stringify(data);
             if (dataString.indexOf('error') > 0) {
               showErrorDialog('<p class="error">Invalid user credentials, please try again</p>');
             }
             else {
                  createSession(token); 
             }

         }).fail(function () {
             showErrorDialog('<p class="error">Login failed</p>');
         });

    } else {
        showErrorDialog('<p class="error">Please enter a username and password</p>');
    }
}

function createSession(token) {

// syntax:  $.jStorage.set('keyname', 'keyvalue', {TTL: milliseconds}); // {TTL... is optional time, in milliseconds, until key/value pair expires}
    $.jStorage.set('session', token, { TTL: 28800000 });
// redirect to whatever page you need after a successful login
    showApp();
}

function showErrorDialog(errorMsg) {
    $('#system-message').html(errorMsg);
    $('#system-message').fadeIn();
}