OneLogin に独自のアプリケーションを登録する手順 Custom Connector Manual 編

2014.3.6
OneLogin に独自のアプリケーションを登録する手順 Custom Connector Manual 編
OneLogin にアプリケーションを追加するには、App カタログから選択するか、Custom Connecto 機能
で独自のアプリケーションへのログインを追加できます。ウィザード形式で登録できない場合は、
マニュアル（手動設定）で登録することが可能です。
OneLogin サイト
OneLogin に管理者としてアクセスする
ご 利 用 の ブ ラ ウ ザ に は OneLogin browser
extention を組み込んでください
インターフェース画面を NewUI から
Classic UI に切り替える（※）
※2014 年 2 月現在は Custom Connector 機能
は Classic UI でご利用ください
登録したいアプリケーションログイン画面
1. New Connector を作成する
Apps タブ→Custom Connector タブを開き、右
カラムの「New Connector」をクリックします。
2. アイコンをアップロードする
この手順はスキップすることもできます。
「ファイルを選択」ボタンをクリックでアイコ
ンとして使用する画像ファイルをアップロー
ドします。
［ Update ］ボタンをクリックすると画像が反
映されます。
P1
ペンティオ株式会社 .
http://www.pentio.com
対象サイトの「ログインページ」を別ウィンド
ウで開きます。以下、Amazon.co.jp の例で解説
します。
登録ターゲットサイト
例 Amazon Online Shop
3. ログインページの情報を入力する
「 Login URL 」に 上 記の ロ グ イン ペ ー ジの
URL をコピー＆ペーストします。 この URL
はポータル画面のアイコンをクリックした時
にジャンプする先の URL になります。
続いて Trigger URL と Trigger domain を入力
します。
Trigger URL に指定した URL を開くと、フォ
ームに内容が自動入力されます。 ここに入力
する URL は正規表現で指定する必要がありま
す。 文頭に ^ が、文末に $ が必要です。 特
に理由がなければ、Login URL に入力した値の
スラッシュ（/）
、ドット（.）の前にバックスラ
ッシュ（¥：フォントによっては円記号）を加
えたものを入力します。
Trigger domain に指定した（正規表現のパター
ンに一致した）ページを開くと、ログインする
か尋ねるポップアップが出現します。
OneLogin のポータル画面を経由せずに対象サ
イトのログイン画面を開く場合に有効です。
ここも正規表現で指定します。
Amazon.co.jp の場合、各パラメーターは次のよ
P2
ペンティオ株式会社 .
http://www.pentio.com
うになります。
（一例です）
Login URL
https://www.amazon.co.jp/ap/signin?_encodin
g=UTF8&openid.assoc_handle=amazon_chec
kout_jp&openid.claimed_id=http%3A%2F%2
Fspecs.openid.net%2Fauth%2F2.0%2Fidenti
fier_select&openid.identity=http%3A%2F%2
Fspecs.openid.net%2Fauth%2F2.0%2Fidenti
fier_select&openid.mode=checkid_setup&ope
nid.ns=http%3A%2F%2Fspecs.openid.net%2
Fauth%2F2.0&openid.ns.pape=http%3A%2F
%2Fspecs.openid.net%2Fextensions%2Fpape
%2F1.0&openid.pape.max_auth_age=0&ope
nid.return_to=https%3A%2F%2Fwww.amaz
on.co.jp%2Fgp%2Fbuy%2Fsignin%2Fhandle
rs%2Fcontinue.html%3Fie%3DUTF8%26eG
CApp%3D%26hasWorkingJavascript%3D0%
26isEGCOrder%3D0%26oldCustomerId%3D
%26oldPurchaseId%3D%26preInitiateCusto
merId%3DA2VSG4S2FK7DQB%26purchase
InProgress%3D%26siteDesign%3D&pageId=
amazon_checkout_jp&showRmrMe=1&siteSt
ate=isRegularCheckout.1%7CIMBMsgs.%7C
isRedirect.0
Trigger URL
^https:¥/¥/www¥.amazon¥.co¥.jp¥/ap¥/sig
nin.*$
Trigger Domain
^https:¥/¥/www¥.amazon¥.co¥.jp¥/ap¥/sig
nin.*$
上記の例では、Trigger の条件に 「.*」 を入
れ複数のページが該当するようにしています。
Amazon のログインページ URL にはセッショ
ンの情報が含まれており、毎回違う値になるか
P3
ペンティオ株式会社 .
http://www.pentio.com
らです。
4. 「Form identified by」 にフォームの情報を
入力する
OneLogin のシステムがフォームを認識するた
めに必要な情報を入力します。 ここから先、
HTML の簡単な知識が必要です。
認証情報を入力するフォーム要素の属性を調
べます。
Amazon の例では、form 要素は以下のように
なっています。
<form
name="signIn"
method="POST"
id="ap_signin_form" novalidate="novalidate"
action="https://www.amazon.co.jp/ap/signin"
onsubmit="************">
OneLogin のシステムはこれらの属性を見て
ID などを入力する場所を判断します。そのた
め、他のフォームと重複しない属性を指定する
ことが望ましいです（例えば、同一ページ内に
「サイト内検索」のフォームがある場合、どち
らも method=POST ということがありえま
す）
。 上記の例では id、name、action が使え
ます。
Form identified by: id
^ap_signin_form$
P4
ペンティオ株式会社 .
http://www.pentio.com
5. Submit 処理の方法を入力する
Submit 処理を呼び出す要素を調べます（画面
上で「ログイン」などと表示されていて、ログ
イン時にクリックする要素です）。
input 要素または button 要素の場合
「 Form fill method 」 で form を 選 択 し 、
「 Form submitted by 」 は
button を 、
「identified by the」で 当該要素（input また
は button）を指定します。
name、id、type、value のいずれかで指定でき
ます。 ただし、type="submit" でなく、かつ id
も name も存在しない場合、すなわち input
要素や button 要素を ID や name などで一
意に決定できない場合は「identified by the」
が使用できません。次項の「上記に該当しない
場合」手順を行ってください。
（ <button
onclick="****">
の よ う に
JavaSctript のみで処理を行っている場合が当
てはまります。
）
Amazon の場合を示します。
<input
type="submit"
id="signInSubmit-input" value="サインイン
（セキュリティシステムを使う）"
tabindex="5">
Form fill method
form
Form submitted by
button
identified by the
type: submit
こ の 例 で は
identified
by
the
id:
signInSubmit-input にすることも可能です。
P5
ペンティオ株式会社 .
http://www.pentio.com
上記に該当しない場合
a 要素または img 要素、div 要素などといった
上 記 以 外 の 要 素 に JavaScript を 設 定 し て
submit 処理 を行って いる 場合は Form fill
method で Script を選択します。
この場合の Script の記述法は別紙資料を参照
してください。
6. パラメーターを設定する
ID やパスワードについて設定します。
Parameters タブを開きます。
add をクリックします。
必須項目は
User interface label と
Name in HTML form の二つです。
User interface label にわかりやすい名称を入
力します。
Name in HTML form には input 要素に設定
されている name 属性の値を入力します。
その他の項目は次のとおりです。
Short name は API で呼び出す際に利用します
が、通常は空欄で構いません。
Tip は簡単な説明です。
Type では通常の文字（String）かパスワード
（Password: 伏字になります）を選択し、ユー
ザーごとに変更できる（User Level）かアプリ
全体で共通か（App Level）を選択します。App
Level を選択した場合は、New Apps に登録す
る 際 に Configuration タ ブ で 値 を 入 力 し ま
す。
Format では初期値を設定できます。特に指定
しない場合は No default を選択します。
P6
ペンティオ株式会社 .
http://www.pentio.com
Test value はテストモードで使用する仮の値
を設定できます。
入力が終了したら ［ Update ］ボタン をクリ
ックします。すべての入力項目に関して上記の
手順を繰り返します。
Amazon の場合を示します。
<input id="ap_email" name="email" value=""
type="email"
size="30"
tabindex="1"
maxlength="128"
autocorrect="off"
autocapitalize="off">
<input id="ap_password" name="password"
type="password"
maxlength="1024"
size="20"
tabindex="2"
onkeypress="displayCapsWarning(event,'ap_
caps_warning', this);" class="password">
User interface lavel
E メールアドレス
Flags
Required, Visible, User-editable
Type
String at User level
Name in HTML form
email
User interface lavel
パスワード
Flags
Required, Visible, User-editable
Type
Password at User level
Name in HTML form
Password
［ Update ］ボタン をクリックします。
以上でカスタムコネクターが作成され、
P7
ペンティオ株式会社 .
http://www.pentio.com
Custom connector のリストに追加されまし
た。
OneLogin にアプリケーション利用者とアプリケーション Role などを登録
アプリケーション登録画面に移ります
Listing ［表示アプリケーション名］
を入力します
Personal or organization
○ Me only
● 例 Pentio K.K.
アプリケーション利用者範囲を選択します
アプリケーション登録画面で
Portal タブで
Listing ［表示アプリケーション名］
Tab
［例 Demo ▼］
ポータル画面における表示 Tab を選択します
最後に［ Update ］ボタンを押して登録完了で
す
アプリケーション登録画面で
Single Sign-on タブで
Credentials
●Configured by users
Default values 例 Input1
［ –No default– ▼］
例 Password
［ –No default– ▼］
No default を選択することでユーザー初回ア
クセス時に ID とパスワードを本人が登録する
P8
ペンティオ株式会社 .
http://www.pentio.com
アプリケーション登録画面で
Access Control タブで
Role
［レ］例 試験中
登録するアプリケーションをまとめる Role を
選択する
アプリケーション登録画面で
Logins タブで
利用ユーザー 一覧
を確認して
［ Update ］ボタンをクリックして
登録終了です
【結果】
OneLogin の App カタログに登録されていない、御社独自のアプリケーションを OneLogin に登録する
ことができます。
登録された接続情報は OneLogin 契約企業メンバーのみが利用できます。他社には公開されません。
P9
ペンティオ株式会社 .
http://www.pentio.com