5.8.1. Web アプリケーション¶

JavaScript を使った SAML 認証方法を記載します。

大きく分けて、以下の3つの処理を実装します。

SAML 認証開始 REST API の実行
SAML 認証完了時の処理
BaaS サーバへのログイン

SAML認証開始¶

SAML 認証開始の REST API を実行します。リクエストパラメータに、ランディングページの URL を指定します。

REST API の URI は、以下のとおりです。

{endpointUri}/1/{tenantId}/auth/saml/init?redirect={redirectUri}

以下にサンプルコードを示します。

例： index.html

<script>

function convertAbsUrl(src) {
    return $("<a>").attr("href", src).get(0).href;
}

function startSaml() {
    var redirectUri = convertAbsUrl("./landing.html");

    // REST API 実行 (ページ移動)
    var startUri = <EndpointUri> + "/1/" + <tenantId> + "/auth/saml/init?redirect=" + encodeURIComponent(redirectUri);
    document.location.href = startUri;
};

</script>

<a href="#" onclick="startSaml();">Start authentication</a>

SAML認証完了時の処理¶

SAML 認証が完了すると、指定したリダイレクト URI (ランディングページ)にリダイレクトされます。リダイレクト URI は以下のようにワンタイムトークンがクエリパラメータに格納された形になります。

file:///home/test/landing.html?token=123456789abcdef

ランディングページ(例： landing.html) はあらかじめ用意しておきます。

リダイレクト URI からワンタイムトークンを取り出します。以下にサンプルコードを示します。

例： landing.html

$(function() {
    // クエリパラメータからワンタイムトークンを取得
    var getOneTimeToken = function() {
        var query = document.location.search.substring(1);
        var params = query.split('&');
        for (var i = 0; i < params.length; i++) {
            var el = params[i].split('=');
            var name = decodeURIComponent(el[0]);
            if (name === "token") {
                return decodeURIComponent(el[1]);
            }
        }
        return null;
    };

    var oneTimeToken = getOneTimeToken();

    // BaaS サーバへのログイン実装(下記参照)
    //・・・
});

BaaS サーバへのログイン¶

JavaScript SDK のログイン API を使い、ワンタイムトークンを指定してログインします。

サーバからセッショントークンが払いだされ、以降は本セッショントークンで認証が行われます。以下にサンプルコードを示します。

例： landing.html

<script>
$(function() {
    // SAML認証完了時の処理 (上記参照)
    ・・・

    // Nebula 初期化
    Nebula.initialize(NebulaConfig);

    // ワンタイムトークンを指定
    var userInfo = {
        token: oneTimeToken,
        username: "",
        password: ""
    };

    // ログイン
    Nebula.User.login(userInfo)
        .then(function(user) {
            // login ok
            $("#result").text("Login succeeded: username=" + user.username);
        })
        .catch(function(err) {
            // login failure
            $("#result").text("Login failed: " + err);
        });
});

</script>

Result:<br/>
<div id="result"></div>

NebulaConfig には接続先のBaaS設定情報を指定してください。

詳しくは JavaScript SDK マニュアルを参照してください。