web-dev-qa-db-ja.com

ソーシャルメディアログインをアカウント登録が必要なWebサイトに統合するための一般的な手法

私は、ユーザーが選択したユーザー名で登録し、ユーザー名とある種のソルトパスワードを保持するデータベーステーブルにエントリが作成されるWebサイトを開発しました。次に、このアカウントを使用して、サイトが提供するサービスを操作します。

今、私はFacebookやTwitterなど、人気のあるものを使用してアカウントにサインアップする機能を提供することに興味があります。ただし、ログインワークフローをシステムに統合する方法がわかりません。

Facebook Login のドキュメントを読みましたが、それをユーザーアカウントの設計にどのように統合するかはまだわかりません。

これが私の独自の登録ワークフローの仕組みです

  1. ユーザー名/パスワードを選択
  2. 「ユーザー」テーブルにエントリを作成します
  3. ユーザー名をチェックして認証し、パスワードが一致するかどうかを確認します

Facebookのログインでは、「Facebookでログインする」というボタンをクリックするだけで、Facebookの認証情報で認証されるのが理想的です。ただし、FacebookのIDに関連付けるユーザーをどこに作成するかはわかりません。

だから私の質問は...

Facebook（またはTwitterやLinkedinなどの他のソーシャルメディア）を使用してシステムにアカウントを登録する一般的な方法は何ですか？すべてのユーザーを一律に管理したいので、ユーザーがアカウントを登録する方法を選択した場合でも、それらはすべて、単一のusersテーブルで処理され、アカウントの方法を気にすることなくクエリと関連付けを行うことができます。作成されたか、ログイン方法。

javascriptauthenticationfacebook
3
MxLDevs

サーバー側のFacebook APIを使用すると、一般的なワークフローは次のようになります。

  1. ユーザーが「Facebookでログイン」してクリック
  2. Facebookログインのポップアップウィンドウが表示されます
  3. ユーザーはFacebookのユーザー名とパスワードを入力し、[送信]をクリックします
  4. トークンを使用してFacebookからコールバックを受け取ります。
  5. このトークンを使用してFacebook認証サービス（ https://graph.facebook.com/oauth/access_token と具体的なパラメーターを指定）にアクセスし、受信してaccess_tokenを取得します。
  6. このaccess_tokenを使用すると、ユーザー情報、FacebookのユーザーID、ユーザー名、電子メール、画像などを取得できます。
  7. この情報を使用して、このユーザーがシステムにすでに存在するかどうかを確認したり、初めての場合は新しいユーザーを作成したりできます。

これは典型的なOauth2ワークフローであり、初めて使用するときに非常に混乱します。 LinkedIn、Twitter、Google +などの他のソーシャルネットワークは、Oauthに基づく非常に類似したアプローチを使用しています（たとえば、必要な具体的なアクセス許可の表現方法など、いくつかの違いがあります）詳細）。

Facebook js apiを使用してログインする別のオプションです。このオプションは、Facebookのドキュメントで説明されています。 https://developers.facebook.com/docs/facebook-login/login-flow-for-web /v2.1 （FB.login()を使用したオプションは、私の意見ではより簡単でクリーンです）。このアプローチの問題は、それがあまり標準的ではなく、各プロバイダーが非常に異なるアプローチをとることができることです。 （多くのログインプロバイダーを使用する場合は、ログインのためだけに多くのjsライブラリをロードする必要があります）。

2
AlfredoCasado