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 は以下のようにワンタイムトークンがクエリパラメータに格納された形になります。

ランディングページ(例: 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 には Nebula の設定情報を設定してください。

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