当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。
記事そのもののリンクについてはご自由に行っていただいてよいです。

テクてく Lotus 技術者 Slack に参加しよう!

2018年3月7日水曜日

XPagesでコピー/貼り付け禁止を設定してみよう

皆さん、こんにちは。
3月になり花粉の飛散が本格化してきました。
毎年毎年、花粉対策の新しい商品が販売されたり手法が紹介されたりしますが、全員に有効なものなどなさそうですね。自分に合った療法をしていくしかなさそうです。
ということで、今日も花粉に悩まされています(笑)

さて、今日もXPagesの話題です。
Webページで文字列を入力するときに、コピーしてほしくないとか値を貼り付けてほしくないという時があるかと思います。
実際にメールアドレスを入力するページなど、値が間違っていたら困るときに、2回入力させて同じ値が入っているかどうかを確認することがあるでしょう。
この時に、貼り付けが可能であれば、間違った値が2回連続で入力されてしまう可能性があります。

こういったことを防ぐ方法の紹介です。
コピーを禁止する場合、"oncopy"というイベントに対して、"return false"を設定することで、そのイベントを強制終了させればいいのです。

XPagesでのやり方には2種類あります。
ページ全体に禁止の設定を施すのか、それとも各入力フィールドごとに設定を施すのかです。


1.ページ全体に設定を施す

こちらは簡単です。
XPageの「onClientLoad」イベントに次の式を記述します。

document.body.setAttribute( "oncopy", "return false" );            // コピー禁止
document.body.setAttribute( "onpaste", "return false" );        // 貼り付け禁止
document.body.setAttribute( "oncontextmenu", "return false" );    // コンテキストメニュー禁止


これでページ全体でコピーや貼り付けができなくなります。
ちなみに、コンテキストメニューはマウスで右クリックしたときに表示されるメニューのことです。



2.各フィールドごとに設定を施す

こちらはちょっと複雑です。
各入力フィールド(通常、編集コントロールボックス)にはイベントが定義してありますが(下図参照)、ここにoncopyやonpasteのイベントは存在しません。
編集ボックスコントロールの定義済みイベント

そこで、ページ全体で設定したときに使った「setAttribute」関数に目を付けます。
この関数は属性を付与するというものですから、編集ボックスコントロールに属性を追加すればいいのです。
「すべてのプロパティ」にある「attrs」をクリックすると[+][-]が表示されるので、さらに[+]をクリックします。
すると、「attr[0]」が追加されるので、「name」に"oncopy"を、「value」に"return false"を設定します。
attrの追加

これでこのフィールドの値をクリップボードにコピーすることができなくなります。
なお、入力フィールドに対してコピー禁止を設定する場合、あわせて「切り取り禁止」の設定を行っておく必要があります。
そうしないと、Ctrl+Xで値を切り取ってしまうことができます。
こちらは"oncut"という属性を追加して、同じくvalueには"return false"を設定すればよいでしょう。



いかがでしょうか?
一見、設定がないからできない・・・というような場合でも、工夫すればXPagesで行うことができます。
すぐにあきらめないで、アプローチの仕方を変えてチャレンジしてみましょう。



それでは今日はこの辺で・・・



Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2018年3月4日日曜日

XPagesにreCAPTCHAを組み込んでみよう

みなさん、こんにちは。

あっという間に3月になってしまいましたね。

さて、現在ノーツコンソーシアムのHP上では2018年度の研究会の申し込みが行われています。
リンクは【登録受付中】2018年度 研究会メンバー登録開始を参照してください。
この申し込みフォームはJotFormというサービスを使って作られているようです。

このフォームを見ていて気になったことがあります。
JotFormの入力フォーム

上図の赤枠で囲った部分!最近、色々な入力フォームで目にしますよね。ロボットではないよ!というのを示すための設定です。
こういうのって、XPagesでも使えないかな?って思ったので調べてみました。


XPagesで簡単に組み込めそうなロボット対策について調べたところ、Googleが提供するreCAPTCHAというものがありましたので、実際のXPagesアプリケーションに組み込んでみました。

大まかな手順は次の通りです。
1.サイトの登録
2.クライアント側の設定
3.サーバー側の設定

ではそれぞれ見ていきましょう。

1.サイトの登録

reCAPTCHAのサイトを開いたら、[Get reCAPTCHA]というボタンがあるはずなので、そこをクリックします。
Get reCAPTCHAをクリック

すると、新規サイトの登録画面になるので、必要事項を入力/選択して[Register]をクリックします。
Label」 は任意の値を入力します。どのサイトで使うのかなど自分のためのメモとして利用します。
Choose the type of reCAPTCHA」では"reCAPTCHA V2"を選択します。
Domains」ではロボット対策の画面を埋め込むサイトのドメイン名を入力します。ここに入力したサイトでないとロボット対策は動かないので正しい値を入力しましょう。試していませんが、複数のドメイン名を入力できるようです。その場合、1行1ドメインの形で入力します。
Accept the reCAPTCHA Terms of Service.」は利用規約に同意します。ということなので、同意したらチェックします(当然のことながら、チェックしないと使えません)。
新規サイトの情報入力画面

登録が成功すると、サイトキーやシークレットキーが発行されます。
キー情報とサイトへの設置手順
ここで発行されたキーはreCAPTCHAのサイトに保存されるので焦って覚えておく必要はありませんので安心しましょう。

