web-dev-qa-db-ja.com

localhostでのFacebookログイン-接続は安全ではありません

Reactプロジェクト、Facebook Javascript SDKを使用してFacebookログインを追加しています。これは tutorial に従いました。

ページに追加したログインボタンをクリックすると、次のエラーが表示されます。

FacebookはXが情報を転送するために安全な接続を使用していないことを検出しました。 Xがセキュリティ設定を更新するまで、Facebookを使用してXにログインすることはできません。

enter image description here

私のアプリは開発モードです。これは、（Facebookのドキュメントによれば）localhostリダイレクトが許可されることを意味するはずですが、そうではありません。

また、Valid OAuth Facebook開発者ページのリダイレクトURIにlocalhostを追加してみましたが、問題は解決しませんでした。

私はこれに続いてngrokを使用して問題を部分的に解決しました tutorial ですが、サーバー全体とすべてを再起動しなければならないことが多いため、非常にバグが多く（動作しない場合があります）、実用的ではありません。 。

javascriptreactjsfacebookhttphttps
9
druskacik

まず、ドメイン名を使用する必要があります。これは、hostsファイルで行うことができます

/ etc/hosts：

127.0.0.1   test.example.com
255.255.255.255 broadcasthost
::1             localhost

次に、開始スクリプトを次のように更新する必要があります

package.json：

...
"start": "HTTPS=true react-scripts start"
...

そしてあなたのreactjsアプリを起動します：

npm run start

その後、https://test.example.comにアプリが表示されます。もちろん、このドメインを信頼できるURLとしてFacebookアプリに追加する必要があります

1
Okkano

角度の場合：セキュアソケットレイヤーでアプリを提供しようとしますtrueモードのFacebookがセキュアでない接続を検出しています

次のコマンドを使用します。 ng serve --ssl true

1
Prakash Khadka

Ngrokなどを使用する必要はありません。

開発モード Facebookアプリケーションのapp-idが指定されていることを確認してください

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{app-id}',
        cookie     : true,                     // Enable cookies to allow the server to access the session.
        xfbml      : true,                     // Parse social plugins on this webpage.
        version    : '{api-version}'           // Use this Graph API version for this call.
    });
...

そして、この更新後にサーバーを再起動します。

0
Pavel Bely

enter image description here

開発モードで、ライブユーザーを使用してログインしている場合は、テストユーザーの使用を検討してください。

テストユーザーを作成するには、上の画像のようにステップに従ってください

  1. 開発モードが有効になっていることを確認してください
  2. Rolesに移動します
  3. Test Usersに移動します
  4. 既存のテストユーザーを追加または使用できます

これで、この新しいユーザーでソーシャルログインを行うことができます

注意：パスワードは次の方法で設定できます。

  1. editをクリックし、
  2. 次に、このテストユーザーの名前またはパスワードを変更します
0
Diyen Momjang

アプリのステータスが「開発中」の場合、SSLなしでコールバックhttp://localhostを使用できることを確認しました。

私がここに来たのは、私のコールバックがhttp://localhost.localdomainでした。これは、2018年以前にFacebook認証のために作成したハックで、Chome 78では機能していませんでした。

0
Fred

Facebookのセキュリティ変更により、httpsを無効にしてFacebookアプリの開発モデルにいる場合にのみ、単純なHTTPからログインできます。ここに説明画像があります

Correct fb configuration to enable login from http instead of https

0
Camilo Casadiego