JavaScriptでのFacebookログインを実装する方法

javascriptアプリにfacebookログインを追加する はじめに このセクションでは、back4appを通じてjavascriptのfacebook apiを使用する方法を案内します。 このチュートリアルでは、facebook sdkをparseダッシュボードにリンクし、facebookの ログイン ログイン , サインアップ サインアップ , ログアウト ログアウト , リンク リンク と リンク解除 リンク解除 機能を実装する方法を学びます。 以下の手順に従うことで、次のようなシステムを構築できるようになります back4app javascript例 facebookログインアプリ いつでも、このチュートリアルで構築した完全なandroidプロジェクトにアクセスできます。 githubリポジトリ 前提条件 このチュートリアルを完了するには、次のものが必要です： back4appに接続された基本的なjavascriptアプリ。 注意： 私たちの javascript install parse sdkチュートリアル で作成したアプリや、back4appに接続された任意のアプリを使用できます。 アプリ用のドメイン。 注意： facebook login apiを使用するにはドメインが必要です。ウェブホスティングについて詳しくは、 back4app webhostingチュートリアル をご覧ください。 バージョン2 6 5以上のparse server。 注意： parse facebook sdkは、バージョン2 6 5以上のparse serverでのみ動作します。このチュートリアルではこのバージョンを使用します。したがって、古いバージョンのparseを使用している場合は、アップグレードを検討してください。 1 facebookの設定 javascript用のfacebook sdkを使用するには、次の手順に従う必要があります： 「 facebook開発者ウェブサイト 」にアクセスし、アカウントとアプリを作成します。 facebookアプリを設定します。 左メニューにある「facebookログイン > クイックスタート」をクリックしてfacebookログインを有効にし、その後、 facebookクイックスタートドキュメント に従って有効化を行います。 back4appをfacebookアプリにリンクするには、「 back4app 」アカウントにログインし、アプリの「 サーバー設定 サーバー設定 」をクリックし、「 設定 設定 」をクリックします。「facebookログイン」ブロックは次のようになります 5\ 次に、facebookアプリの「 ダッシュボード 」にあるfacebookアプリidを追加します。 6\ アプリケーションにfacebook javascript sdkを読み込むために、 これらの指示 に従います。 7\ 「 fb init() fb init() 」の呼び出しを「 parse facebookutils init() parse facebookutils init() 」の呼び出しに置き換えます。例えば、facebook javascript sdkを非同期で読み込む場合、あなたの「 fbasyncinit fbasyncinit 」関数は次のようになります init js 1 // initialize parse 2 parse initialize("your parse app id here", "your javascript key here"); // don't forget to change these keys 3 parse serverurl = "https //parseapi back4app com/"; 4 5 // load the facebook api asynchronous when the window starts loading 6 window\ fbasyncinit = function() { 7 parse facebookutils init({ // this line replaces fb init({ 8 appid '{facebook app id}', // facebook app id 9 cookie true, // enable cookies to allow parse to access the session 10 xfbml true, // initialize facebook social plugins on the page 11 version 'v2 3' // point to the latest facebook graph api version, found in fb's app dashboard 12 }); 13 14 // put here code to run after the facebook sdk is loaded 15 }; 16 17 // include the facebook sdk 18 (function(d, s, id){ 19 var js, fjs = d getelementsbytagname(s)\[0]; 20 if (d getelementbyid(id)) {return;} 21 js = d createelement(s); js id = id; 22 js src = "//connect facebook net/en us/sdk js"; 23 fjs parentnode insertbefore(js, fjs); 24 }(document, 'script', 'facebook jssdk')); 2 ログイン まず、ユーザーをparseデータベースに保存する facebookでログインする 関数を作成します。 残念ながら、facebookが提供するログインボタンを使用することはできません。なぜなら、それを使用してログインすると新しいユーザーが parseダッシュボード parseダッシュボード に保存されないからです。しかし、 parse sdk for facebook を使用すると、サーバー側の問題が解決されます。 facebookログインボタンの簡単なデザインをhtmlとcssで作成するには、次の実装を参照してください facebookログインボタン ログイン実装を開始するには、次のログイン関数を呼び出す onclick onclick イベントをfacebook ログイン ログイン ボタンに割り当てます。この関数を構築するには、以下の手順に従ってください facebookのログインをparseと一緒に実行するには、 parse facebookutils login parse facebookutils login を使用します。この関数はfacebookの権限を引数として受け取ります。この例では、これらの権限は公開プロフィールとメールに対応します。 注意 facebookログイン権限リファレンス を参照してください。 2\ ユーザーがすでにデータベースに存在するか確認します。存在する場合は、別のページにリダイレクトします。 3\ fb api fb api を呼び出して新しいユーザーの情報を取得します。この例では、ユーザーのid、名前、メールアドレス、権限にアクセスできます。 注意 この機能について詳しく知りたい場合は、 こちら をクリックしてください。 4\ ユーザーのプロパティ、ユーザー名、メールアドレスを設定し、データベースに保存します。 5\ ページをリダイレクトします。 以下が login() コードです login js 1 function login() { 2 parse facebookutils login("public profile,email", { 3 success function(user) { 4 if (!user existed()) { 5 fb api('/me?fields=id,name,email,permissions', function (response) { 6 user set('username', response name); 7 user set('email', response email); 8 9 user save(null, { 10 success function(user) { 11 alert('user logged in and sign up through facebook, with username ' + user get('username') + ' and email ' + user get('email')); 12 13 // you should redirect the user to another page after a successful login 14 window\ location replace('http //js fb login back4app io/logout html'); 15 }, 16 error function(user, error) { 17 alert('failed to save user to database with error ' + error message); 18 } 19 }); 20 }); 21 } else { 22 alert("user logged in through facebook!"); 23 // you should redirect the user to another page after a successful login 24 window\ location replace('http //js fb login back4app io/logout html'); 25 } 26 }, 27 error function(user, error) { 28 console log("user cancelled the facebook login or did not fully authorize "); 29 } 30 }); 31 } 3 ログアウト ログアウト機能は、ログイン機能よりもはるかに簡単です。今回は、facebookが提供するボタンを使用できるようになります。ただし、これはログアウト目的のみに使用されるため、ログインするにはparseの機能を使用する必要があります。したがって、ユーザーがすでにfacebookにログインしていて、ログアウトしたい場合にのみ、このボタンを使用するべきです。 facebookボタンの公式リファレンスを見るには、 こちら をクリックしてください。 facebook sdkを使用してこのボタンを実装する方法は次のとおりです logout html 1 注意 この要素にはコールバックがあり、 onlogin onlogin があり、ユーザーがログアウトするときに私たちの関数 logoutwithfacebook logoutwithfacebook が呼び出されます。そうです、その通りです onlogin onlogin イベントはログアウト時に発火します。 この logoutwithfacebook logoutwithfacebook 関数は、ユーザーを現在のparseセッションから単純にログアウトさせ、以下に示すように別のページにリダイレクトします logout js 1 function logoutwithfacebook() { // the callback function 2 parse user logout(); // delete the current session for the user 3 alert('user logged out of facebook!'); 4 window\ location replace('http //js fb login back4app io'); // redirects the user to another webpage 5 } 4 リンクとアンリンク parse facebookで利用可能な最後の機能は リンク リンク と アンリンク アンリンク 機能です。 「 リンク 」は、既存の parse user parse user をそのfacebookアカウントに関連付ける行為であり、「 アンリンク 」はこの関連付けを削除することを指します。この関連付けは、あなたの parse dashboard parse dashboard の authdata authdata 列で見ることができます、ここに 列のデータを使用して、あなたの リンク リンク と アンリンク アンリンク 機能を検証できます。 ステップ 4 1 リンク 現在のユーザーが再度リンクされる前にリンクされているかどうかを確認する リンク リンク 関数です。これは非常に シンプルで、以下に示すように parse facebookutils parse facebookutils sdkを使用します。 link js 1 function link() { 2 var user = parse user current(); 3 if (!parse facebookutils islinked(user)) { 4 parse facebookutils link(user, null, { 5 success function(user) { 6 alert("woohoo, user logged in with facebook!"); 7 }, 8 error function(user, error) { 9 alert("user cancelled the facebook login or did not fully authorize "); 10 } 11 }); 12 } 13 else { 14 alert("can't link user to facebook because he is already linked"); 15 } 16 } ステップ 4 2 アンリンク 現在のparseユーザーに対して アンリンク アンリンク 関数を呼び出すだけです。 parse facebookutils unlink parse facebookutils unlink を現在のparseユーザーに対して呼び出します。 unlink js 1 function unlink() { 2 var user = parse user current(); 3 parse facebookutils unlink(user, { 4 success function(user) { 5 alert("the user is no longer associated with their facebook account "); 6 } 7 }); 8 } 「 完了！ この時点で、あなたはfacebookの ログイン ログイン と ログアウト ログアウト 機能をアプリで設定して使用する方法だけでなく、back4appとparseでそれらを使用する方法も学びました。 あなたは今、 parse facebook sdk parse facebook sdk の使用をマスターし、自由に使用を開始できます。 jでparse sdkの詳細を確認してください。 avascript sdk apiリファレンス と parseオープンソースのjavascript sdkに関するドキュメント 。