Free Stuff

# Requires Jomres 9.9.6

# AngularJS authentication example using Implicit Grant Type

## Introduction

This is an example of how to get access to the Jomres REST API using the Implicit Grant Type.

Most Jomres example code uses the Client Credentials grant type, where both the client ID and Secret are passed by the client that's calling the Jomres API.

This approach, however, isn't ideal if you're building a web app in a javascript framework, such as AngularJS, because at all times the Secret should remain just that, a secret, and that's not possible in a javascript application.


To get around that, you need the Implicit grant type, which works slightly differently to Client Credentials.


In Client Credentials flow you send both the ID and the secret and an access token is returned. Once you have that access token, you can call the REST API.

In Implicit flow you call the Jomres server using a special url which you can find on your Client page when you create an API key pair.

Once you're logged into Jomres, you can then choose to grant access to the client ( represented by the Client ID ). Once you have granted access then the system will call the API, passing the Client ID and the secret internally, and return to you the Access Token. From this point your Javascript App would store the access token locally and then proceed to use that token to do whatever it needs to.

## Using the example code

### Install the API Core to your Jomres installation

1. First things first, if you haven't already install the API Core plugin into your Jomres installation via the Jomres Plugin Manager. You may need to visit Site Configuration : Misc tab and set the "Show API client configuration options in Jomres main menu?" option to Yes.

   Once you have done that, you will be able to create REST API clients by visiting your property manager pages > Account Details > App Key Management.

2. Click New to create a new Client ID / Secret pair. The Client ID and Secret are created for you, so give the pair an identifier, such as "Test" or "My first key". It doesn't matter what the identifier is called, it's there so that you can easily identify pairs, as you might use one pair for creating Client Credential services, and another for a javascript app.

   Don't make any other changes to that page just yet, but keep it open in your browser as you'll refer back to it in a minute.

3. Next download the angularjs_authentication_example zip file from Jomres.net.

   Unzip it to your desktop's local server. I.E. if you're using WAMP then that would typically be c:wamp64wwwangularjs_authentication_example.

   You will need to modify one, perhaps two files.

   Open up oauth_callback.html.  The line that says

   `var local_secure_page`

   might need to be changed if you have the files in a different directory to c:wamp64wwwangularjs_authentication_example

   Copy this url ( E.G. http://localhost/angularjs_authentication_example/oauth_callback.html ) to your clipboard and back in your browser change the Redirect URI in the REST API Client Details page to this uri.

   Save the file.


4. Open up app.js in the "js" directory. In the line that says

   `var jomres_authorisation_url`

   Change the URL to the Authorisation URL that's displayed in your browser. It looks something like this

   `http://localhost/joomla_portal/index.php?option=com_jomres&no_html=1&jrajax=1&Itemid=103&lang=en&task=oauth_isauthorised&response_type=token&client_id=xxxxxxxx`
   
   Save the file.

6. Save the REST API client in your Jomres browser.

7. You're now ready to test the installation. In a new tab visit http://localhost/angularjs_authentication_example/ You should see a button "login to Jomres". Click on it and you will be taken to the authorisation page on your Jomres installation. If you haven't already logged in with your property manager's username and password you will need to do that.

   Next you will see a message saying "Do You Authorize xxxxxxxx" where xxxxxxxx represents your client id that you just created. Click Yes.
   
   You should now see a message like
   
   `Secure Web Page
   Access Token: 3d9ec21300333e71bcdd58b608a0feee0b5e8898`


That's it! You're done as you've tested and confirmed that you are able to implicitly authorise a javascript appliction to work with your Jomres installation. You will now be able to create web apps that can talk to the Jomres REST API.