Not a developer? Go to MovableType.com

Plugin and Theme Directory

AJAXLogin v1.0.1

By Byrne Reese
Posted January 2, 2014, in Developer.

Details

This plugin provides a JSON interface to theme developers who wish to enable AJAX logins on their web site. What good is an AJAX login experience you ask? Well, such an experience would allow for a login form to be presented in a lightbox, or through some other javascript effect. It would allow your readers to login to a page without ever leaving the page.

We have provided sample HTML, template code, and javascript to make integration easier. If you need additional assistance we recommend contacting a qualified Movable Type consultant.

Why Use this Plugin?

Movable Type comes with what appears to be an ajax login experience. It appears this way because when you click “login” on a blog, a little spinner appears. Spinners mean AJAX right? Well yes. But what is happening is not logging in.

The system MT currently has was developed to assist users who were accessing multiple blogs across multiple domains all from the same install. Therefore what is actually happening while the spinner graphic spins is that a little login gnome goes to the central MT install to see if an active session exists for the current user. If it does, the session is magically transported by unicorns to the blog you are on. If there is not, the user is redirected to a login page.

This plugin exposes an interface whereby a user can transmit a username/password combo to the central install to actually be authenticated. So if you want to be able to actually log a user in (e.g. enter a username and password) via a lightbox, or some other form on your page, without requiring them to go to the main MT install to do so, then this plugin will be required.

Prerequisites

This plugin requires a number of components and templates in order to work properly.

  • Config Assistant 2.0 or greater
  • Template changes described below

Known Issues

Here is a list of known issues:

  • This branch of the plugin code is currently being tested with MT 5 but it not yet certified for use with it.
  • This has not been tested against an non-native MT login auth driver (e.g. LDAP or otherwise). For these drivers, this plugin is almost certainly not going to work in certain circumstances. Please consult Endevver for help.

Template Changes

In order to implement AJAXLogin, you need to make a few template changes.

MT Config Javascript Index Template

First, you need to create an index template (contents can be found in templates/javascript_mt.mtml) required by the jquery.mtauth.js plugin. This template can be called whatever you want. Its output filename is recommended to be mt-config.js.

Creating Your Login Form

HTML

<form method="post" action="<$mt:AdminCGIPath$><$mt:CommentScript$>"
    id="login-form" class="logged-out">
  <div class="sign-in">
    <div class="inner pkg">
      <p class="error"></p>
      <input type="hidden" name="__mode" value="do_ajax_login" />
      <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
      <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
      <ul class="pkg">
        <li class="pkg">
            <label>Username</label><br />
            <input type="text" name="username" />
        </li>
        <li class="pkg">
            <label>Password</label><br />
            <input type="password" name="password" />
        </li>
        <li class="pkg">
            <input type="submit" value="Login" class="button" />
        </li>
      </ul>
    </div>
  </div><!-- //end sign-in -->
</form>

jQuery/Javascript

To make this example work, you will need to add the following to your <html> head section:

<script type="text/javascript"
    src="<mt:StaticWebPath>jquery/jquery.js"></script>   
<script type="text/javascript"
    src="<$mt:StaticWebPath$>jquery/jquery.form.js"></script>
<script type="text/javascript"
    src="<$mt:PluginStaticWebPath component="AJAXLogin"$>jquery.mtauth.js"></script>

Then add this in your theme’s javascript:

function signInSubmitHandler(e) {
  var f = $(this);
  var id = f.attr('id');
  $(this).append('<div class="spinner"></div><div class="spinner-status"></div>');
  var spinner_selector = '#'+id+' .spinner, #'+id+' .spinner-status';
  $(this).ajaxSubmit({
    contentType: 'application/x-www-form-urlencoded; charset=utf-8',
    iframe: false,
    type: 'post',
    dataType: 'json',
    clearForm: true,
    beforeSubmit: function(formData, jqForm, options) {
      $(spinner_selector).fadeIn('fast').css('height',f.height());
    },
    success: function(data) {
        if (data.status == 1) {
          alert("User successfully logged in.");
          var u = $.fn.movabletype.fetchUser();
          f.fadeOut('fast',function() { 
            f.parent().find('form.logged-in').fadeIn('fast'); 
          });
        } else {
          alert("login failure");
          $(spinner_selector).fadeOut('fast');
          f.find('p.error').html(data.message).fadeIn('fast');
        }
    }
  });
  return false;
};
$(document).ready( function() {
  $('form.logged-out').submit( signInSubmitHandler );
});

CSS

This following CSS will help produce the spinner graphic that appears during login:

The spinner-login.gif file is packaged with this plugin

