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

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

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

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

OpenID Connect 認証開始¶

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

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

{endpointUri}/1/{tenantId}/auth/oidc/start?op={op}&redirect={redirectUri}&scope={scope}&createUser={true|false}&sessionToken={sessionToken}

op、redirectUri は必須です。
op は連携する OpenID Connectプロバイダを指定します。設定可能な値は以下の通りです。
- google: Google
- adfs: ADFS (Windows Server 2016)
- other: OpenAM
OIDC認証ユーザを作成する場合は、createUser=true を指定してください。
作成済ユーザとのアカウントリンク設定をする場合は、sessionToken にリンクさせたいユーザのセッショントークンを指定してください。
scope はオプションです。取得したい属性情報(OpenID Connectスコープ)を指定します。必ず "openid" が含まれている必要があります。

redirectUri, scope については、いずれもURIエンコードが必要な点に注意してください。

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

例： index.html

<script>

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

// op が Google の場合
function startOidcToGoogle() {
    var redirectUri = convertAbsUrl("./landing.html");

    // REST API 実行 (ページ移動)
    var startUri = <EndpointUri> + "/1/" + <tenantId> + "/auth/oidc/start?op=google&redirect=" + encodeURIComponent(redirectUri) + "&createUser=true";
    document.location.href = startUri;
};

// op が ADFS, scope を指定する場合
function startOidcToAdfs() {
    var redirectUri = convertAbsUrl("./landing.html");
    var startUri = <EndpointUri> + "/1/" + <tenantId> +  "/auth/oidc/start?op=adfs&redirect=" + encodeURIComponent(redirectUri) + "&scope=" + encodeURIComponent("openid profile email") + "&createUser=true";
    document.location.href = startUri;
};

// op が Other(OpenAM) の場合
function startOidcToOther() {
    var redirectUri = convertAbsUrl("./landing.html");

    // REST API 実行 (ページ移動)
    var startUri = <EndpointUri> + "/1/" + <tenantId> + "/auth/oidc/start?op=other&redirect=" + encodeURIComponent(redirectUri) + "&createUser=true";
    document.location.href = startUri;
};

</script>

<a href="#" onclick="startOidcToGoogle();">Start authentication (Google)</a>
<br>
<a href="#" onclick="startOidcToAdfs();">Start authentication (ADFS)</a>
<br>
<a href="#" onclick="startOidcToOther();">Start authentication (Other)</a>

OpenID Connect 認証完了時の処理¶

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

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

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

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

例： landing.html

<script>

$(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 サーバへのログイン実装(下記参照)
    ・・・
});

</script>

BaaS サーバへのログイン¶

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

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

例： landing.html

<script>

$(function() {
    // OpenID Connect 認証完了時の処理 (上記参照)
    ・・・

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

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

    // ログイン
    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 マニュアルを参照してください。