JavaScriptでのFacebookログインを実装する方法
このセクションでは、Back4Appを通じてJavaScriptのFacebook APIを使用する方法を案内します。
このチュートリアルでは、Facebook SDKをParseダッシュボードにリンクし、Facebookの ログイン, サインアップ, ログアウト, リンク と リンク解除機能を実装する方法を学びます。
以下の手順に従うことで、次のようなシステムを構築できるようになります: Back4App JavaScript例 Facebookログインアプリ.
いつでも、このチュートリアルで構築した完全なAndroidプロジェクトにアクセスできます。GitHubリポジトリ.
このチュートリアルを完了するには、次のものが必要です：
- Back4Appに接続された基本的なJavaScriptアプリ。
- アプリ用のドメイン。
- バージョン2.6.5以上のParse Server。
- 注意：Parse Facebook SDKは、バージョン2.6.5以上のParse Serverでのみ動作します。このチュートリアルではこのバージョンを使用します。したがって、古いバージョンのParseを使用している場合は、アップグレードを検討してください。
JavaScript用のFacebook SDKを使用するには、次の手順に従う必要があります：
- Facebookアプリを設定します。
- Back4appをFacebookアプリにリンクするには、「Back4App」アカウントにログインし、アプリの「サーバー設定」をクリックし、「設定」をクリックします。「Facebookログイン」ブロックは次のようになります:
まず、ユーザーをParseデータベースに保存する Facebookでログインする 関数を作成します。
残念ながら、Facebookが提供するログインボタンを使用することはできません。なぜなら、それを使用してログインすると新しいユーザーが Parseダッシュボード に保存されないからです。しかし、 Parse SDK for Facebook を使用すると、サーバー側の問題が解決されます。
Facebookログインボタンの簡単なデザインをHTMLとCSSで作成するには、次の実装を参照してください: Facebookログインボタン.
ログイン実装を開始するには、次のログイン関数を呼び出す onClick イベントをFacebook ログイン ボタンに割り当てます。この関数を構築するには、以下の手順に従ってください:
- FacebookのログインをParseと一緒に実行するには、 Parse.FacebookUtils.logIn を使用します。この関数はFacebookの権限を引数として受け取ります。この例では、これらの権限は公開プロフィールとメールに対応します。
注意: Facebookログイン権限リファレンスを参照してください。
2. ユーザーがすでにデータベースに存在するか確認します。存在する場合は、別のページにリダイレクトします。 3. FB.apiを呼び出して新しいユーザーの情報を取得します。この例では、ユーザーのID、名前、メールアドレス、権限にアクセスできます。
注意: この機能について詳しく知りたい場合は、こちらをクリックしてください。
4. ユーザーのプロパティ、ユーザー名、メールアドレスを設定し、データベースに保存します。 5. ページをリダイレクトします。
以下が logIn() コードです:
ログアウト機能は、ログイン機能よりもはるかに簡単です。今回は、Facebookが提供するボタンを使用できるようになります。ただし、これはログアウト目的のみに使用されるため、ログインするにはParseの機能を使用する必要があります。したがって、ユーザーがすでにFacebookにログインしていて、ログアウトしたい場合にのみ、このボタンを使用するべきです。
Facebookボタンの公式リファレンスを見るには、こちらをクリックしてください。
Facebook SDKを使用してこのボタンを実装する方法は次のとおりです:
注意: この要素にはコールバックがあり、onloginがあり、ユーザーがログアウトするときに私たちの関数logOutWithFacebookが呼び出されます。そうです、その通りです: onloginイベントはログアウト時に発火します。
このlogOutWithFacebook関数は、ユーザーを現在のParseセッションから単純にログアウトさせ、以下に示すように別のページにリダイレクトします:
Parse Facebookで利用可能な最後の機能は リンク と アンリンク 機能です。
「リンク」は、既存の Parse.User をそのFacebookアカウントに関連付ける行為であり、「アンリンク」はこの関連付けを削除することを指します。この関連付けは、あなたの Parse Dashboard の authData 列で見ることができます、ここに:
列のデータを使用して、あなたの リンク と アンリンク 機能を検証できます。
現在のユーザーが再度リンクされる前にリンクされているかどうかを確認する リンク 関数です。これは非常に シンプルで、以下に示すように Parse.FacebookUtils SDKを使用します。
現在のParseユーザーに対して アンリンク 関数を呼び出すだけです。 Parse.FacebookUtils.unlink を現在のParseユーザーに対して呼び出します。
「
この時点で、あなたはFacebookの ログイン と ログアウト 機能をアプリで設定して使用する方法だけでなく、Back4AppとParseでそれらを使用する方法も学びました。
あなたは今、 Parse Facebook SDK の使用をマスターし、自由に使用を開始できます。
JでParse SDKの詳細を確認してください。avaScript SDK APIリファレンス と ParseオープンソースのJavascript SDKに関するドキュメント。