Movable Type6の新機能DataAPIを使ってみよう！ユーザー認証を行う「authenticate」

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

HTMLファイルの作成と設置

MTがインストールされている同じドメインのサーバにHTMLファイルを作成します。
今回、http://example.com/dataapi-auth.html というファイルを作成しました。

http://example.com/ にMovable Type6がインストールされていることを前提としています。ドメイン部分はご自身の環境に置き換えてください。

dataapi-auth.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>DataAPIのテスト</title>
		<link rel="stylesheet" href="css/style.css"　/>
		<!-- jQueryとDataAPIを使用するために用意されているJavaScript SDKを読み込みます -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="http://example.com/mt-static/data-api/v1/js/mt-data-api.min.js"></script>
	</head>
<body>
	<script>
	$( document ).ready( function() {
		// DataAPIを使用する準備を行います
		// clientIdには英数字、アンダースコア、ハイフンを組み合わせた任意の文字列を指定します
		// baseUrlにはMTをインストールしているディレクトリのmt-data-api.cgiまでのパスを指定します
		var api = new MT.DataAPI({
				clientId: 'example',
				baseUrl: 'http://example.com/mt-data-api.cgi',
		});
	 
		// ログインボタンを押した時に、認証処理を実行します
		$( '#login' ).click( function()　{
			// username・・・ログインユーザ名
			// password・・・ログインパスワード
			// remember・・・クッキーのexpiresの設定有無
			api.authenticate({
				username: $( '#user' ).val(),
				password: $( '#pass' ).val(),
				remember: true
			}, function( response ) {
				// エラー処理
				if ( response.error ) {
					alert( response.error.code + ":" + response.error.message );
					return;
				}
				// 認証成功
				$( '#result' ).html( 'ログイン中' );
			});
		});
	});
	</script>
	 
	<h1>DataAPIのテスト</h1>
	 
	<!-- ログイン用の入力項目 -->
	<input type="text" id="user" />
	<input type="password" id="pass" />
	<input type="button" id="login" value="ログイン" />
	
	<!-- この要素にメッセージを表示します -->
	<div id="result"></div>
</body>
</html>