How to authenticate and display the json data using jQuery mobile/Ajax?

Question

I have created a simple API for my Ruby on Rails app. This is what I get when I use curl. I think this is how it's done.

Returns Json data of all users successfully.

$ curl --basic -u test@gmail.com:test http://rails-tutorial-abc.c9.io/api/users.json

[{"id":1,"name":"sumar","email":"test@gmail.com","created_at":"2015-01-23T12:57:41.502Z","updated_at":"2015-03-28T02:53:46.438Z","password_digest":"$2a$10$xNvGKpPwspaeTd33QrTwuuLP0TesuuTmfbrUlFO7LDsWXGkf7XP7m","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":true,"activation_digest":"$2a$10$nIwWkX2X8WugscC/Yre7KeWRIzw6ecNyA5hLn/xPw9C0FyzyO6BJq","activated":true,"activated_at":"2015-01-23T12:58:58.337Z","reset_digest":null,"reset_sent_at":null,"avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test "},{"id":13,"name":"mahumar","email":"testlmah@gmail.com","created_at":"2015-03-24T13:57:56.184Z","updated_at":"2015-03-24T13:58:47.267Z","password_digest":"$2a$10$oyIFQ9b.yyLQ8AMagwGNfeBE9.iXhSg/8PyoQ8fO9.ApH3ZvZ7Q/K","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":false,"activation_digest":"$2a$10$xhpJCNVDvyLqcBZC8LhgkOqTeptHEy.UGNCH.4FFGBLPalLotqPQO","activated":true,"activated_at":"2015-03-24T13:58:23.488Z","reset_digest":null,"reset_sent_at":null,"avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"test"}]
$

Returns Json data successfully when I retrieve data of a particular user.

$ curl --basic -u test@gmail.com:test http://rails-tutorial-abc.c9.io/api/users/2.json

{"id":2,"name":"testtest","email":"test@gmail.com","created_at":"2015-01-26T15:27:30.101Z","updated_at":"2015-03-08T19:19:16.254Z","password_digest":"$2a$10$uWIbqRn0BGs2HW1hnbkLFO.5ywXm1YCwOWR2KtRoeCXKzfgaBi3Yu","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":false,"activation_digest":"$2a$10$E6sQkdCtY3Ww//BsjtaSguG8PHOykMU.3cmXEfuzzz1Ng7r7iHpqO","activated":false,"activated_at":null,"reset_digest":"$2a$10$mizJ.AhAbWvK4R.x6PGKKOlfgFGuHEs0BAUrr7T7xlhmaylEtElwq","reset_sent_at":"2015-03-08T19:18:46.707Z","avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"tt","microposts":[]}
$

Access is denied when I give wrong credentials.

$ curl --basic -u test@gmail.com:best http://rails-tutorial-abc.c9.io/api/users/2.json

HTTP Basic: Access denied.
$

Access is denied when no credentials are given.

$ curl http://rails-tutorial-abc.c9.io/api/users/2.json
HTTP Basic: Access denied.
$

Returns error message when a non existing user is retrieved.

$ curl --basic -u test@gmail.com:test http://rails-tutorial-abc.c9.io/api/users/26.json

{"message":"Not Found"}
$

So I think the API is working as expected.

This is how I authenticate in my Rails app.

module Api
  class ApiController < ApplicationController
    # Prevent CSRF attacks by raising an exception.
    # For APIs, you may want to use :null_session instead.

  skip_before_filter :verify_authenticity_token

    protect_from_forgery with: :null_session
    before_filter :authenticate

    def current_user
      @current_user
    end    

    def authenticate
      authenticate_or_request_with_http_basic do |email, password|
        Rails.logger.info "API authentication:#{email}"
        user = User.find_by(email: email)
        if user && user.authenticate(password)
          @current_user = user
          Rails.logger.info "Logging in #{user.inspect}"
          true
        else
          Rails.logger.warn "No valid credentials."
          false
        end          
      end
    end        
  end
end

I am using jQuery mobile to create my mobile app and then I will use PhoneGap.

Now, this is the code I have right now which just prints a small welcome message. I know it's not much. I am learning.

<!doctype html>
<html>

<head>
    <title>Home</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="images/icon.png"/>  
    <meta name="apple-mobile-web-app-capable" content="yes" />  


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">


</head>

<body>

<div data-role="page">
    <div data-role="panel" id="left-panel" data-theme="c">
        <ul data-theme="d" data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>  
            <li data-role="list-divider">Menu</li>
                <li ><a href="#" class="link" data-rel="close">Home</a></li>
                <li ><a href="#" class="link" data-rel="close">Search</a></li>
        </ul>
    </div><!-- /panel -->

    <div data-role="header" data-position="fixed" data-theme="c">
        <h1>Home</h1>
        <a href="#left-panel" data-icon="bars" data-role="button"  data-iconpos="notext" data-iconshadow="false">Menu</a>
    </div>
    <div data-role="content" class="content">
        <h1 id="current_temp" class="icon" data-icon="B">Welcome</h1>

    </div>
</div>


</body>

</html>

enter image description here

Could anyone please share how to authenticate and retrieve the json data?
In this instance, how do I print the email and name?

And should I pass email and password every time I query for some data?
Should I get it once and store it?
Can someone share some resource which has this information?
Kindly help. Thanks.

score 1 · Answer 1 · edited May 23 '17 at 12:22

That's quite a big topic to cover in just one answer, I'll try to point you to the right direction.

First, I would suggest updating to the latest jQM version, 1.4.5.

Could anyone please share how to authenticate and retrieve the json data?

display a login popup (see "sign in" example here)
attach an event handler to your login button with $(document).on("click", "#your_button_id", function() { /* auth code goes here */});
do your basic authentication with Ajax inside your event handler
again, use Ajax to retrieve your data in the same way (many examples available)

In this instance, how do I print the email and name?

Your JSON data will be available in the success handler of your $.ajax call. Add <span id="name"></span> and <span id="email"></span> to your content, and fill them up with something like $("#name").html(data.name);

And should I pass email and password every time I query for some data? Should I get it once and store it?

It depends on your API, which can support "sessions" initiated by a successful login (but that's quite another topic).

Hope this helps to get you started.

How to authenticate and display the json data using jQuery mobile/Ajax?

1 Answers1