はじめに
本ブログでは、SAP Cloud Identity ServicesのIdentity Authentication（SAP IAS）のログイン画面をカスタマイズする手順をご紹介いたします。標準のSAP IASのログイン画面は下記の通りですが、今回はこちらをJoule風味に変更してみます。
なお、基本的な手順はSAP Help Portalに準拠します。正確な内容はこちらをご参照ください。
目次
カスタムロゴの登録カスタムCSSの登録アプリケーションへの登録
1. カスタムロゴの登録
本カスタマイズはSAP IAS の管理者画面より行います。まずは 「 Applications & Resources 」 -> 「 Logos 」に移動し、「+Add」 ボタンをクリックします。
追加するロゴの名前をつけて、「+Add」 ボタンをクリックします。
対象のロゴをアップロードします。ここでは、.jpeg / .gif / .png / .svg を利用することができます。アップロードが完了したら、「Save」ボタンをクリックします。
2. カスタムCSSの登録
Logoと同じように、「 Applications & Resources 」-> 「 Custom CSS 」 に移動し、「+Add」ボタンをクリックします。
追加するCSSの名前をつけて、「+Add」ボタンをクリックします。
CssファイルのサンプルはSAP Help Portalの下記ページより取得できます。
https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/use-custom-css
今回はこれをベースに編集し、以下のようなCssを記述しています。
なお、SAP Help Portalにも記載のある通りですが、このようなコードを挿入する際にはそれが悪意のある動作をしないか、十分に内容を精査してから適用を行うようにしてください。 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（SAP IAS）のログイン画面をカスタマイズする手順をご紹介いたします。標準のSAP IASのログイン画面は下記の通りですが、今回はこちらをJoule風味に変更してみます。なお、基本的な手順はSAP Help Portalに準拠します。正確な内容はこちらをご参照ください。Logo: https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/configure-logo-for-applicationCSS: https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/configure-branding-style-for-application 目次カスタムロゴの登録カスタムCSSの登録アプリケーションへの登録 1. カスタムロゴの登録本カスタマイズはSAP IAS の管理者画面より行います。まずは 「 Applications & Resources 」 -> 「 Logos 」に移動し、「+Add」 ボタンをクリックします。追加するロゴの名前をつけて、「+Add」 ボタンをクリックします。対象のロゴをアップロードします。ここでは、.jpeg / .gif / .png / .svg を利用することができます。アップロードが完了したら、「Save」ボタンをクリックします。2. カスタムCSSの登録Logoと同じように、「 Applications & Resources 」-> 「 Custom CSS 」 に移動し、「+Add」ボタンをクリックします。追加するCSSの名前をつけて、「+Add」ボタンをクリックします。CssファイルのサンプルはSAP Help Portalの下記ページより取得できます。https://help.sap.com/docs/cloud-identity-services/cloud-identity-services/use-custom-css今回はこれをベースに編集し、以下のようなCssを記述しています。なお、SAP Help Portalにも記載のある通りですが、このようなコードを挿入する際にはそれが悪意のある動作をしないか、十分に内容を精査してから適用を行うようにしてください。 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も参照してください。 Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
+ There are no comments
Add yours