サイトでのユーザー登録と承認-ワンクリックで-カスタムFacebookボタンを使用。 2017年

それで、私は1つのファンプロジェクトの開発を始めました。 プロジェクトの基本的な考え方は単純です。つまり、誰もが何かに賭け、賭け、取引を行い、制限なしにできるプラットフォームです。 本質的にエンターテイメントプロジェクト。

そしてもちろん、この質問は「摩擦」が最も少ない便利なユーザー認証になりました。 少し考えてから、Facebook経由で認証を選択しましたが、そこで停止することはないと思います。GoogleAcc、VK、およびTweetを使用して認証付きの記事をいくつか読んでください。


要するに！ インターネット上で、承認の問題を説明するいくつかのトピックを見つけました。いくつかの情報は役立ちましたが、タスクを解決するものは見つからなかったため、タスクを完了したときに、この記事を書くことにしました。

完了：カスタムボタンを1回クリックするだけで、データベースへのユーザー登録とサイトでのその承認（好みに合わせて任意の写真）

1. FBでのアプリケーションの登録：

a。 https://developers.facebook.com/apps/
b。 アプリケーションの登録、サイトのアドレス、回答用のデータを受け入れるページなどを登録します。 インターフェイスはとてもフレンドリーで、facebookは私たちを愛しています。 したがって、私はすべてとすべてをリストしません。 そこから、 アプリケーションIDとWebサイトのアドレスが必要になります。

2.フロントエンド：

私のサイトから完全な実例を示します。 リンクをクリックすると、関数が呼び出されます：「fb_login（）」、関数は最初に「ユーザーはFacebookにログインしていますか？」をチェックします。

fb_login（）-FBとの通信を開始します
handle_fb_data（）-FBからバックエンドへ受信したユーザーデータの受信と送信に従事しています

<a class="fb_login_btn" onclick="fb_login();return false;"><img src="/image/fb_login.png" border="0" alt=""></a> <script> function handle_fb_data(response){ FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); console.log('  : '+JSON.stringify(response)); // alert('  : '+JSON.stringify(response)); $.ajax({ type: 'post', url: '/do/reg/fb', data: response, success: function(msg) { console.log(msg); if ((msg=='')||(msg=='')){window.location.reload();} }, error: function(){} }) }); } function fb_login(){ FB.getLoginStatus(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... '); handle_fb_data(response); } else { console.log('      ,   '); FB.login(function(response){ if (response.authResponse) { console.log('Welcome! Fetching your information.... '); handle_fb_data(response); } else { console.log('     '); } }); } }, { scope: 'email,id' }); } window.fbAsyncInit = function() { FB.init({ appId : '{  ID }', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); }; // Load the SDK asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

さて、実際にはすべてがフロントエンドにあるので、バックエンドについて考えてみましょう。

3. BEC END

  public function fb(){ if (($this->session->userdata('logged_in') != true) ){ // 1.   ,    . // 2.  ,  ,          FB_ID //  ,    // 3.     ,        // ,               , .. "" $query = $this->db->get_where('users', array('fb_id' => $_POST['id'])); if ($query->num_rows() > 0) { foreach ($query->row_array() as $key => $value) { $userdata[$key] = $value; } $userdata["logged_in"] = true; //,         -  ,  ,     if ($this->session->userdata('bet_code_last') != false) { $data = array( 'start_user_id' => $userdata['id'] ); $this->db->where('bet_code', $this->session->userdata('bet_code_last')); $this->db->update('bet', $data); $this->session->sess_destroy(); } $this->session->set_userdata($userdata); echo ''; } else { $data = array( 'fb_id' => $_POST['id'], 'lang' => 'en', 'name' => $_POST['name'], ); // ,       ,         if( preg_match('/[-]/i', $_POST['name']) ){$data['lang']='ru';} $this->db->insert('users', $data); //      ,      ;) $data["logged_in"] = true; $this->session->set_userdata($data); echo ''; } }else{echo '  ';} } 

PHPコードは、Codeigniterフレームワークのデータベースアクセス関数を使用します。 まあ、一般的に、私はプロセス全体を説明しましたが、それが非常に明確でアクセスしやすいことを願っています。

注：

1.それから、彼自身が最初にステータスを確認し、次にログインフォーム（フロントエンドで）を呼び出す方が良いと血で決心しました。

2.データがセッションに入力された後、ページはまだ更新されていないため、バックエンドがすべてが完了したことを確認した時点で、この行でページを更新します。
if（（msg == 'logged in'）||（msg == 'logged in'））{window.location.reload（）;}

ご清聴ありがとうございました！