メールアドレス認証を提供する際には、Webブラウザでパスワードを登録する画面であったり、パスワードを忘れた場合の画面を提供する必要があります。デフォルトの画面は以下のようになっていますが、アプリの雰囲気と合わせたいという要望は必ずあります。
そこで今回はこれらの画面のカスタマイズ方法を紹介します。
NCMBの管理画面から行う
HTML画面の変更は管理画面より行います。アプリ設定の会員認証設定を開きます。
HTMLテンプレートをアップロードする機能があり、ここでファイルをアップロードすることで画面のカスタマイズが可能です。
カスタマイズできる画面の種類について
NCMBで提供するWeb画面はすべてカスタマイズ対象ですが、以下の種類があります。
- メールアドレス確認完了ページ
- 会員パスワード変更ページ
- 会員パスワード変更完了ページ
- 無効リンクページ
- メールアドレス会員登録ページ
- メールアドレス会員登録完了ページ
メールアドレス認証を提供している場合、まず大事なのは「メールアドレス会員登録ページ」と「メールアドレス会員登録完了ページ」になるでしょう。そしてユーザ名認証などを提供していて、メールアドレスを登録してもらった場合には「メールアドレス確認完了ページ」を利用します。後はパスワード変更用の「会員パスワード変更ページ」と「会員パスワード変更完了ページ」、最後はすでに使ってしまった確認用URLなどに用いる「無効リンクページ」になります。
カスタマイズする際の注意点
カスタマイズする際にはまずテンプレートをダウンロードしてから行うと良いでしょう。例えばメールアドレス会員登録ページでは以下のJavaScriptファイルを使っています。
この二つのファイルはメールアドレスする際の動的な処理を行っているので必ず読み込むか、このファイルをコピーした上でカスタマイズするのが良いでしょう。例えばパスワードの条件を厳しくすると言った場合です。
また、カスタマイズしたHTMLファイルは Zip圧縮した上で アップロードしてください。一つのHTMLファイルですが、圧縮しなければいけません。アップロードしたHTMLファイルは、アップロードした後から適用されます。あらかじめ該当URLを開いていた状態だと再読込しても適用されないので注意してください。
カスタマイズ例
カスタマイズする例としては、デザインを変更する目的が一番基本になるでしょう。
また、登録完了時にアプリを開くようにするといったカスタマイズも考えられます。
まとめ
アプリのブランディングを考える上でデザインの統一は大事な要件になるでしょう。ぜひカスタマイズ方法をマスターして、アプリとWebのデザインを統一してください。
