Category Archives: Microsoft Azure

Windows Azure Webサイトを WebDeploy Package で配置する

先月のアップデートで、Webサイトにもステージングが用意され、VIP Swap できるようになりました。Cloud Services(Web Role)でなくてはならない理由は、ほとんどなくなったのですが、1つだけ気になっていたことがありました。

それは、「プログラマとデプロイ担当者の責務が明確に分かれている場合、どのようにデプロイすればよいか?」ということでした。オンプレミスの IIS と同様に、Webサイトへ WebDeploy Package で配置する方法を調べていましたが、帝国兵さんのブログに答えが書いてありました。

Azure Webサイトへの発行の自動化について

これなら、Web Role の CloudService Package が WebDeploy Package に代わるだけで、ZIPファイルをデプロイ担当者に渡せば大丈夫です。基本的なことなのかもしれませんが、Web開発初心者の私にはすぐに分からなかったので備忘録として書き留めておきます。これで安心して、Windows Azure Webサイトファーストな開発に注力できそうです。

OWIN で ASP.NET Web API を Windows Azure Active Directory 認証する

前回の投稿では OWIN でマルチホストしましたが、今回はミドルウェアの Windows Azure Active Directory(WAAD)認証ライブラリを利用して、ASP.NET Web API を OAuth 2.0 認証してみます。元ネタはこちらですが、Visual Studio のテンプレート機能を使わずに、手動で構築します。

また、ネイティブ クライアント アプリからの認証では、Active
Directory Authentication Library(ADAL)がいい感じなので、使ってみました。ADAL は、WAAD 向けの認証ライブラリで、以前は Windows Azure Authentication Library として提供されていたライブラリが名称変更されています。

Web API アプリを作成

Web アプリのテンプレートから Empty を選択し、Web API のみチェックして WebApiApp プロジェクトを新規作成します。GETで”api/test”にリクエストすると、ユーザー名を返すシンプルな Web API を追加し、忘れずに Authorize 属性を付けます。デバッグ実行し、レスポンスに 401 が返ることを確認しつつ、localhost のポート番号をメモしておきます。

[Authorize]
public class TestController : ApiController
{
    public string Get()
    {
        return base.User.Identity.Name;
    }
}

Web API アプリを WAAD に登録

ポータルから WAAD に、Web API アプリを追加します。ここでは、WAAD のドメイン名を「example.onmicrosoft.com」とします。新規に WAAD を作成する場合、一度作成すると削除できないようなので、ご注意ください。ウィザード画面で必要な情報を入力します。

add-webapp

ここでは、以下のように設定しました。

  • NAME:WebApiApp
  • SIGN-ON URL:http://localhost:61249/
  • APP ID URI:https://example.onmicrosoft.com/WebApiApp
  • Directory access:SINGLE SIGN-ON

Web API アプリに WAAD 認証を追加

WebApiApp プロジェクトに NuGet パッケージをインストールします。

  • Install-package Microsoft.Owin.Host.SystemWeb
  • Install-package Microsoft.Owin.Security.ActiveDirectory

OWIN パイプラインに WAAD 認証のライブラリを追加します。Audience には、ポータルに登録した WebApiApp の APP ID URI を設定します。

[assembly: OwinStartup(typeof(WebApiApp.Startup))]
namespace WebApiApp
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseWindowsAzureActiveDirectoryBearerAuthentication(
                new WindowsAzureActiveDirectoryBearerAuthenticationOptions
                {
                    Audience = "https://example.onmicrosoft.com/WebApiApp",
                    Tenant = "example.onmicrosoft.com"
                });
        }
    }
}

ネイティブ クライアント アプリを WAAD に登録

ポータルから WAAD に、ネイティブ クライアント アプリを追加します。ウィザード画面で必要な情報を入力します。

add-wpfapp

ここでは、以下のように設定しました。

  • NAME:WpfApp
  • REDIRECT URI:https://example.onmicrosoft.com/WpfApp