/* Spinners ----------------------------------------------------------- */
#login-form li {
  list-style: none;
}    
.spinner,
.spinner-status {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: transparent url(<$mt:PluginStaticWebPath component="AJAXLogin"$>spinner-login.gif) no-repeat center center;
}
.spinner {
  filter:alpha(opacity=5);
  -moz-opacity:.5;
  opacity:.5;
  background: #fff;
}

Sample Index Template

You can find a complete sample index template to test this plugin out for yourself. The file is located in templates/sample_index.mtml. Install its contents into an index template you create yourself. The only modification you will need to make are the changes to necessary to point the web page at the MT Config Javascript file you also installed. Look for this code:

<script type="text/javascript" src="<$mt:BlogURL$>mt.js"></script>

And make any changes necessary to have it reference the mt-config.js file you installed separately. Like so perhaps:

<script type="text/javascript" src="<$mt:BlogURL$>mt-config.js"></script>

JSON Interface

Input Parameters

  • __mode - This must be set to do_ajax_login.
  • username - The username of the user logging in.
  • password - The password of the user logging in.
  • blog_id - The ID of the blog being logged into.
  • entry_id - The ID of the entry being logged into in the event that the user is on an entry page.

Output Parameters

  • status - Either “1” if successful, or “0” otherwise. If 0, then “message” will contain helpful debug information to indicate what might have happened.
  • message - A simple text message returned by the system to indicate what happened as a result of trying to login.

Status Messages

Here is a listing of possible status messages this plugin might return.

  • “session created”
  • “Login failed: permission denied for user ‘[_1]’”
  • “Login failed: password was wrong for user ‘[_1]’”
  • “Failed login attempt by disabled user ‘[_1]’”
  • “Failed login attempt by unknown user ‘[_1]’”
  • “Invalid login”

Getting Help

Need help using this plugin? We can help:

http://help.endevver.com/

Compatibility

Movable Type versions: 4.35.05.15.2

License

MIT


Back

29 Comments

Mua Ban Online

Mua Ban Online on March 19, 2017, 4:33 p.m. Reply

Tại Việt Nam, Bảng gia xe oto và xe máy ngày nay không đơn thuần là một phương tiện di chuyển mà còn là biểu hiện của phong cách sống, thị hiếu của người dùng xe và tốc độ hiện đại hóa của cả đất nước.

Việc mua bán xe cũng cần phù hợp với xu thế chung của thời đại. Banxeoto.Com là trang web cho phép bạn mua và bán các loại xe tại Việt Nam, giúp các cuộc giao dịch xe trở nên đơn giản và hiệu quả hơn. Nếu là xe hơi, sẽ có vô vàn lựa chọn từ xe bình dân như Toyota, Hyundai, Ford, Honda cho đến những mẫu xe của các thương hiệu xe sang BMW, Mercedes-Benz, Bentley, Porsche.

kinh doanh xe oto cũng không thiếu sự lựa chọn với hàng ngàn chiếc xe của các hãng xe máy quen thuộc Honda, Yamaha, Suzuki hay SYM. Nếu đam mê tốc độ, hãy chọn mô tô từ Benelli, Ducati, Kawasaki, KTM, Visitor. Kể cả xe thương mại, xe tải, xe buýt - Tất cả đều có trên Banxeoto.

Jaxson Mosley

Jaxson Mosley on May 24, 2017, 10:03 a.m. Reply

Hi Mau, plugin vẫn là một bổ sung tốt đẹp để loại di chuyển, nhưng bạn don không cần phải cài đặt thêm các thư viện cho nó để làm việc. Tôi không biết người đã nói với bạn điều đó. Hy vọng rằng sẽ giúp.

Just so that other people coming here don’t wonder. The plugin is still a great addition to MoveableType. Mau wanted to know if the plugin was broken but I haven’t had any trouble getting it to work with the latest version of MT. You just need to follow the instructions. In fact I wrote about it on my blog a while back. Not the plugin, per se, but the platform and this was under my must have plugins.

P.S. My mother is from Vietnam.

JoshuaMoulds

JoshuaMoulds on March 20, 2017, 9:31 a.m. Reply

Plug in devices has been floated or the individual and collective nature of the individuals for the future times. Assessment of the new web has been stated here for the use of ukessaysreviews for the completion of the goals and objectives for the future times.

mama

mama on March 27, 2017, 12:23 p.m. Reply

Website dog grooming gorgeous ,excellent ,brilliant!!!!!!!!!!! dog grooming

Rustam Radjapov

Rustam Radjapov on April 26, 2017, 4:43 a.m. Reply

Thankyou for this wondrous post, I am glad I observed this website on yahoo. downlodable files

