セキュリティ事業メニュー
セキュリティ事業
HOME
選ばれる
理由
サービス
取扱メーカー
事例・レポート・
ブログ・用語集
セミナー・
オンデマンド動画
イベント・セミナー
オンデマンド動画

Okta

オクタ

はじめに

Auth0 New Universal Loginでは、2つの画面カスタマイズ方法があります。本ページでは、「ページテンプレートを使用した」New Universal Login画面カスタマイズの実現例をご紹介します。

  • ページテンプレートを使用したカスタマイズ
    • Liquidテンプレート言語によるページテンプレートを用いて、背景色のグラデーション設定、ヘッダー・フッターの追加等が可能
    • ページテンプレートは、Management API経由で適用

前提

本ページ記載の機能及び設定に関する内容は、2023年6月現在の情報となります。

ページテンプレートを使用したカスタマイズには、対象Auth0テナントにて、カスタムドメイン設定が必要です。カスタムドメイン設定の詳細は、Auth0カスタムドメイン設定方法をご確認ください。

機能概要

  • Liquidテンプレート言語
    Shopifyが公開しているオープンソースであり、HTMLとデータの橋渡しの役割をします。
    Liquidテンプレート言語を使用することで、静的なHTMLに、動的なユーザ情報等のデータを容易に埋め込み、Webブラウザで表示することができます。
  • ページテンプレート
    Auth0では、Liquidによるページテンプレートを用いて、ログインフロー内全てのページをカスタマイズできます。カスタマイズの際は、全てのページを共通のHTMLで編集します。
  • ページテンプレート適用方法
    Management API：/api/v2/branding/templates/universal-loginを介して、ページテンプレートを適用します。適用操作は、Management API Explorerからの実行、curlコマンドによる実行等となります。

カスタマイズ設定概要

  • ページテンプレート作成

カスタマイズ内容をHTMLで記述します。
New Universal Login画面カスタマイズにて、HTML記述に必須となるタグは、以下の通りです。

必要なタグ 留意事項
{%- auth0:head -%}
  • 全てのページに表示されるウィジェットのHTMLが含まれる (サイズ・色の変更など)
  • <head>タグ内に記述
{%- auth0:widget -%}
  • ウィジェットの記述に必要なタグが含まれる (コンテンツ追加など)

利用可能な変数や作成例は、Customize New Universal Login Pages - Auth0 docsをご確認ください。

  • Management APIアクセストークン発行

カスタマイズ適用のため、Management APIのアクセストークンを発行します。

  • curlコマンドによるカスタマイズ適用

本ページの設定例では、curlコマンド実行により、カスタマイズを適用します。curl コマンド実行時(Linux 環境)には、以下の通りオプションを指定します。

> curl --request PUT --url 'https://<設定済カスタムドメイン>/api/v2/branding/templates/universal-login' --header 'authorization: Bearer <Management API アクセストークン>' --header 'content-type:text/html' --data '<カスタマイズ内容を記述したHTML>'

なお、context-typeの指定に応じて、HTML記述のフォーマット変更が必要です。

context-type 留意事項
text/html
  • HTMLのフォーマット変更不要
application/json
  • カスタマイズ結果確認

Auth0連携Webアプリケーションを用いて、New Universal Login画面にカスタマイズ内容が反映されているかを確認します。

カスタマイズ設定例

簡単なカスタマイズ例を2点ご紹介します。
いずれも、事前にAuth0連携Webアプリケーションを用意します。Auth0とサンプルアプリケーションの連携方法は、Auth0とサンプルアプリケーションの連携設定方法をご確認ください。

背景色/グラデーション追加

  • ページテンプレート作成

1. 背景色における上下方向のグラデーション設定をHTMLで記述

