セキュリティの⾼い会員サイト を作るため …...1 セキュリティの...

1

セキュリティの⾼い会員サイトを作るためのWordPressプラグイン

◆必要な契約SPIRAL基本契約SPIRALAPIオプション（分間10件以上決済の発⽣が想定される場合）

◆必要なスキルWordpress知識

◆作業⼯数1営業⽇ ※サイト構築は除く

2

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート※（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

⼿順

※当マニュアルはSPIRALが提供するテンプレートアプリを使⽤する場合の 作業⼿順となっております。  テンプレートアプリに含まれる内容は主に以下となります。 ・会員DB ・会員新規登録、変更、退会フォーム ・ログイン処理⽤プログラム

詳細はアプリインポート後、「ドキュメント」リンクよりドキュメントをご確認ください。

3

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

4

②「＋（プラス）」ボタンをクリック

③「アプリセンターから選ぶ」をクリック

①「アプリ」をクリック

【SPIRAL】「会員管理アプリ for WP」インポート

5

④「会員管理アプリ for WP」の「選択」をクリック

⑤「次へ」をクリック

【SPIRAL】「会員管理アプリ for WP」インポート

6

【SPIRAL】「会員管理アプリ for WP」インポート

⑥「次へ」をクリック

⑦「次へ」をクリック

7

⑧「次へ」をクリック

⑨「次へ」をクリック

【SPIRAL】「会員管理アプリ for WP」インポート

8

⑩「次へ」をクリック

⑪「引き続き設定を⾏なう」をクリック

【SPIRAL】「会員管理アプリ for WP」インポート

9

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）、「２．SPIRALの設定 【SPIRAL】「WP⽤ログイン認証⽤」フォームを設定」（P.23〜）で設定する値を取得します。

●設定項⽬：認証設定＞マイエリアタイトル

①「wpmls_area」をクリック

②「エリアタイトル」をメモ 例）wpmls_area

※ヘッターメニューから参照する場合、 WEB＞マイエリア＞wpmls_area をクリックしてください。

10

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：認証設定＞ログイン認証⽤フォームのURL

①「WP⽤ログイン認証⽤」をクリック

②「URL」をメモ

※ヘッターメニューから参照する場合、 WEB＞フォーム＞WP⽤ログイン認証⽤ をクリックしてください。

11

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：会員情報設定＞会員⼀覧検索タイトル

①「WP⽤会員⼀覧」をクリック

②「WP⽤会員⼀覧検索フォーム」の「設定」をクリック

※ヘッターメニューから参照する場合、 WEB＞⼀覧表・単票＞WP⽤会員⼀覧＞WP⽤会員⼀覧検索フォーム の「設定」をクリックしてください。

12

【SPIRAL】「会員管理アプリ for WP」インポート

②「キーワード」をメモ 例）wpmls_searchform

13

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：各種リンク設定＞会員新規登録ページURL

①「WP会員新規登録」をクリック

②「URL」をメモ

※ヘッターメニューから参照する場合、 WEB＞フォーム＞WP会員新規登録 クリックしてください。

14

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：各種リンク設定＞パスワード再設定ページURL

①「WP⽤会員PW忘れ⼿続き」をクリック

②「URL」をメモ

※ヘッターメニューから参照する場合、 WEB＞フォーム＞WP⽤会員PW忘れ⼿続き クリックしてください。

15

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：各種リンク設定＞会員情報変更ページID

①「wpmls_area」をクリック

※ヘッターメニューから参照する場合、 WEB＞マイエリア＞wpmls_area をクリックしてください。

16

【SPIRAL】「会員管理アプリ for WP」インポート

●設定項⽬：各種リンク設定＞会員情報変更ページID

②「カスタムマイページ」をクリック

17

【SPIRAL】「会員管理アプリ for WP」インポート

③「WP会員情報変更」の「編集」をクリック

④「差し替えキーワード（マイページID）」のマイページIDをメモ 例）121833

18

【SPIRAL】「会員管理アプリ for WP」インポート

●設定項⽬：各種リンク設定＞パスワード変更ページID

①「WP⽤会員PW変更」をクリック

※当画⾯までの⾏き⽅はP.15〜16を参照ください。

②「差し替えキーワード（マイページID）」のマイページIDをメモ 例）121835

19

【SPIRAL】「会員管理アプリ for WP」インポート

●設定項⽬：各種リンク設定＞退会ページID

①「WP⽤会員退会」の「編集」をクリック

※当画⾯までの⾏き⽅はP.15〜16を参照ください。