WpfApp を登録後、さきほど登録した WebApiApp との関連付けを行っておきます。

webapis

ネイティブ クライアント アプリを作成

WPFアプリとして、WpfApp プロジェクトを新規作成します。ネイティブ クライアント アプリの認証では、Webブラウザコントロールを利用した面倒な実装が必要となるのですが、Active Directory Authentication Libraryを使うと、このあたりの実装をライブラリが行ってくれます。WpfApp プロジェクトに NuGet パッケージをインストールします。

  • Install-package Microsoft.IdentityModel.Clients.ActiveDirectory
  • Install-Package Microsoft.AspNet.WebApi.Client

ボタンクリックイベントで WAAD 認証して、WebAPI を呼び出すシンプルなアプリです。9行目のコードで ADAL が認証してくれますので、取得した Bearer トークンをHTTPヘッダーに設定すれば OK です。WpfApp の Client ID は、ポータルから取得できます。

private async void Button_Click(object sender, RoutedEventArgs e)
{
    var authority = "https://login.windows.net/example.onmicrosoft.com";
    var appId = "https://example.onmicrosoft.com/WebApiApp";                // WebApiApp の APP ID URI
    var clientId = "c3d3af4a-1682-4e49-abd8-4a8e580cebf1";                   // WpfApp の Client ID
    var redirectUri = new Uri("https://example.onmicrosoft.com/WpfApp"); // WpfApp の REDIRECT URI

    // Windows Azure Active Directory 認証
    var authRes = new AuthenticationContext(authority).AcquireToken(appId, clientId, redirectUri);

    // 取得したトークンで、Web API を呼び出し
    var client = new HttpClient();
    client.DefaultRequestHeaders.Add(HttpRequestHeader.Authorization.ToString(), authRes.CreateAuthorizationHeader());
    var result = await client.GetStringAsync("http://localhost:61249/api/test");
    this.textBlock1.Text = result;
}

実行結果

まず、ネイティブ クライアント アプリからサインインするユーザーを、ポータルから登録しておきます。ここでは、WAAD のユーザー名を「tony@example.onmicrosoft.com」とします。

WpfApp のボタンをクリックすると、サインイン画面が表示され、認証に成功すると WebAPI から結果を取得できます。

signin

wpfresult

まとめ

クラウドで Web API を公開するなら、セキュリティは避けては通れない道です。OWIN のミドルウェアで提供されるフレームワークやライブラリを自由に組み合わせて、Web アプリを構築できる時代が始まっているのだと実感しました。

OWIN で ASP.NET Web API をマルチホストする

OWIN を少し理解できたので、ASP.NET Web API をマルチホストしてみました。コンソールアプリ、IIS の Webアプリ、Windows Azure の WebRole の3つでホスティングします。

ソリューション構成は、こんな感じです。

solution

Web API のロジックをクラスライブラリにする

WebApiLibrary プロジェクトに NuGet パッケージをインストールします。

  • Install-Package Microsoft.AspNet.WebApi.Owin

GETで”api/test”にリクエストすると、「Hello OWIN !」を返すシンプルな Web API です。

public class TestController : ApiController
{
    public string Get()
    {
        return "Hello OWIN !";
    }
}
public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

コンソールアプリでホストする

ConsoleApplication プロジェクトに NuGet パッケージをインストールします。

  • Install-Package Microsoft.AspNet.WebApi.Owin
  • Install-Package Microsoft.Owin.Host.HttpListener
  • Install-Package Microsoft.Owin.Hosting

OWIN パイプラインに Web API を追加します。

[assembly: OwinStartup(typeof(ConsoleApplication.Startup))]
namespace ConsoleApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            var config = new HttpConfiguration();
            WebApiConfig.Register(config);
            app.UseWebApi(config);
        }
    }
}
class Program
{
    static void Main(string[] args)
    {
        using (WebApp.Start("http://localhost:8080/"))
        {
            Console.WriteLine("Press Enter to quit.");
            Console.ReadLine();
        }
    }
}