<!DOCTYPE html>
<html lang="{｛locale｝}"> 
   <head>
      {%- auth0:head -%}
      <style>
         body{
           //上下方向のグラデーション（画面上部の色,画面下部の色）
           background-image: linear-gradient(#ffffff, #afeeee);
         }
      </style>
      <title> 
         {｛ prompt.screen.texts.pageTitle ｝} 
      </title>
   </head> 
   <body class="_widget-auto-layout">
      {%- auth0:widget -%} 
   </body>
</html>

2. 作成したHTML記述の改行を削除し、一行のテキストに変更

<!DOCTYPE html><html lang="{｛locale｝}"> <head>{%- auth0:head -%}<style> body{ background-image: 
linear-gradient(#ffffff, #afeeee); }</style><title> {｛ prompt.screen.texts.pageTitle ｝} </title>
</head> <body class="_widget-auto-layout">{%- auth0:widget -%} </body></html>
  • Management APIアクセストークン発行

1. Auth0管理画面で、[Applications] > [APIs]をクリック

2. Auth0 Management APIをクリック

3. [Test]タブをクリック ※今回はテスト用途のアクセストークンを利用

4. Response欄のaccess_token値をコピー

  • curlコマンドによるカスタマイズ適用
  • 以下コマンドを実行し、カスタマイズ内容を適用
> curl --request PUT --url 'https://<設定済カスタムドメイン>/api/v2/branding/templates/universal-login' --header
 'authorization: Bearer eyJhbGciOiJSUzI1NiIs...(略)...Z2LGsGdBICdLedwUClQaMu0Q' --header 'content-type:
text/html' --data '<!DOCTYPE html><html lang="{｛locale｝}"> <head>{%- auth0:head -%}<style> body
{ background-image: linear-gradient(#ffffff, #afeeee); }</style><title> {｛ prompt.screen.texts.pageTitle ｝} 
</title></head> <body class="_widget-auto-layout">{%- auth0:widget -%} </body></html>'
  • カスタマイズ結果確認

1. Auth0連携済Webアプリケーション画面において、ログイン操作を実施

2. ログイン画面(New Universal Login)にて、背景色にグラデーションが追加されていることを確認

ヘッダー追加

  • ページテンプレート作成

1. ヘッダー追加設定をHTMLで記述

<!DOCTYPE html>
<html lang="{｛locale｝}"> 
   <head>
   {%- auth0:head -%} 
      <style>
         .header { 
             background-color: #add8e6; //ヘッダーの背景色
             position: fixed; //ウィンドウをもとに絶対位置を指定
             top: 0; //上からの位置
             width: 100%; //ヘッダーの幅
             padding: 16px 0; //ヘッダーの内側の余白(上下,左右) 
             color: #ffffff;  //ヘッダーの文字色
          }
          .header ul {
             text-align: center; //ulの中の文字は中央寄せ
          }
          .header ul li {
             display: inline-block;  //liの中をulのinlineに追加
          }
       </style>
       <title> 
          {｛ prompt.screen.texts.pageTitle ｝} 
       </title>
    </head> 
    <body class="_widget-auto-layout">
       {%- auth0:widget -%}
       <header class="header">  //ヘッダーの追加
          <ul>
             <li>ここはヘッダーです</li>  //ヘッダー内の文字
          </ul>
       </header>
    </body>
</html>

2. 作成したHTML記述の改行を削除し、一行のテキストに変更

<!DOCTYPE html><html lang="{｛locale｝}"> <head>{%- auth0:head -%} <style>.header { background-color: #add8e6; 
position: fixed; top: 0; width: 100%; padding: 16px 0;  color: #ffffff;}.header ul {text-align: center; }
.header ul li {display: inline-block;}</style><title> {｛ prompt.screen.texts.pageTitle ｝} </title></head> 
<body class="_widget-auto-layout">{%- auth0:widget -%}<header class="header"> <ul><li>ここはヘッダーです</li>
</ul></header></body></html>
  • Management APIアクセストークン発行
  • [背景色/グラデーション追加]と同様に、アクセストークンを発行
  • curlコマンドによるカスタマイズ適用
  • 以下コマンドを実行し、カスタマイズ内容を適用
> curl --request PUT --url 'https://<設定済カスタムドメイン>/api/v2/branding/templates/universal-login' 
--header 'authorization: Bearer eyJhbGciOiJSUzI1NiIs...(略)...Z2LGsGdBICdLedwUClQaMu0Q' --header 
'content-type:text/html' --data '<!DOCTYPE html><html lang="{｛locale｝}"> <head>{%- auth0:head -%} 
<style>.header { background-color: #add8e6; position: fixed; top: 0; width: 100%; padding: 16px 0;  
color: white;}.header ul {text-align: center; }.header ul li {display: inline-block;}</style><title> 
{｛ prompt.screen.texts.pageTitle ｝} </title></head> <body class="_widget-auto-layout">{%- auth0:widget 
-%}<header class="header"> <ul><li>ここはヘッダーです</li></ul></header></body></html>'
  • カスタマイズ結果確認

1. Auth0連携済Webアプリケーション画面において、ログイン操作を実施

2. ログイン画面(New Universal Login)にて、ヘッダーが追加されていることを確認

おわりに

本ページでは、New Universal Login画面カスタマイズ方法として、ページテンプレートを使用した実現例をご紹介しました。Auth0管理画面上で提供されるカスタマイズ機能と比較して、より細かなカスタマイズが可能です。

無償のAuth0トライアル環境においても、New Universal Login画面カスタマイズをお試しいただけます。New Universal Login画面のカスタマイズにご興味がある方は、是非弊社までお問い合わせください。

参考

Customer Identity Cloud (Auth0) 基本設定動作ガイド一覧はこちら

お問い合わせ・資料請求

株式会社マクニカ　 Okta 担当

お問い合わせ 資料請求

月～金 8：45～17：30