ログイン画面をカスタマイズする

Owned by DiceK Mikami (Unlicensed)
Last updated: 2018 Oct 04 by 百瀬吉伸 (Unlicensed)
2 min read

このセクションでは、CloudGearアプリケーション独自のサービスログイン画面を設定する方法を説明します。

サービスログイン画面をカスタマイズすることでサービス利用者は、標準のログイン画面を利用せずにサービスにログインすることができるようになります。
以下にその実装例と設定方法を示します。

　

実装例

login
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>ログイン</title>
    <style type="text/css">
	.alert { display: none; }
	.alert.error { display: block; }
    </style>
  </head>
  <body>
    <form method="POST" action="login" style="width: 500px; margin:0 auto; padding: 20px;" class="clearfix">
      <div class="alert alert-danger ng-hide $$LOGIN_ERROR_CLASS$$">
        <span>$$LOGIN_ERROR_MESSAGE$$</span>
      </div>
      <div class="well">
        <div class="form-group">
          <label for="uid">ユーザーID（メールアドレス）</label>
          <input type="text" class="form-control" id="j_username" name="uid">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="j_password" name="password">
        </div>
      </div>
      <button type="submit" class="btn btn-primary pull-right">ログイン</button>
    </form>
  </body>
</html>

ユーザーID、パスワードのinputタグは、それぞれ「 j_username 」、「 j_password 」として作成してください。

また、ログインフォームのアクション先は「 login 」とし、POSTメソッドで送信するようにしてください。

実装例では、BootstrapをCSSとして利用しています。

　

プレースホルダ

カスタムログイン画面では、いくつかの置換文字列をCloudGearから提供しています。

プレースホルダ説明置換例
$$LOGIN_ERROR_MESSAGE$$入力エラー時にエラーメッセージに置換されます。エラー時以外は空文字に置換されます。パスワードが入力されていません。
$$LOGIN_ERROR_CLASS$$入力エラー時に'error'クラスに置換されます。エラー時以外は空文字に置換されます。error
$$SERVICE_SQUARE_ID$$アクセスしたスクエアのIDに置換されます。＜サービススクエアID＞

実際の利用方法に関しては、実装例をご確認ください。

　

設定方法

サービスログイン画面のカスタマイズは、CloudGear ServiceManager（https://servicemanager.cloudgear.services/）から行うことができます。

以下にその設定方法を示します。

　

1. サービスのダッシュボードを表示

CloudGear ServiceManager（https://servicemanager.cloudgear.services/）にログインし、ログイン画面のカスタマイズを行うCloudGearアプリケーションのダッシュボードを表示します。



2. ログイン画面設定画面を表示

サービス管理メニューの「ログイン画面」リンクを押します。



3. ログイン画面のカスタマイズ

「HTML」項目に表示したいログイン画面を設定します。

［適用］ボタンを押します。



4. ログイン画面設定の完了

ログイン画面のカスタマイズ完了です。

カスタマイズしたログイン画面を表示するためには、サービスへのログインURLとして「 https://<サービススクエアID>.cloudgear.services/ 」を使用する必要があります。

wwwサブドメインを利用した場合は、標準ログイン画面となります。



関連ページ