Radjapov

Radjapov on May 3, 2017, 10:09 a.m. Reply

From Storytel: With Storytel you can listen to audiobooks on your smartphone wherever and whenever you want. mobilsecond.ru Forget the hassle and pull the files up on your screen.

esthetique

esthetique on June 19, 2017, 9:46 a.m. Reply

Bonjour , esthetique , blog augmentation mammaire prix tunisie , lipofilling fessier en tunisie

esthetique

esthetique on June 19, 2017, 9:47 a.m. Reply

Bonjour , esthetique , blog augmentation mammaire prix tunisie , lipofilling fessier en tunisie

JaneSmith76

JaneSmith76 on June 30, 2017, 2:08 a.m. Reply

Nice information, valuable and excellent design, as share good stuff with good ideas and concepts. - happy room

Jason Harry

Jason Harry on July 16, 2017, 5:30 a.m. Reply

keep on sharing useful info. check monthly calendar such as August 2017 printable calendar, September 2017 printable calendar and more.

Jason Harry

Jason Harry on July 16, 2017, 5:31 a.m. Reply

good content

maodzedun

maodzedun on July 22, 2017, 10:47 a.m. Reply

I was very interested in your article, I will definitely try this method and in a moment I’ll write about the results restaurants near me

Ronn

Ronn on September 13, 2017, 11:36 a.m. Reply

I unquestionably getting a charge out of each and every piece of it. It is an awesome site and pleasant offer. I need to bless your heart.. Thanks 10.0.0.1 login | 10.0.0.1

Samyukta85

Samyukta85 on September 28, 2017, 5:37 a.m. Reply

This new field type, called a “multi-checkbox” allows one to have multiple checkbox as opposed to a single checkbox. November 2017 Calendar

seorankbuilder

seorankbuilder on September 28, 2017, 6:32 p.m. Reply

Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have. 먹튀

animal jam

animal jam on October 19, 2017, 1:27 a.m. Reply

The article you have shared here very good. This is really interesting information for me. Thanks for sharing! 192.168.1.1 login |gmail signin

seorankbuilder

seorankbuilder on October 22, 2017, 2:22 p.m. Reply

This was a really great contest and hopefully I can attend the next one. It was alot of fun and I really enjoyed myself.. new futura new futura new futura new futura new futura new futura new futura new futura new futura new futura

in voucher tphcm

in voucher tphcm on October 26, 2017, 8:50 a.m. Reply

that’s great and thank so much

jams

jams on October 31, 2017, 2:27 p.m. Reply

The information you have posted is very useful. The sites you have referred was good. Thanks for sharing… click over here

john

john on November 1, 2017, 1:19 p.m. Reply

Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I’m happy to find so many useful info here in the post, we need work out more techniques in this regard, thanks for sharing. click this site

john

john on November 4, 2017, 7:46 a.m. Reply

You have a good point here!I totally agree with what you have said!!Thanks for sharing your views…hope more people will read this article!!! properties for rent cebu

jams

jams on November 5, 2017, 12:08 a.m. Reply

Wow i can say that this is another great article as expected of this blog.Bookmarked this site.. intsgman

Xe du lịch Minh Đức

Xe du lịch Minh Đức on November 5, 2017, 10:50 a.m. Reply

Hi .I(thuê xe hà nội) saw you on google search engine. I used PLUGIN and felt great. It brings convenience and ease of use.. my blog to visit >> thuê xe giá rẻ .thank you for sharing

animal jam

animal jam on November 8, 2017, 3:19 a.m. Reply

This is great, That’s a great website, it really is what I was looking for, thank you for sharing! 192.168.1.1

animal jam

animal jam on November 8, 2017, 3:20 a.m. Reply

this game, you start at the cavern men’s age, then evolve.The goal of the game also differs depending on the level. In most levels the goal is to reach a finish line or to collect tokens. Many levels feature alternate or nonexistent goals for the player. The game controls are shown just under [url=http://192168ll.tips/]192.168.l.l [/url]

jams

jams on November 9, 2017, 9:44 a.m. Reply

Wonderful illustrated information. I thank you about that. No doubt it will be very useful for my future projects. Would like to see some other posts on the same subject! click this

john

john on November 12, 2017, 9:05 a.m. Reply

Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I’m happy to find so many useful info here in the post, we need work out more techniques in this regard, thanks for sharing. click here

john

john on November 13, 2017, 9:25 a.m. Reply

Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. mesavirre bacolod

john

john on November 14, 2017, 5:49 a.m. Reply

This is very educational content and written well for a change. It’s nice to see that some people still understand how to write a quality post.! Baseline Prestige

Leave a Comment

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese