Digits

商品コード: digits カテゴリー:

会員制のサイト運営にユーザーのメールアドレスやIDとパスワードを使用することが多いですよね。

「メールアドレスを入力するのが面倒。」

「パスワードを忘れてしまった。」

というユーザーも多く、会員登録が面倒だからとサイトから離脱するケースもあります。

この会員登録が電話番号だけでできるとしたら、とても便利で簡単になると思いませんか?

Digitsを利用することで、ユーザーにとって簡単で便利なサイト作成ができるようになります。

 

電話番号で会員登録 / ログイン

Digitsは自分のサイトのユーザーが、電話番号で会員登録やログインができるようになるプラグインです。

携帯電話の番号を入力すれば登録やログインができるので、今までのようにメールアドレスを打ち込む必要がありません。

メールアドレスは長いので、打ち込むのが面倒だったり覚えていなかったりするものですが、携帯電話の番号なら簡単に打ち込め便利です。

会員登録やログインを簡単にして、他サイトと差をつけましょう。

ワンタイムパスワードでログイン

Digitsを導入すると、ログイン時にパスワードを打ち込む必要もありません。

今までのログインでは、難解で長いパスワードを打ち込む必要がありました。

また、サイトごとにパスワードを覚えておくのも大変です。

しかし、Digitsを使用すれば携帯電話にSMSで送られてくるワンタイムパスワードを打ち込むだけでログインができます。

ワンタイムパスワードは、その都度発行されるのでパスワードと違い忘れてしまうことがありません。

他人に知られる心配もないのでセキュリティ面でも安心です。

フォームの項目は自由に設定可能

Digitsは電話番号でのログインだけでなく、通常のメールアドレスでのログインにも対応しています。

メールアドレスやパスワードの入力、テキスト入力、ラジオボタンやチェックボックスなどログイン画面をカスタマイズできます。

フォームの項目は簡単に変更できるので、自分のサイトにあった形に設定しましょう。

Digitsを導入することで、あなたのサイトのユーザーの利便性を高めることができます。

結果、サイトへのアクセスが増えたり、サイトの会員が増えたりとメリットが発生します。

サイトを訪れるユーザーはめんどくさいことはしたくありません。

会員登録が面倒だと感じたら離脱してしまいます。

簡単に会員登録やログインができるようになるDigitsを利用して、サイト訪問者や会員数を増やしましょう。

Digitsの使い方

 

Firebase の設定

Digitsを使用する前にFirebaseへの登録が必要になります。

Firebaseの登録は無料プランでOKです。

Firebaseとは、Google提供のモバイル・Webアプリケーション向けのプラットフォームです。

Firebaseにはさまざまな機能がありますが、Digitsでは「Firebase Authentication」という電話番号を使用した通知や認証を行う機能を使用します。

それではFriebaseの登録方法をご説明します。

  1. https://firebase.google.com/にアクセスし、[コンソールへ移動] をクリックします。
  2. [プロジェクトを作成] をクリックします。
  3. 「プロジェクト名を入力します」に任意の名前を入力して、 規約の同意にチェックし、[続行]をクリックします。
  4. Google アナリティクスのチェックを外し、[プロジェクトを作成] をクリックします。
  5. [続行] をクリックします。
  6. [構築] > [Authentication] をクリックします。
  7. [Sign-in method] (表示されていない場合は [始める] )> [電話番号] をクリックします。
  8. 有効にする」にチェックを入れて、 [保存] をクリックします。
  9. [ドメインを追加] をクリックし、Digitsを使用するサイトのドメインを入力し、[追加] をクリックします。
  10. ドメインが追加されたら、[プロジェクトの概要] > [Webアイコン] をクリックします。
  11. 「アプリのニックネーム」にウェブサイト名を入力し、[アプリの登録]をクリックします。
  12. [コンソール進む] をクリックします。
  13. [1個のアプリ] をクリックします。
  14. [歯車のアイコン] をクリックします。
  15. 下へスクロールしていき、[構成] を選択し、「スクリプトの詳細」をコピーします。
  16. 自分のサイトのダッシュボードから「Disits」>「ゲートウェイ」>「Firebase構成」に先ほどコピーしたスクリプトの詳細を貼り付け[変更内容を保存] をクリックします。

以上でFirebaseの登録、Digitsへの関連づけが完了しました。

ログイン/会員登録フォームの設置方法

Digitsのフォームの設置はショートコードの貼り付けで可能です。ログイン・会員登録フォームの設置方法を解説します。

  1. サイトの管理画面から [Digits] > [ショートコード] をクリックします。ショートコードの一覧が表示されます。「ログイン/会員登録フォーム」のコードをコピーします。
  2. コピーしたコードを固定ページなど任意のページに貼り付けて公開します。

ショートコードの一覧を紹介します。

Digitsネイティブフォーム

  • ログイン/ 会員登録フォーム : [df-form]
  • ログインフォーム : [df-form-login]
  • 会員登録フォーム : [df-form-signup]
  • パスワードを忘れたフォーム : [df-form-forgot-password]
  • 電話番号の編集 : [df-edit-phone]

メニューやリンクでログイン/会員登録フォームを表示する方法

Digitsはメニューに簡単にログインフォームなどのリンクを追加できます。

  1. 管理画面の [外観] > [メニュー] >[Digitsメニュー項目] の順にクリックします。
  2.  メニューに追加したい項目にチェックを入れます。[メニューに追加] をクリックします。
  3. メニューにコードが追加されるので [メニューを保存] をクリックします。

簡単にメニューにDigitsの項目を追加することができました。

直接リンクを貼る場合は、以下のリンク先を指定します。

  • ログイン/登録:自分のサイトのアドレス/?login=true
  • 登録 : 自分のサイトのアドレス/?login=true&type=register
  • パスワードを忘れた場合 : 自分のサイトのアドレス/?login=true&type=forgot-password
  • ログインのみ : 自分のサイトのアドレス/?login=true&type=login

メニュー項目

メニュー項目のショートコードを紹介します。

  • ログイン/会員登録ページ : [dm-page]
  • ログイン/ 会員登録モーダル : [dm-modal]
  • ログインページ : [dm-login-page]
  • ログインモーダル : [dm-login-modal]
  • 会員登録ページ : [dm-signup-page]
  • 会員登録モーダル : [dm-signup-modal]
  • パスワードを忘れたページ : [dm-forgot-password-page]
  • パスワードを忘れたモーダル : [dm-logout]
  • ログアウト

各種設定

Digitsの設定画面のメニューを解説します。

  • ゲートウェイ:ここではFirebase の連携設定を行うことができます。Firebaceの設定ができていないと電話番号でのログインができないのできちんと行う必要があります。
  • 全般:ここではユーザー名の設定、電話番号のフォーマットなど基本的な設定と、ワンタイムパスワードの設定、リダイレクト先の設定などを行えます。
  • フォーム:フォームの入力項目を設定することができます。オン・オフで表示の切り替えができるのでカスタマイズが簡単です。
  • スタイル:使用するフォームのデザインを選ぶことができます。テンプレートを使用したり、背景の色など自由にカスタムすることもできます。
  • 翻訳:ショートコードを利用した時のメニューテキストを変更することができます。
  • ショートコード : ショートコードの一覧があるので、コピペで使用できます。