②「差し替えキーワード（マイページID）」のマイページIDをメモ 例）121834

20

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

21

【SPIRAL】SPIRAL APIの設定

①「開発」をクリック

②「スパイラルAPI」をクリック

③「トークン発⾏」をクリック

⑤「引き続き設定を⾏なう」をクリック

④以下を設定し、「発⾏する」をクリックタイトル：任意 例）wpmls_highステータス：有効APIタイプ制限：制限する利⽤可能APIタイプ：ハイレベル└許可するマイエリア：  P3.でインポートしたマイエリア  例）wpmls_area

22

【SPIRAL】「会員管理アプリ for WP」インポート

後続の「３．WordPressの設定（２）SPIRALとの接続情報を設定」（P.33〜）で設定する値を取得します。

●設定項⽬：スパイラルAPIトークン＞APIトークン、APIトークンシークレット

「APIトークン」、「APIトークンシークレット」をメモ

23

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

24

【SPIRAL】「WP用ログイン認証用」フォームを設定

①「WP⽤ログイン認証⽤」をクリック

②「⼊⼒ページ」をクリック

25

③以下の値を書き換える。 MLS_API_TOKEN_TITLE：  P.20で発⾏したAPIトークタイトル MLS_MEMBER_AREA_TITLE：  P.9でメモしたマイエリアタイトル

④「変更内容をフォームに反映」をクリック

【SPIRAL】「WP用ログイン認証用」フォームを設定

26

⑤「×」をクリック。

【SPIRAL】「WP用ログイン認証用」フォームを設定

27

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

28

【WP】「WP Member Login by SPIRAL」インストール

①以下へアクセスhttp://wordpress.org/plugins/wp-member-login-by-spiral/

②「Download」をクリック。

29

【WP】「WP Member Login by SPIRAL」インストール

④「プラグイン」をクリック。

③お持ちのWordpressへログイン。

30

【WP】「WP Member Login by SPIRAL」インストール

⑤「新規追加」をクリック。

⑥「ファイルのアプロード」をクリック。

31

【WP】「WP Member Login by SPIRAL」インストール

⑦アップロード後、 「今すぐインストール」をクリック

⑧インストール完了後、 「プラグインを有効化」をクリック

32

【WP】「WP Member Login by SPIRAL」インストール

⑨インストール完了

33

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

34

【WP】SPIRALとの接続情報を設定

①「設定」をクリック

②「WP Member Login by SPIRAL」をクリック

35

③各値を設定し、「変更を保存」をクリック ※詳細は次ページを参照ください

【WP】SPIRALとの接続情報を設定

36

「WP Member Login by SPIRAL」画⾯の設定内容

スパイラルAPIトークンAPIトークン： P.22でメモしたAPIトークンAPIトークンシークレット： P.22でメモしたAPIトークンシークレット

認証設定マイエリアタイトル： P.9でメモしたマイエリアタイトルログイン認証⽤フォームのURL： P.10でメモしたログイン認証⽤フォームのURL

会員情報設定会員⼀覧検索タイトル： P.11でメモした会員⼀覧検索タイトル会員情報⽤フィールドのキー： name※ログイン時に表⽰する会員の情報を設定します。※「name」という設定は⼀覧表に「lastName」と「firstName」の2つのフィールドが存在する場合に限り有効となる設定で、それらのフィールドを⽂字列連結した形で表⽰する特殊なキーとなっています。※ログインIDであるメールアドレスを表⽰させたい場合は、「email」と設定して下さい。

各種リンク設定会員新規登録ページURL： P.13でメモした会員新規登録ページURLパスワード再設定ページURL： P.14でメモしたパスワード再設定ページURL会員情報変更ページID： P.15でメモした会員情報変更ページIDパスワード変更ページID： P.18でメモしたパスワード変更ページID退会ページID： P.19でメモした退会ページID

【WP】SPIRALとの接続情報を設定

37

１．必要な環境の準備WordPressで構築したWebサイト

２．SPIRALの設定（１）「会員管理アプリ for WP」インポート（２）SPIRAL APIの設定（３）「WP⽤ログイン認証⽤」フォームを設定

３．WordPressの設定（１）「WP Member Login by SPIRAL」インストール（２）SPIRALとの接続情報を設定（３）ウィジェットを追加

38

【WP】ウィジェットを追加

①「外観」をクリック

②「ウィジェット」をクリック

39

【WP】ウィジェットを追加

③「WP Member Login by SPIRAL」を配置したい場所へドラッグ

④「保存」をクリック

40

【WP】ウィジェットを追加