ASP.NET CoreでOAuth

スポンサーリンク
2017.05.06

ASP.NET CoreのOAuthが素晴らしくなってたので記事に起こそうかと思います。

詳細は下記のサイトを参考にしてください。

ASP.NET CoreのOAuth

ここでは上記の記事に沿ってFacebook、Twitter、Google、Microsoftをメインに実装方法を記載していきます。

※この記事は2017年5月9日時点の情報となります。  

サンプルプロジェクトの作成

VS2017でASP.NET Coreのプロジェクトを作成します。ここでは認証ありで作成してください。

ライブラリの取得

プロジェクトを作成したら次に下記のライブラリをNugetで取得しておいてください。

Microsoft.AspNetCore.Authentication.Facebook
Microsoft.AspNetCore.Authentication.Twitter
Microsoft.AspNetCore.Authentication.Google
Microsoft.AspNetCore.Authentication.Microsoft

開発環境のSSL設定

次にプロジェクトのプロパティからlocalhostのSSLを有効にします。OAuth認証では認証先のサービスでリダイレクトするサイトがSSL対応していない場合エラーとなるので対策として実施します。

SSLを有効にするにチェックをいれコピーリンクを押下してURLをコピーします。「アプリ URL」のテキストボックスにコピーしたURLを入力して保存してください。

取得したURLはそのままOAuth認証のリダイレクト先URLとなるので控えておきます。基本的にはポート番号の部分だけ控えておいて下記のURLの*****の部分を置き換える形で利用してください。

各サービスの認証設定

各サービス毎に認証設定を行っていきます。設定方法を参照しながら設定を行い各サービス毎にIDとSecretIDを取得してください。

FaceBook : 設定方法

リダイレクトURL ： https://localhost:*****/signin-facebook

Twitter : 設定方法

リダイレクトURL ：https://localhost:*****/signin-twitter

Google : 設定方法

リダイレクトURL ：https://localhost:*****/signin-google

Microsoft : 設定方法

リダイレクトURL ：https://localhost:*****/signin-microsoft

ユーザシークレットの設定

IDとSecretIDを取得したらユーザーシークレットに設定しましょう。プロジェクトを右クリックして「ユーザーシークレットの管理」を選択します。ユーザーシークレットが表示されたら下記のとおり記載してください。

 "Authentication": {
	"Microsoft:ClientId": "<ID>",
	"Microsoft:ClientSecret": "<Secret>",
	"Google:ClientId": "<ID>",
	"Google:ClientSecret": "<Secret>",
	"Facebook:AppId": "<ID>",
	"Facebook:AppSecret": "<Secret>",
	"Twitter:ConsumerKey": "<ID>",
	"Twitter:ConsumerSecret": "<Secret>"
}

<ID>と<Secret>は各サービス毎に取得したIDとSecretIDで置き換えてください。

コードの修正

startup.csのConfigureメソッド内に下記のソースを追加します。

// Twitter
app.UseTwitterAuthentication(new TwitterOptions()
{
	ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey:embed:cite],
	ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret:embed:cite]
});

// Facebook
app.UseFacebookAuthentication(new FacebookOptions()
{
	AppId = Configuration["Authentication:Facebook:AppId:embed:cite],
	AppSecret = Configuration["Authentication:Facebook:AppSecret:embed:cite]
});

// Google
app.UseGoogleAuthentication(new GoogleOptions()
{
	ClientId = Configuration["Authentication:Google:ClientId:embed:cite],
	ClientSecret = Configuration["Authentication:Google:ClientSecret:embed:cite]
});

// Microsoft
app.UseMicrosoftAccountAuthentication(new MicrosoftAccountOptions()
{
	ClientId = Configuration["Authentication:Microsoft:ClientId:embed:cite],
	ClientSecret = Configuration["Authentication:Microsoft:ClientSecret:embed:cite]
});

使用するSSLポートの明示的な指定のためstartup.csのConfigureServicesに下記を追加します。

services.AddMvc(options =>
{
	options.SslPort = (SSLのポート番号);
	options.Filters.Add(new RequireHttpsAttribute());
});

デバッグ実行

デバッグ実行を行いLogin画面に遷移して各サービス毎の認証ボタンが表示されているか確認しましょう。また認証ボタンを押下して認証を試してみましょう。

認証が成功すればログイン状態になります。もし失敗した場合は各サービス設定やID、SecretIDを見直してみてください。

その他

他にも下記のサービスに対応しています。

LinkedIn  : 設定方法
Instagram : 設定方法
Reddit : 設定方法
Github : 設定方法
Yahoo : 設定方法 
Tumblr : 設定方法 
Pinterest : 設定方法 
Pocket : 設定方法 
Flickr : 設定方法 
Dribble : 設定方法 
Vimeo  : 設定方法 
SoundCloud : 設定方法 
VK : 設定方法

嵌る事もあったけどASP.NET MVCよりかはOAuth認証の設定は簡単になったかなと思います。一番手間がかかるのが各サービスの認証設定というのはまた別の話ということで。

コメント