ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

パスワード登録、パスワード変更画面を変更する

メールアドレス認証を提供する際には、Webブラウザでパスワードを登録する画面であったり、パスワードを忘れた場合の画面を提供する必要があります。デフォルトの画面は以下のようになっていますが、アプリの雰囲気と合わせたいという要望は必ずあります。

そこで今回はこれらの画面のカスタマイズ方法を紹介します。

NCMBの管理画面から行う

HTML画面の変更は管理画面より行います。アプリ設定の会員認証設定を開きます。

f:id:mbaasdevrel:20181123153929p:plain

HTMLテンプレートをアップロードする機能があり、ここでファイルをアップロードすることで画面のカスタマイズが可能です。

カスタマイズできる画面の種類について

NCMBで提供するWeb画面はすべてカスタマイズ対象ですが、以下の種類があります。

  • メールアドレス確認完了ページ
  • 会員パスワード変更ページ
  • 会員パスワード変更完了ページ
  • 無効リンクページ
  • メールアドレス会員登録ページ
  • メールアドレス会員登録完了ページ

メールアドレス認証を提供している場合、まず大事なのは「メールアドレス会員登録ページ」と「メールアドレス会員登録完了ページ」になるでしょう。そしてユーザ名認証などを提供していて、メールアドレスを登録してもらった場合には「メールアドレス確認完了ページ」を利用します。後はパスワード変更用の「会員パスワード変更ページ」と「会員パスワード変更完了ページ」、最後はすでに使ってしまった確認用URLなどに用いる「無効リンクページ」になります。

カスタマイズする際の注意点

カスタマイズする際にはまずテンプレートをダウンロードしてから行うと良いでしょう。例えばメールアドレス会員登録ページでは以下のJavaScriptファイルを使っています。

この二つのファイルはメールアドレスする際の動的な処理を行っているので必ず読み込むか、このファイルをコピーした上でカスタマイズするのが良いでしょう。例えばパスワードの条件を厳しくすると言った場合です。

また、カスタマイズしたHTMLファイルは Zip圧縮した上で アップロードしてください。一つのHTMLファイルですが、圧縮しなければいけません。アップロードしたHTMLファイルは、アップロードした後から適用されます。あらかじめ該当URLを開いていた状態だと再読込しても適用されないので注意してください。

カスタマイズ例

カスタマイズする例としては、デザインを変更する目的が一番基本になるでしょう。

f:id:mbaasdevrel:20181123153954p:plain

また、登録完了時にアプリを開くようにするといったカスタマイズも考えられます。

まとめ

アプリのブランディングを考える上でデザインの統一は大事な要件になるでしょう。ぜひカスタマイズ方法をマスターして、アプリとWebのデザインを統一してください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。