IIS の Webアプリでホストする

空のWebApplication プロジェクトに NuGet パッケージをインストールします。

  • Install-Package Microsoft.AspNet.WebApi.Owin
  • Install-package Microsoft.Owin.Host.SystemWeb

OWIN パイプラインに Web API を追加します。

[assembly: OwinStartup(typeof(WebApplication.Startup))]
namespace WebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            var config = new HttpConfiguration();
            WebApiConfig.Register(config);
            app.UseWebApi(config);
        }
    }
}

Windows Azure の WebRole でホストする

上記の WebApplication と同じです。

実行結果

Google Chrome アプリの Postman で実行結果を確認してみます。

result

コンソールアプリ以外のURLでも、同じ結果が返されます。

まとめ

OWIN を利用することで、何でホストしても画一的な実装で書けるのは、大きなメリットです。サーバーとアプリを抽象化するだけでなく、ミドルウェアとして機能を追加できるところも面白いです。Web API 以外では、SignalR や Nancy のほかに、認証系のライブラリもありますし、第3のホストライブラリである Helios にも注目したいです。これからの One ASP.NET を語るうえで、OWIN は欠かせない技術であることは間違いなく、今後の進化に期待が高まります。

Windows Azure X WordPress でブログ始めました

はじめまして、トニーです。クラウドという新世界で、ひとつなぎの大秘宝を探しているプログラマです。Windows Azure を中心とした技術は、進化のスピードが速く、キャッチアップも大変ですが、クラウドの適用領域の広がりにワクワクしますし、コードを書くことが楽しいです。もうすぐ日本データセンターも開設されることですし、そんな思いを他のプログラマの方々と共有したいと思い、ブログを始めることにしました。

Azure 使いの端くれとして、クラウディアさんのお薦めの Webサイト X WordPress にしました。最初の投稿として、このブログを構築するまでの手順をまとめます。

Windows Azure を登録する

数年前から仕事でAzureを使っていますが、自分で契約したのは初めてでした。英語で電話がかかってきたのには少し焦りましたが、ここからすぐに申込できます。クレジットカードを手元に用意しておけば、OKです。まずは、1か月の無料評価版を選択しました。

WordPress を構築する

Azureポータルで、Webサイトのギャラリーから WordPress を作成しました。昨年までは、バージョン 3.6 でしたが、3.8 に更新されていました。URL やアカウントを決めて、East Asia のデータセンターにデプロイしました。作成された Webサイトにアクセスし、ブログのタイトルやアカウントを決めて、インストール完了です。

WordPress のカスタマイズ

今まで WordPress を使ったことのない超初心者なので、ネット上の入門サイトを読んで、雰囲気が少し掴めました。テーマは、最新版の Twenty Fourteen を選択しました。デフォルトの設定から変更したのは、アカウント名をニックネームに変えるのと、パーマリンクぐらいです。プラグインは、以下の 7 つをインストールしました。

  • About Me 3000(プロフィールを作る)
  • Akismet(スパムコメント対策)
  • Favicon Rotator(ファビコンをつける)
  • Google Analytics for WordPress(アクセス分析)
  • Login LockDown(不正ログイン対策)
  • SyntaxHighlighter Evolved(C#のコードを書くため)
  • WP Social Bookmarking Light(twitterやFBボタンをつける)

WordPress の不具合対応

記事のタイトルがすべて大文字になってしまうのが格好悪かったので、ここを参考に CSS を修正しました。

まとめ

ほんとに、あっという間に構築できました。ちなみに、IE11 だとダッシュボードの動作が怪しいところがあり、プラグインをインストールできなかったので、途中からGoogle Chromeを使いました。あとは運用しながら、いろいろ試したいと思います。