ASP.NET MVC 5 で OAuth 2.0 を使用して Google 認証を行う方法
前の記事では、ASP.NET MVC 5 で OpenID による Google 認証を行いましたが、OpenID によるログイン認証は、2014 年内にサポートを打ち切ると Google は言っています。
Googleはサードパティーに提供するサインイン機能をすべてOpenID Connect規格にアップデートし、現在のOpenIDは来年にもサポートを打ち切る予定だ。
サイトにパスワードを保存する必要なし― Microsoft、Google等がユーザー認証の新規格、OpenID Connectをサポート | TechCrunch Japan
そのため、今後、Google 認証を行うには、OAuth 2.0 (OpenID Connect) を使用する必要があります。
なお、Google の OAuth 2.0 (OpenID Connect) に関する詳しい情報は以下の記事（英語）を参照してください。
Visual Studio の設定
プロジェクトの作成
Visual Studio 2013 (Express for Web) を起動して、新規プロジェクトを作成します。
テンプレートは、[Visual C#] – [Web] – [ASP.NET Web アプリケーション] (.NET Framework 4.5) から、[MVC] を選択します。[認証] は、[個人認証アカウント] を指定します。
OAuth 2.0 対応パッケージのインストール
デフォルトの状態では、Google の OAuth 2.0 に対応していないので、NuGet から対応パッケージをインストールします。
インストールするパッケージは、Microsoft.Owin.Security.Google 3.0.0.0-beta1 (2014/03/31時点) です。このバージョンのパッケージをインストールすると、Google の OAuth 2.0 に対応したログインを行うことができます。
まだベータ版ですが、ログイン認証に関しては問題なく動作しています。
パッケージのインストールは、プロジェクト名を右クリックして、[NuGet パッケージの管理] から NuGet を起動します。そして、ドロップダウンリストから「リリース前のパッケージを含める」を選択し、検索ボックスに「owin」と入力します。
すると、上図のように、Microsoft.Owin.Security.Google のパッケージが表示されるので、[インストール] をクリックして、パッケージをインストールします。
途中でライセンスの同意画面が表示されるので、[同意する] をクリックします。
インストールが済んだら、[閉じる] をクリックして NuGet を終了します。
また、このときプロジェクトの URL を控えておきます。URL はプロジェクトを選択すると、プロパティウィンドウに表示されます。http://localhost:50892/ といった形式になります。
Google の設定
今度は、Google のサイト側での設定を行います。
設定は、Google Developers Console で行います。
プロジェクトの作成
まず、Google Developers Console でプロジェクトを作成する必要があります。
Google Developers Console の [CREATE PROJECT] をクリックして、プロジェクトを作成します。
Project name に適当な名前を入れて [Create] をクリックします。
Clinet ID の作成
しばらくしたらプロジェクトが作成されるので、画面左のメニューから、[APIs & auth] – [Credentials] を選択します。そして、OAuth のセクションで、[CREATE NEW CLIENT ID] をクリックします。
以下のように情報を設定して、[Create Client ID] をクリックします。Authorized redirect URL には、http://localhost:xxxxx/signin-google のように入力します。
/signin-google は、Microsoft.Owin.Security.Google のデフォルトのリダイレクト先の URL になります。なお、Authorized redirect URL に登録されていないリダイレクト先はエラーになるので注意してください。
すると、以下のように Client の情報が表示されるので、[Client ID] と [Client secret] を控えておきます。
Visula Studio の設定 2
Visual Studio に戻ってきて、プロジェクト名 – [App_Start] – [Startup.Auth.cs] を選択します。
表示されるコードの、以下の部分を探します。
//app.UseGoogleAuthentication();
そして、コメントを外し、以下のように書き換えます。cliendId と clientSecret は、先ほど Google の設定で控えたものを設定します。
app.UseGoogleAuthentication(
clientId:"xxxxxxxxxx",
clientSecret:"xxxxxxxxxx");
設定は以上です。簡単ですね。
アプリケーションの実行
F5 キーを押してアプリケーションを実行します。
画面右上の [ログイン] をクリックします。
Google のログインボタンが表示されるので、クリックします。
すでに Google にログインしていたので、権限の承認画面が表示されました。問題ないので、[承認する] をクリックします。なお、承認は最初の１回だけ必要になります。
ユーザーの登録画面が表示されるので、適当なユーザー名を入力して [登録] をクリックします。
無事にログインが成功しました。
おわりに
まだベーター版ではありますが、Google 用の OAuth 2.0 パッケージを利用することで簡単に Google 認証ができることが分りました。
正式版がリリースされるのが待ち遠しいですね。
関連エントリー
スポンサーリンク
Twitter ではブログにはない、いろんな情報を発信しています。
@fnyaさんをフォロー
コメント