2.クライアント側の設定

上の画像をよく見るとわかりますが、reCAPTCHAをサイトに設置する手順が書いてあります。
ということで次はクライアント側の設定です。
api.jsをリソースとして登録した後に、
"g-recaptcha"というクラスのdivタグを設置します。
XPagesの場合は、[リソース][追加][JavaScriptライブラリ...]をクリックして、api.jsを追加します。
api.jsはURLから直接読み込む形にするので、「URLからJavaScriptライブラリへのリンク」を選択して、そこにurlを入力して[OK]をクリックします。
JavaScriptライブラリの追加

次に部品を設置します。
サイトの説明にはフォーム内の最後の部分に以下のdivタグを設置してね。と書いてあります。

XPagesの場合、画面内にこの行を貼り付けるだけでOKです。
が・・・
XPagesではHTMLタグを貼り付けると設計タブ上では何も表示されないので分かりにくいですね。
そこで、以下のように書き換えてみてください。

    
        
    


これなら設計タブで見た場合でも点線で四角く表示されるので分かり易いでしょう。

実はこれだけでも動きます。
Webブラウザで動かしてみた画面がこちらです。
サンプル画面

「私はロボットではありません」のところをクリックすると、証明するための画像チェック画面が表示されます。
チェックボックスをクリックしたら…

確かに動いていますね。
でもこれだけではつまらない(というか意味がない)ので、少し画面に項目を追加してみました。
入力項目と送信ボタンを追加

少しは入力画面のようになりましたね。
でも、これだと[送信]ボタンが押せてしまいますので、reCAPTCHAのチェックが入るまでは[送信]ボタンは押せないようにしてみましょう。

(1)[送信]ボタンを使用不可にする
まず、[送信]ボタンのプロパティで「disabled」を"true"にします。
これで[送信]ボタンがクリックできなくなります。

(2)reCAPTCHAのdivタグにコールバック関数を呼ぶように設定する
reCAPTCHAのドキュメントサイトにコールバック関数の一覧があります。
reCAPTCHA V2
この中の「g-recaptcha tag attributes and grecaptcha.render parameters」という個所に、「data-callback」という記述があります。
これがロボット対策に成功したときに呼ばれるコールバック関数の名前を設定するもののようです。
XPages内に設置したdivタグにattrとして追加設定しましょう。
コールバック関数の名前は「enableButton」としました。


    
        
        
    



(3)reCAPTCHAのコールバック関数を設定する
コールバック関数の名前を決めたので、実際にコールバック関数を作成します。
これはクライアントサイドJavaScriptになるので、「出力スクリプト」コントロールで記述します。
コールバック関数
 「button1」というのが送信ボタンのIDです。そこから「disabled」という属性を削除してください。という関数です。これでreCAPTCHAの処理が正しく行われたら[送信]ボタンがクリックできるようになります。

実際の画面がこちら。
送信ボタンが使用不可から使用可能になった!

これでreCAPTCHAを設定した意味が出てきました。
でも、これではまだ不十分です。
ブラウザの開発ツールでHTMLタグを編集してしまえば、[送信]ボタンをいつでもクリックできるようにすることが可能です。
そこで、サーバーサイドの設定が必要になってきます。

3.サーバー側の設定

reCAPTCHAのドキュメントによると、チェックボックスをクリックした際にサーバーと通信をして「g-recaptcha-response」という項目を返してくるそうです。
その値が正しいかどうかを判定することで正常に処理されたかどうかを判定してください。
とのこと。
どういうことかというとRESTで「https://www.google.com/recaptcha/api/siteverify」にPOSTでリクエストを投げます。
その際、リクエストパラメータにシークレットキーとサーバーから戻された「g-recaptcha-response」の値をセットしておくということです。
すると、サーバーからレスポンスがJSON形式で返ってくるので、それで正しいかどうかを判定するのです。

g-recaptcha-response」の取得方法ですが、クライアントサイドの設定で実装したコールバック関数の引数に設定したcodeがそれに該当します。
この値を保存しておきます。
クライアントサイドからサーバーサイドに値を引き渡す必要があるので、以下のような形で実装してみました(他にもいろいろやり方はあると思います、こちらはあくまでも一例です)。
「非表示入力」コントロールを配置します。
後はコールバック関数に

document.getElementById( "#{id:inputHidden1}" ).value = code;

の一文を追加するだけです。

あとは[送信]ボタンのイベントにreCAPTCHAとの通信の判定を行うプログラムを実装すればよいです。

が、
サーバー通信の方法については省略いたします。詳しく知りたい場合は、弊社まで別途お問い合わせください。

ちなみに、レスポンスはJSONで返ってくるのですが、これをサーバーサイドJavaScriptで処理する方法については、ケートリック様のブログに詳しく書いてあります。
XPagesでJSONをパースしよう、 fromJson関数の使い方



ということでXPagesでもこういった部品の組み込みはさほど手間をかけずに行うことができます。
ちょっとしたアンケートを採取したいという場合に使ってみてはいかがでしょうか?
IBM Notes/Dominoであれば、データのセキュリティの確保もしっかりとデキると思いますので、向いているかと思います。




それでは今日はこの辺で・・・




Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