Help us understand the problem. What is going on with this article?

Movable Type の Data API でユーザー認証を行う

More than 3 years have passed since last update.

Google Books API + Movable Type で書籍管理システムを作るを元に、Movable Type のData API について簡単に解説していきます。今回は、その3として、Data API を利用したユーザー認証について見ていきます。

サンプルの書籍管理システムでは、MTにユーザー登録しているアカウントを利用して、ユーザーの認証行っています。認証が通った場合、書籍データの登録用画面を表示して、データの登録ができるようにしています。

流れは以下のとおりです。

  • 登録画面は、最初hiddenで非表示になっている
  • サインインをクリックすると、Data API のJavaScript SDK を利用して、ユーザー認証のための画面(MTのサインイン画面)が表示される
  • ユーザーIDとパスワードを入力し、認証が通ると、セッショントークンを取得して、隠されていた登録画面が表示される

Movable Type Data APIの認証方法

MTのData API には、ユーザー認証用のエンドポイントとして、以下の2つが用意されています。

authentication は、エンドポイントに、ユーザーIDとパスワードをPOSTして、認証を行います。

authorizationは、MTのサインイン画面を呼び出し、ブラウザからサインインを行って認証を行います。

JavaScript から、authentication を利用してユーザー認証を行う場合、以下のようなコードになります。

(https://www.movabletype.jp/developers/data-api/quick-start/ より引用)

$.ajax({
    url: "http://example.com/mt/mt-data-api.cgi/v3/authentication",
    type: "POST",
    dataType: "json",
    data: {
        'username': 'your-username',
        'password': 'your-password',
        'clientId': 'test'
    }
}).done(function(data){
    alert(data.accessToken);
});

ご覧いただくとわかりますが、JavaScript だけで実装する場合、authencticationを使うと、どうしてもIDとパスワードが分かってしまいます。このため、authentication を使う場合は、ユーザーIDとパスワードを一度サーバーサイドの認証用スクリプトに渡すなど、一工夫必要となります。

今回は、MTのサインイン画面を呼び出し、ユーザーにIDとパスワードをブラウザから入力してもらうためのエンドポイント、 authorization を利用しました。

JavaScript SDKには、getAuthorizationURL という関数があり、これを利用することで、ユーザー認証を行っています。

実際の認証の流れ

実際に、getAuthorizationUrl を使って、MTにサインインしたときの流れを見てみます。

getAuthorizationUrl を利用すると、MTのサインイン画面を呼び出すことができます。

signin.png

ここで認証に成功すると、セッショントークンを取得でき、ブラウザに Cookie として保存されます。

cookie.png

画像は、Google Chrome の検証ツールで見た、サインイン直後のレスポンスヘッダーです。Data API からセッショントークンが渡っていることがわかります。

実際にブラウザに保存された Cookie です。書籍管理システムで利用しているクライアントID [BookShelf] という文字列が確認できます。

cookie_browser.png

書籍管理システムで書いてみた認証関連のサンプルコードは以下となります。

// Movable Type Data API のインスタンス生成

    const api = new MT.DataAPI({
      baseUrl: "<$MTCGIPath$><$MTDataAPISCript$>",
      clientId: "BookShelf"
    });

// メッセージ表示のために使う変数 [html] を定義

    let html = '';

// MTにサインインしているかどうか、トークンを確認する。
// トークンがない場合、サインインを促す。存在した場合、hiddenで隠されている登録用フォームを表示する

    if (!api.getTokenData()) {

      html += "<p>書籍を登録するためにはサインインしてください。</p>";
      html += "<p><input type=\"button\" id=\"signin\" class=\"btn btn-primary btn-lg\" value=\"サインイン\"></p>";
      $("#message").html(html);

    } else {

      $("#content").show();
    }

// サインインをクリックしたら、SDKの関数 [getAuthorizationUrl] を実行して、サインインを行う

    $("#signin").on("click", function() {
      location.href = api.getAuthorizationUrl(location.href);
    });

最初に、JavaScript SDK の関数、 getToken を呼び出して、セッショントークンが取得されているかどうかを判断します。

セッショントークンがない場合(=Cookieが保存されていない場合)、サインインボタンを表示します。jQueryのクリックイベントで、JavaScript SDK の関数 getAuthorizationIUrl を呼び出し、MTのサインイン画面を表示します。

MTのサインイン画面で認証が終わると、セッショントークンを取得し、ブラウザのCookieにトークンを保存します。

トークンが存在していた場合、hiddenしていた登録画面を、jQueryの関数 [show] を使って表示します。

Data API の認証については、公式ドキュメントに、より詳しい情報が書いてありますので、こちらもぜひ一読ください。

※今回のコードはサンプルです。もっと良い書き方があるよ!という方、ぜひご教示くださいませ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした