2014/03/31

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」と入力します。

pic01

すると、上図のように、Microsoft.Owin.Security.Google のパッケージが表示されるので、[インストール] をクリックして、パッケージをインストールします。

途中でライセンスの同意画面が表示されるので、[同意する] をクリックします。

インストールが済んだら、[閉じる] をクリックして NuGet を終了します。

また、このときプロジェクトの URL を控えておきます。URL はプロジェクトを選択すると、プロパティウィンドウに表示されます。http://localhost:50892/ といった形式になります。

pic02

Google の設定

今度は、Google のサイト側での設定を行います。

設定は、Google Developers Console で行います。

プロジェクトの作成

まず、Google Developers Console でプロジェクトを作成する必要があります。

Google Developers Console の [CREATE PROJECT] をクリックして、プロジェクトを作成します。

pic03

Project name に適当な名前を入れて [Create] をクリックします。

pic04

Clinet ID の作成

しばらくしたらプロジェクトが作成されるので、画面左のメニューから、[APIs & auth] – [Credentials] を選択します。そして、OAuth のセクションで、[CREATE NEW CLIENT ID] をクリックします。

pic05

以下のように情報を設定して、[Create Client ID] をクリックします。Authorized redirect URL には、http://localhost:xxxxx/signin-google  のように入力します。

/signin-google は、Microsoft.Owin.Security.Google のデフォルトのリダイレクト先の URL になります。なお、Authorized redirect URL に登録されていないリダイレクト先はエラーになるので注意してください。

pic06

すると、以下のように Client の情報が表示されるので、[Client ID] と [Client secret] を控えておきます。

pic07

Visula Studio の設定 2

Visual Studio に戻ってきて、プロジェクト名 – [App_Start] – [Startup.Auth.cs] を選択します。

表示されるコードの、以下の部分を探します。

//app.UseGoogleAuthentication();

そして、コメントを外し、以下のように書き換えます。cliendId と clientSecret は、先ほど Google の設定で控えたものを設定します。

app.UseGoogleAuthentication(
  clientId:"xxxxxxxxxx",
  clientSecret:"xxxxxxxxxx");

設定は以上です。簡単ですね。

アプリケーションの実行

F5 キーを押してアプリケーションを実行します。

画面右上の [ログイン] をクリックします。

pic08

Google のログインボタンが表示されるので、クリックします。

pic09

すでに Google にログインしていたので、権限の承認画面が表示されました。問題ないので、[承認する] をクリックします。なお、承認は最初の1回だけ必要になります。

pic10

ユーザーの登録画面が表示されるので、適当なユーザー名を入力して [登録] をクリックします。

pic11

無事にログインが成功しました。

pic12

おわりに

まだベーター版ではありますが、Google 用の OAuth 2.0 パッケージを利用することで簡単に Google 認証ができることが分りました。

正式版がリリースされるのが待ち遠しいですね。

関連エントリー


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから