Vueで作ったアプリケーションにAmplifyでFacebook認証機能をつけた。
ところが認証ボタンを押して見ると以下のアドレスにリダイレクトされ、「An error was encountered with the requested page.」というエラーが表示されてしまう。
https://vueamplify-facebook1e4b7722-1e4b7722-dev.auth.ap-northeast-1.amazoncognito.com/error?error=redirect_mismatch&client_id=2ekt6keenqpntdpftetaeeqlh5
redirect_mismatch??
あれこれ試してみたところ、amplify add authの際に、認証後のリダイレクト先のURLを複数指定していたのが原因の様子。
amplify add auth で複数のコールバックURLを指定
Amplify Consoleでmasterとdevelopmentブランチ用の環境が構築されているのと、あとは開発用にlocalhostの計3つのURLを指定していたのだった。
? Do you want to add another redirect signin URI Yes
Enter your redirect signin URI: https://master.d3bh1ri8gu6eyb.amplifyapp.com/
? Do you want to add another redirect signin URI Yes
Enter your redirect signin URI: https://development.d3bh1ri8gu6eyb.amplifyapp.com/
? Do you want to add another redirect signin URI No
Enter your redirect signout URI: http://localhost:8080/
仕様です
Amplify CLIのリポジトリにissueがあがっていた。
どうやら仕様とのこと。
Allowing multiple redirectSignIn/redirectSignOut urls breaks federated auth #2792
Sorry guys but in fact, this is a normal behavior.
There is no way for the react app. to know by default which URLs to use when you have two or more URLs. You must inform the app. to use one of these URLs
アプリケーション側からどのコールバックURLが有効なのか判定できないから、らしい。
対応方法
このissueでいくつか対応策が議論されている。
aws-exports.jsを読み込んだ後に改めて1つのコールバックURLを指定する感じ。
基本的にwindow.location.hostname の値をみてどのリダイレクトURLを使うか判定する感じなのかな。
最後のほうにdjheru氏が投稿したコードを参考にするのが一番いいかもしれない。
if (awsmobile.oauth.redirectSignIn.includes(',')) {
const filterHost = url => new URL(url).host === host;
awsmobile.oauth.redirectSignIn = awsmobile.oauth.redirectSignIn
.split(',')
.filter(filterHost)
.shift();
awsmobile.oauth.redirectSignOut = awsmobile.oauth.redirectSignOut
.split(',')
.filter(filterHost)
.shift();
}
(https://github.com/aws-amplify/amplify-cli/issues/2792#issuecomment-575406663)
まとめ
仕様ですとのことだけど、CLIで対応してくれ的な意見も出ている。
feature-requestラベルが付けられているのでいつかは対応されるかも。
issueも閉じていないし。
手元でざっくり試した感じ↑のコードでうまくいきそうなので、CLIが対応するまでは各自対応しておきましょうってことで〜。