前回、外部ログインのセットアップまでは説明したので今回はFacebook認証の追加だけです。
よく個人でサイトを作っている人を見るとFacebookは実装されてないことをよく見るのですが、ここは詰まる人が多いと思います。
前準備
Facebook for Developersでアプリを作成します。これもだいたい以下のURLに書いてます。
docs.microsoft.com
ここも基本的には「/signin-facebook」でcallback Urlを設定してください。
アプリIDとapp secretを取得しておいてください。
Startupに登録
ConfigureServicesに以下を追加
services.AddAuthentication().AddFacebook(facebookOptions =>
{
facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});
複数のSNSログインを実装している場合は以下のようにメソッドチェーンで実装出来ます。
services.AddAuthentication()
.AddMicrosoftAccount(microsoftOptions => { ... })
.AddGoogle(googleOptions => { ... })
.AddTwitter(twitterOptions => { ... })
.AddFacebook(facebookOptions => { ... });
Viewを作成
// これか <a asp-action="SignIn" asp-route-provider ="Facebook">Facebook</a> // これでもおけ <a href="/auth/signin?provider=Facebook">Facebook</a>
これで前回のTwitterの記事と同じ要領で実装終了です。
本番だと動かない！
テストだと動くのですが、本番だと動きませんでした。要因はいくつかあると思うのですが、僕の場合はRedirectUrlがhttpで403になったことが原因でした。F12で調べてみてください。添付した画像はhttpsですが、403の場合httpになっている可能性があります。
「なんだよこれ」と思って自力でOAuthを実装しようかと思って気がつきました。
リクエストをhttpsにする
app.Use((context, next) =>
{
context.Request.Scheme = "https";
return next();
});これ以外にも以下の対処法があるみたいです。
app.UseForwardedHeaders(new ForwardedHeadersOptions
{
ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});
app.UseHttpMethodOverride();
これはKestrelとリバプロが関係しているからXForwardedForで対処できるのかよくわかりません。よくわからなかったのでhttpsに変換する方法で対応しました（全部httpsでも困らないし）これがnginxだけなのかよくわかりません。
おそらくこれを対処しないとGoogleも出来ないですし、いつかTwitterもダメになっちゃうので気づいてよかったです。
