はじめに

takayuki_tanaka · ‎2024 Aug 02

はじめに

本ブログでは、SAP Cloud Identity ServicesのIdentity Authentication（SAP IAS）のログイン画面をカスタマイズする手順をご紹介いたします。標準のSAP IASのログイン画面は下記の通りですが、今回はこちらをJoule風味に変更してみます。

なお、基本的な手順はSAP Help Portalに準拠します。正確な内容はこちらをご参照ください。

Logo: https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/configure-logo-for-applica...

CSS: https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/configure-branding-style-f...

html, body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.15;
    color: #3e3e3e;
    text-align: left;
    background: linear-gradient(135deg, #7000FF 0%, #BA00FF 50%, #FF00A7 100%);
    font-family: "72", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

h1 {
    font-size: 25px;
    color: #3e3e3e;
}

h2 {
    font-size: 17px !important;
    color: #3e3e3e;
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

a {
    text-decoration: underline;
    cursor: pointer;
    color: #3e3e3e;
}

a:hover {
    cursor: pointer;
    color: #AEFFE6;
}

body {
    color: #3e3e3e;
}

.fd-form-item.ids-input-group {
    text-align: left;
}

[dir="rtl"] .fd-form-item.ids-input-group {
    text-align: right;
}

.ids-main .ids-main__content {
    background: #f4f6f8;
    text-align: center;
}

.ids-main .ids-main__content .iam-container__header {
    margin-bottom: 0rem !important;
}

.ids-main .ids-main__content .iam-container__footer {
    background: #c5c7c9;
}

.fn-button--emphasized .fn-button__text {
    color: #3e3e3e;
}

.fn-button:hover .fn-button__text {
    color: #3e3e3e;
}

.fn-button:active .fn-button__text {
    color: #3e3e3e;
}

.fn-button:focus .fn-button__text {
    color: #3e3e3e !important;
}

.fn-button:hover:active .fn-button__text {
    color: #3e3e3e;
}

.ids-social-buttons a {
    text-decoration: none;
}

.ids-social-buttons .fd-text {
    font-family: "72", "72full", Arial, Helvetica, sans-serif;
    font-weight: normal !important;
    line-height: 1.375rem;
    color: #3e3e3e;
}

.ids-social-buttons .fd-text:hover {
    color: #AEFFE6;
}

.fd-illustrated-message__text {
    color: #3e3e3e !important;
}

.ids-main .ids-main__content .iam-container__header .iam-container__title h1 {
    margin-top: 4rem;
}

.ids-footer .ids-footer__links {
    background: transparent;
}

#forgotPasswordLink {
    font-weight: normal !important;
}

#forgotPasswordLink:hover {
    color: #3e3e3e;
}

.fn-label {
    color: #3e3e3e;
}

.fd-input-group {
    border-radius: 0.375rem;
}

.fn-input__text-field {
    border-radius: 0.375rem;
    background: #767D8045;
    color: #3e3e3e;
}

#j_username, #j_password {
    font-size: 14px;
    color: #3e3e3e;
}

#test-service-provider-name {
    font-size: 18px;
}

.fn-checkbox__label {
    color: #3e3e3e;
}

.ids-login-login--border {
    border: none;
}

.ids-button-group {
    padding: 0 !important;
    width: 100%;
}

#touAccept-label, #pdAccept {
    color: #3e3e3e;
}

.ids-heading-1--login, .ids-heading-1 {
    font-size: 22px;
    color: #3e3e3e;
}

[data-page="ids-login/logon"] .iam-container__subtitle,
[data-page="ids-login/conditional_logon"] .iam-container__subtitle,
[data-page="ids-registration/new"] .iam-container__subtitle,
[data-page="ids-registration/success"] .iam-container__subtitle,
[data-page="ids-login/conditional_initial"] .iam-container__subtitle {
    margin-top: -2rem;
    margin-bottom: 2rem;
}

.fn-button--emphasized {
    background: #DADCDD;
    width: 100%;
}

