登録ログイン

中国人向けホームページ作成。第4関門「会員登録画面」

僕は中国人向けホームページを作っています。本ブログではそんな中で分かったノウハウをいくつか公開しています!

2つのトピックがあります。

  • ★中国人向け電子決算導入について
https://h200tx.com/other/china-pay-start
アリババ/テンセントの勢いとトヨタの黄昏
みんなで国産車を買ってトヨタ自動車を応援しよう!
  • ★中国人向けホームページ作成について
https://h200tx.com/its/china-hp-lang
Wordpress大学
中国人が作ったWordpress解説サイト「Wordpress大学」を紹介します!

今回はホームページ作成について書きます。中国でも使える会員登録画面を作ろう!

 

会員登録画面の作り方

ヤリ場サイト

ヤリ場サイト作ります!~脱サラして中国で一発当てる
自分の人生集大成で中国エロサイトをやります。これで天下取りますよ!

この前ヤリ場サイトの構想を言いました。ヤリ場サイトはWordPressで作る会員制サイトです。サイトの特徴として、最初に会員登録しないと使えないです。

脱サラして中国で一発当てるブログ
オレ
今やりたいことはメールアドレスによる会員登録です

Theme My Login — WordPress プラグイン

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

以下TMLとします。Wordpressで会員サイトを作る時によく使われるプラグインです。これを使うと。。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

こんな感じであっさり会員登録画面ができます!メールアドレスを登録するだけで誰でも会員になれる優れもの。今回の目的にばっちり合っています!!

Google reCAPTCHA

TMLの会員登録画面だけど、そのままでは弱点があります。メールアドレスの入力欄と登録ボタンだけなので、いたずらでもユーザ登録し放題です。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

画面のユーザ達はいたずらで登録されたユーザです。TMLの登録画面を設置した直後から、スパム(ハッカー)によるいたずらゴミユーザが際限なく増えます。というわけで、会員登録画面のセキュリティ対策が必要です。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

スパムによるいたずら登録を防ぐためのセキュリティ対策がこれです!reCAPTCHAと言います。「僕はロボットではありません」をクリックすると。。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

こんな感じの質問が表示される。これに正解しないと会員登録ができないのだ。このセキュリティはTMLに標準で入っていて、これを設定すればスパムによるいたずら登録は無くなります。

reCAPTCHA自体はGoogleが提供しています。Google reCAPTCHAと言います。TMLを始め多くのプラグインはGoogle reCAPTCHAを使います。解説サイトもGoogle reCAPTCHAを使う事が前提である説明が多いです。

 

中国ならではの事情

 

404 NOT FOUND | 脱サラして中国で一発当てるブログ
脱サラして単身で中国上海に渡り、失敗した男のブログです。舞庁、置屋、などの夜遊び情報を中心に、日々の出来事を面白おかしく配信中です。蘇州など外地もカバーしています

まず中国ではGoogleが使えないことが前提で。。

Google reCAPTCHAは使えない

中国ではGoogle reCAPTCHAは使えないです。この段階でTMLを使った会員制サイトの構想が摘みますw

https://h200tx.com/its/china-hp-lang

ちなみに転売サイトも会員制サイトなんだけど、あっち(Paid Memberships Pro)はお金を払わないと会員登録できない作りなので、今回のTMLのようにいたずら登録されることはありません。

中国の会員制サイトはどうやっていたずら登録を阻止している?

答え⇒Googleじゃない認証機能を自前で作っています。大きく3パターンあります!

SMSでの認証

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

一番よく見るのがこのパターン。携帯番号を入力して青いボタンを押すと携帯電話にSMSメッセージが送信されるのだ。そこに書かれているキーを入力するというもの。

SMS認証を個人で実装するのは現実的でないのでこの方法は使えません。理由は、

  • 1SMSごとにお金かかる
  • 身元の保証が必要

など。

外部SNSとの連携

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

日本でもよくあるよね。会員登録にFacebookアカウントを使うもの。

中国人向けホームページ作成。第三関門「SNSシェアボタンの設置1」
中国でのホームページ作成のポイントについて述べます。これまで2つのポイントについて述べました。 今回はSNSシェアについてです。 【2018/11追記】 本ページは古いので↑こちらをご覧ください。 ...

SNSの種類が中国版になった認証です。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

これも個人レベルで導入するのは難しそうだ。

完全自前の認証

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

例えばこんなの!パズルのピースを合わせるように下のバーをシークするのだ。これも個人レベルで作るのは無理だwこんな凝ったものじゃなくてもいいんだけどね。。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

このレベルで良いw验证码というのがreCAPTCHAのこと。

 

reCAPTCHA認証を自作する

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

Form Makerを使う

何か使えそうなものは無いかなー、と探していたところ良いもの見つけた!

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

Form Makerを使うとこのような登録フォームが作れます!これはForm MakerのSimple Captcha機能です。当然このままじゃ使えません。Form Makerを入口としてTMLに処理を渡す必要があります。

Form MakerとTMLを合体

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

これが完成形です。ついでにTMLの悪い所も直します。TMLはこんな処理になっています。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

ユーザが使えるようになるまで複雑で長いです。あと登録チェックがザル、っていうか無い。(それもそのはず、TMLはGoogle reCAPTCHAと一緒に使うことがほぼ必須なのだ)

Form MakerとTMLを合体させたフォームを作ってこの部分をすっきりさせます。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

これが中国人向け会員サイトで、googleを使わず、しかも個人レベルで実装できるベストな形かな。今の自分のスキルではw

ちなみにCaptchaの判定はサーバ側であることが重要です。クライアントでやろうとすると判定ロジックが解析されて容易に突破されるのだw

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

Form MakerとTMLを合体。やり方

簡単に言うと。。

  1. WordPressにそれぞれのプラグインをインストールする
  2. TMLの設定を「ログイン方法メールアドレス」「モデレーション有り」にする
  3. Form Makerで「メールアドレス」「Simple Captcha」を搭載したフォームを作る
  4. Form Makerで作ったフォームを開いてソースコードを編集する
  5. →「メールアドレス」欄の名前とフォームの送信先をTMLと同じにする。あと不要なコードを削除する
  6. TMLの登録画面(固定ページの/register)を編集し、元の定義を消してForm Makerのソースコードを張り付ける

ざっとこんなところ。WordpressのテーマはSimplicityです。

中国人向けホームページ作成。第4関門「会員登録画面」 参考画像

会員登録画面まとめ

 

どうだろう?中国独自の事情を乗り越え、ある程度のセキュリティを持った会員登録画面を作る方法を紹介しました。

脱サラして中国で一発当てるブログ
オレ
ここまで調べて作りこむのに2カ月かかったww

これはまだヤリ場サイトのほんの入り口でしかないです。先は長い!!

 

 

>>次のページは

アリババクラウドでWordpressサイトを構築する方法

 

タイトルとURLをコピーしました