firebase で facebook ログイン時にポップアップダイアログでセキュアエラー？

Question

firebase を使用してWEBブラウザからSNSログインをさせたいと思っております。
google ログインはできたのですが、次の facebook でログインしようとボタン押下すると
起動したログインのポップアップ画面で

「情報の転送の際にXXXXXXXがセキュアな接続を使用していないことがFacebookにより検出されました。
XXXXXXXのセキュリティ設定が更新されるまで、Facebookでこのアプリにログインすることはできません。」

となります。

XXXXには、呼び先の facebook アプリの名前が入っております。
なので、ソース的には間違えてないと思っており、Facebookアプリの設定かな？と思っております。

やったこと

facebook アプリのセキュリティ設定を変更すれば良いのだなと思って developers.facebook.com で設定項目を色々みて変更して試しました。
有効なOAuthリダイレクトURIには、結果項目の画像が表示されているURLに含まれている redirect_uri を登録しております。

クライアントOAuth設定
デバイスログイン ON
埋め込みブラウザーOAuthログイン ON
Login with the JavaScript SDK ON
JavaScript SDK に許可されたドメイン localhost, (WEBドメイン), (firebaseのアプリドメイン)

他も色々と試したりしました。
あとは何か抜けているところなどありましたら、ご教示よろしくお願いいたします。

Facebookログインの設定

結果

上記画像のリクエストパラメータ

{
    "https://www_facebook_com/v8_0/dialog/oauth?response_type": "code,granted_scopes",
    "client_id": "00000000000000",
    "redirect_uri": "https://xxxxxxx.firebaseapp.com/__/auth/handler",
    "state": "hogehoge",
    "scope": "public_profile",
    "context_uri": "http://localhost"
}

context_uri が localhost だから駄目なのだろうか？？？
ローカル環境から確認しているのが駄目なのだろうか？？？

Answer 1

Webブラウザからのログインなら、必要なのは「デバイスログイン」ではなく「ウェブOAuthログイン」だと思います。ちょっと古くなっていますが、以下参考にしてください。
http://ww4.tiki.ne.jp/~yosshie-k/programming/gcp_tips/identity_platform/facebook.html

「有効なOAuthリダイレクトURI」にはログイン成功時のリダイレクト先URIを入力してください。
上記のページにあるのは入力前のキャプチャです。

今は以下の項目が追加されていますが、これらは使用しなくていいはずです。

• Login with the JavaScriptSDK
• JavaScript SDKに許可されたドメイン

「デバイスログイン」は、スマートテレビなどの機器向けです。
「埋め込みブラウザーOAuthログイン」は、昔のスマホのプリインブラウザなど通常の設定で動作しない一部のブラウザ用と思われます。
「Login with the JavaScript SDK」は、Firebase Authではなく、Facebookの提供するSDKを使用する場合にチェックするのではないかと思いますが、自身がありません。

Comments

[akasatanaha]

ご教示ありがとうございます！

色々試していた中であまり関係ないかと思いONのままにしておりました。
不要と思われるものはOFFにしておきました。
また設定項目の画像もUPし、説明が足りない部分について追記もいたしました。

ただ結果としては設定変更等しましても変わりませんでした。
う～ん、どこかの設定だと思うのですが・・・

[yossie]

私の方でも、追加された画面キャプチャを確認できました。
この画面が表示される原因は、アクセス元のページのスキーマが"https:"でないことのようです。

以下の2つのケースで発生を確認しました。
- ローカルサーバで表示したページからログイン : スキーマは"localhost:"
- ネット上にデプロイしたページ(Facebookアカウントでログイン可能)に、"http:"でログイン。

"http:"だとログインの通信も丸見えなので、アカウントが乗っ取られる危険性があると思います。

[akasatanaha]

ご教示ありがとうございます！
ローカル環境から変更して別の環境でやると上記のエラーは解消しました！
ただ続行すると以下で400エラーになるのですが、これもまたどこかの設定が悪いとは思うのですが、
色々試したのですがわからず・・・
https://identitytoolkit.googleapis.com/v1/accounts:signInWithIdp?key=hogehoge

[yossie]

> ただ続行すると以下で400エラーになるのですが、...
どこまで言って、どこでエラーになったのか判りにくいです。
と言っても、リダイレクトしまくるし、1度は成功しないと何が正解なのかわからないですよね。
この画面は私も見た記憶がありません。

facebookのログイン画面(https://www.facebook.com/login.php)は表示できましたでしょうか。

[akasatanaha]

はい、facebookのログイン画面は表示することができました。
そして一度ID,PASSセットしOKボタン押下すると1度は facebook側で成功したようです。
アプリ認証しましたか？とメールが来ていたので間違いない思います。
が、その後、ログイン画面時にパラメーターエラー（400）になってしまいます。
そのときのパラメータが以下になります。

{
"https://xxxxxx_firebaseapp_com/__/auth/handler?apiKey": "hogehoge",
"appName": "[DEFAULT]",
"authType": "signInViaPopup",
"redirectUrl": "https://hoge.com/web",
"v": "9.6.4",
"eventId": "8800070710",
"providerId": "facebook.com"
}

[yossie]

私はこのエラーに遭遇した記憶がないので、以下は想像ですが...
気になるのは、
> {
> "https://xxxxxx_firebaseapp_com/__/auth/handler?apiKey": "hogehoge", ★1
> "appName": "[DEFAULT]",
> "authType": "signInViaPopup",
> "redirectUrl": "https://hoge.com/web", ★2
> "v": "9.6.4",
> "eventId": "8800070710",
> "providerId": "facebook.com"
> }

★1 :
値"hogehoge"はteratailで公開するために伏せただけで、実際にはそれなりの値が入っていますよね。
この値を渡しているのは、おそらく各ページのスクリプトの以下の個所です。
```
var firebaseConfig = {
apiKey: 'Identity Platform/Firebase Authのコンソールから取得したapiKey',
authDomain: 'あなたのサイトのドメイン',
};
firebase.initializeApp(firebaseConfig);
```
以下にページに説明があります。Googleのドキュメントへのリンクもここにあります。
http://ww4.tiki.ne.jp/~yosshie-k/programming/gcp_tips/identity_platform/index.html
　「Firebase JavaScript SDKの初期化.」の章。

★2:
これも伏せてあるだけと思いますが、ここがログイン成功時の変異先URIです。あなたが用意するものです。
この値を渡しているのは、Firebase AuthのログインUIを配置したページのスクリプトの以下の個所のはず。
```
var uiConfig = {
'signInSuccessUrl': 'https://ログイン成功後に表示するページのURI',
'signInOptions': [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
],
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#Firebase Auth UIを表示する要素のID', uiConfig);
```

[akasatanaha]

ご教示ありがとうございます。
色々と質問文の説明不足が祟っておりますが、
以下を変更することで、解決いたしました。
・facebook の アプリ設定でアプリ認証がONになっていた

WEBブラウザからの認証だったことと、他のプラットフォームでプロジェクトを作るさいにアプリと定義していたところもあって、そんなのりでONにしてしまっていたのが悪かったみたいです。

長々とご教示いただきまして誠にありがとうございました！