ASP.NET CoreでOAuth

投稿者: | 2017年5月6日

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

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

ASP.NET CoreのOAuth

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

 

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

 

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

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

 

ライブラリの取得

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

 

開発環境の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を取得したらユーザーシークレットに設定しましょう。プロジェクトを右クリックして「ユーザーシークレットの管理」を選択します。ユーザーシークレットが表示されたら下記のとおり記載してください。

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

 

コードの修正

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

 

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

 

デバッグ実行

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

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

 

その他

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

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA