web-dev-qa-db-ja.com

安全でないログインのブロック：安全でないページからアクセストークンを取得したり、このアプリにログインしたりすることはできません。 https：//としてページを再読み込みしてください

次のようなhrefを使用して、Facebook Authentication APIルートをボタンにリンクすることにより、Passport Facebook認証を実装しています。

<a href="auth/facebook">Facebook Login</a>

ボタンをクリックすると、Facebook認証ページにリダイレクトされます。しかし、ページには）のようなエラーメッセージが表示されます。安全でないログインがブロックされました。安全でないページからアクセストークンを取得したり、このアプリにログインしたりできません。 https：// "としてページを再読み込みしてください

この問題を修正するにはどうすればよいですか？

httpspassport.jsfacebook-authenticationpassport-facebook
13
Nimish David Mathew

驚いたことに、私は1時間前と同じことをしようと始めたばかりで、同じ問題を抱えています。 FB開発者ポータルに移動して、SettingsFacebook LoginHTTPSを強制するオプションがあります。

enter image description here

さらなる調査が示されました：

「HTTPSを強制します。この設定には、OAuthリダイレクトとJavaScript SDKを使用してアクセストークンを取得するページにHTTPSが必要です。ほとんどの主要なクラウドアプリケーションホストは、アプリケーションのTLS証明書の無料の自動構成を提供します。アプリをセルフホストするか、ホスティングサービスがデフォルトでHTTPSを提供していない場合は、無料で入手できますLet's Encryptのドメインの証明書。」

参照： ログインセキュリティ

16
Christopher

passportを使用しているため、auth.js設定、またはこれらの設定を保持している場所も確認してください。 Webサイトに証明書がある場合でもでも、次のコードは失敗します。

'facebookAuth' : {
  'clientID'      : '.............', // App ID
  'clientSecret'  : '............................', // App Secret
  'callbackURL'   : 'localhost:9999/auth/facebook/callback',
  'profileURL'    : 'https://graph.facebook.com/v2.5/me?fields=first_name,last_name,email',
  'profileFields' : ['id', 'email', 'name'] 
},

問題はcallbackUrlにあります。

'callbackURL'   : '/auth/facebook/callback'
'callbackURL'   : 'http://localhost:9999/auth/facebook/callback'

上記のステートメントは両方とも失敗します。 callbackUrlはhttpsで始まる必要があります。最初のものはhttp://localhostをロードし、callbackUrlを追加しようとします。 2番目の方法では、完全にURLにhttpをロードしますが、どちらもFBに接続できません。次のいずれかを試してください。サイトに証明書がある場合は、完全なURLを提供します。ローカルホストでこれをテストする場合は、独自の証明書を作成し、httpsで次のようにアクセスします。

'callbackURL'   : 'https://example.com/auth/facebook/callback'
'callbackURL'   : 'https://localhost:9999/auth/facebook/callback'
4
Kurt Van den Branden

FacebookはリダイレクトURIにHTTPSの使用を要求しているため、localhostでngrokを使用して、ローカルの安全なHTTPトンネルを開始できます。今のところ、クリーンで高速な代替案です。

  • 取得 公式のngrokパッケージ
  • 希望のディレクトリunzip /opt/ngrok.Zipに解凍します。
  • 最初のHTTPトンネルを作成します：/opt/ngrok http 3000

ngrok docs でその他の優れた使用例を参照してください。

3
Lindoélio Lázaro

修正するには、ローカル開発のために、マシンでSSL証明書を生成します。以下のコマンド（Mac High Sierraでテスト済み、osにopenssl libがインストールされている必要があります）を実行して、作業ディレクトリにcert.pemおよびkey.pemファイルを作成します。

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

openssl rsa -in keytmp.pem -out key.pem

Httpsを使用するようにノードのhttpサーバーを変更します。 httpsモジュールの代わりにhttpモジュールをインポートする必要があります。

const https = require('https')
const path = require('path')
const fs = require('fs')
const options = {
  cert: fs.readFileSync(path.resolve(__dirname, '<path_to_your_cert.pem>')),
  key: fs.readFileSync(path.resolve(__dirname, '<path_to_your_key.pem>'))
}
const server = https.createServer(options, <your_handler_or_app_eg_express>)
server.listen(<your_prefered_port_number>)

Facebook開発者コンソールでアプリに移動し、有効なOAuthリダイレクトURIをローカルホストドメインのhttpsバージョンに設定します。アプリのドメインとサイトのURLについても同じことを行います。

1
Enogwe Victor

私のために働いたVPNを使用してくださいサイバーゴーストは無料です

0
Scott Seiber

それを解決する方法は2つあります。最初：Google Passport戦略に移動してプロキシを追加できます：true

    passport.use(
  new FacebookStrategy(
    {
      clientID: facebookID,
      clientSecret: facebookSecret,
      callbackURL: "/auth/facebook/callback",
      proxy: true
    }
  )
);

ほとんどの場合、Herokuを介してデプロイまたはアプリケーションを実行する場合、Herokuが特定のサーバーにリクエストを送信できるプロキシがあり、Passportは、リクエストがプロキシを通過する場合はそうではないことを想定しています安全です（つまり...いいえhttps）。解決できる2番目の方法は、callbackURLに特定のパスを使用することです。たとえば、次を使用する代わりに：

callbackURL: "/auth/facebook/callback"

あなたが使用します：

callbackURL: https://mydomain/auth/facebook/callback

このアプローチを使用する場合は、環境変数を作成して、開発用および本番用の特定のredirectURLの値を保持する必要がある場合があることに注意してください。

0
Ygor D.

パスポートの設定でリダイレクトURLをsomehttps：// someUrlに変更します 'https'は重要です

0
Anand Sharma

私の場合、package.jsonファイルを変更しました。

"start": "node scripts/start.js" => 
"start": "set HTTPS=true&&node scripts/start.js"

お役に立てば幸いです。

0
joe1220

php SDKリファレンスの場合

WebアプリケーションがFacebook経由でログインするには、httpsが必要です。

以下の手順は、Facebookから有効な認証を取得するために必要です。

基本シーティング

  1. ルートドメインとしてApp Domainsを設定します（www.example.com）
  2. プライバシーポリシーURL（https://www.example.com/privacy-demo/）
  3. 利用規約のURL（https://www.example.com/terms-demo/）
  4. セットカテゴリ

  5. サイトURL（https://www.example.com/facebook-login/）facebook-loginこのフォルダーにはすべてのFacebookログインファイルが含まれます

    詳細設定

  6. サーバーIPホワイトリスト（ホストIPアドレス124.25.48.36）

Facebookログイン設定の下の製品

  1. 有効なOAuthリダイレクトURI（https://www.example.com/facebook-login/fb-callback.php）

クイックスタート

  1. WebサイトのサイトのURLを選択（https://www.example.com/facebook-login/）

すべての変更を保存してアプリを有効にします（つまり、アプリで）これで、アプリのステータスが有効になります。

このコードを参照できます https://github.com/facebook/php-graph-sdk

0
Rijo