.ids-button.fn-button--emphasized.ids-button--primary.fn-button:hover,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:active,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus:hover,
.ids-button.fn-button--emphasized.ids-button--primary.fn-button:focus:hover:active {
    background: #3e3e3e;
}

.fn-segmented-button {
    background: #DADCDD !important;
}

.ids-button-group.ids-button-group--centered .ids-button.fn-button.fn-button--layout {
    background: transparent;
}

.ids-button-group--centered .ids-button:hover {
    background: #3e3e3e;
}

.ids-login-section {
    padding: 0;
}

#test-standard-choice .fn-button__text,
#test-biometric-choice .fn-button__text,
#test-social-choice .fn-button__text {
    color: #3e3e3e;
}

.iam-container__title .ids-heading-1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

[data-page="ids-two_factor/logon"] .fn-fieldset {
    color: #475E75;
}

[data-page="ids-two_factor/logon"] .ids-label-container p {
    color: #3e3e3e;
}

.fn-message-strip__text,
a#securityQuestionsLink,
a#passwordResetPinLink {
    color: #475E75;
}

p.fd-text, p.fn-title.fn-title--h4 {
    color: #3e3e3e;
}

.fn-message-strip .fn-message-strip__text #ids-p {
    margin-top: 0rem;
}

a#securityQuestionsLink:hover,
a#passwordResetPinLink:hover {
    color: #3e3e3e;
}

[data-iam-selected-section="login-standard"] .iam-selected-section-login-standard,
[data-iam-selected-section="login-biometric"] .iam-selected-section-login-biometric {
    width: 100%;
}

button.ids-button.fn-button.fn-button--layout:hover,
#returnToForgotPasswordFormBack:hover {
    background: #DADCDD;
}

#ids-p {
    font-size: 13px;
    margin-top: 4rem;
}

.ids-required-marker {
    color: #3E83F2;
}

.fd-illustrated-message .fd-illustrated-message__title {
    color: #3e3e3e;
}

.ids-heading-fieldset {
    color: #3e3e3e !important;
    text-align: center;
}

#contactPrefSection p {
    color: #3e3e3e;
}

#sapStoreRegisterFormBack .fn-button--layout .fn-button__text {
    color: #3e3e3e;
}

#registerLink {
    background: none;
}

#registerLink:hover {
    background: none;
}

.iam-options-container .iam-verify-options__info {
    color: #3e3e3e;
}

ブラウザの開発者ツールを用いてログイン画面のDOMを分析してみるとわかりますが、アップロードしたcssは、ログイン画面に配置された各HTML要素のclassに対応する形で記述されています。

3. アプリケーションへの登録

最後に、これまでアップロードしてきたロゴやスタイルを実際に適用していきます。SAP IASでは、登録されている認証対象のアプリケーションごとにロゴやスタイルをカスタマイズすることができます。

「 Applications & Resources」 -> 「 Applications 」に移動し、対象のアプリケーションを選択し、「Branding and Layout」から、「Logo」をクリックします。

先ほどアップロードしたロゴを選択し、「Save」ボタンをクリックします。

同じく、スタイルについても設定を行います。「 Branding Style 」をクリックし、スタイリングテーマとして「 Custom Advanced 」　を選択します。スタイルシートのドロップダウンで、先ほどアップロードしたcssを選択します。設定が完了したら、「Save」ボタンで保存します。

動作確認

以上の設定により、下記のようにSAP IASのログイン画面がカスタマイズされました。

まとめ

本ブログでは、SAP Cloud Identity ServicesのIdentity Authenticationのログイン画面をカスタマイズする手順について説明しました。カスタムロゴの登録、カスタムCSSの登録、アプリケーションへの登録の3つのステップで、ログイン画面を自分好みに変更することができます。詳細な手順はSAP Help Portalも参照してください。

SAP Cloud Identity Services – Identity Authentication のログイン画面をカスタマイズする

はじめに

目次

1. カスタムロゴの登録

2. カスタムCSSの登録

3. アプリケーションへの登録

動作確認

まとめ