この記事は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>
設置したHTMLのURLにアクセス
http://example.com/dataapi-auth.html にブラウザからアクセスします。
ログインユーザ名と、ログインパスワードを入力してログインボタンを押してみましょう。
認証後はアクセストークンが取得可能になり、DataAPIを使用して再構築や記事の投稿なども行えるようになります:)
ちなみにドキュメントには以下のように注意書きがあります。
Webブラウザで認証を行う場合には、このメソッドを利用することは推奨されていません。getAuthorizationUrlメソッドで取得したURLにリダイレクトして認証を行う方法が推奨されています。
