前提・実現したいこと
firebaseAuthで
facebookログインの実装
ログイン画面中のエラーを解消したいです。
発生している問題・エラーメッセージ
ログイン画面に遷移すると
こういったエラーが出ます。
コードの問題ではなく
facebook for developersでの設定だと思います。
URLはブロックされています: リダイレクトURIがアプリのクライアントOAuth設定でホワイトリストに追加されていないため、リダイレクトできませんでした。クライアントとウェブOAuthログインをオンにして、すべてのアプリドメインを有効なOAuthリダイレクトURIとして追加してください。
該当のソースコード
Vuexを使用しております。
コードはfirebaseAuthのGuids
必須項目の1と5をコピペしています。
メールアドレスログインでは同じ要領で機能したので、
コードの問題ではなさそうです。
Handle the sign-in flow with the Firebase SDK
JS
1export const actions = { 2 loginFacebook({ dispatch }) { 3 var provider = new firebase.auth.FacebookAuthProvider() 4 firebase.auth().signInWithPopup(provider).then(function (result) { 5 var token = result.credential.accessToken 6 var secret = result.credential.secret 7 var user = result.user 8 dispatch('checkLogin') 9 console.log(result) 10 }).catch(function (error) { 11 var errorCode = error.code 12 var errorMessage = error.message 13 var email = error.email 14 var credential = error.credential 15 console.log(errorMessage) 16 }) 17 }, 18}
試したこと
・firebaseAuthのログインプロバイダでfacebook有効化
facebook for developersのアプリID, app secretを貼り付けました。
・facebook for developers
アプリのダッシュボード > 製品 > Facebookログイン設定 > 項目:有効なOAuthリダイレクトURI
ログイン後に戻りたいURLを入力しました。
http://localhost:3000/
ドキュメントにはこう記されています。
アプリのセキュリティ
開発モード
新規に作成されたアプリはすべて、開発モードで起動します。
クライアントOAuth設定

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。