MVC5+BOOTSTRAP で作る SPA WITH OFFICE365 アカウント(+GOOGLE, FB, TWITTER アカウント )

2014/01/27 　 RIA に代わる技術、実用的 SPA(Single-page Application)

プロフィール

野呂清二　㈱エクシード・ワンhttp://www.facebook.com/seiji.noroMicrosoft MVP for Office365

趣味最近 HTML5 にはまってる。

ブログ http://tech.exceedone.co.jp/ http://www.appsforoffice.net/

このスライド http://www.slideshare.net/seijinoro/20140127-ria-spa

概要とデモMVC5+Bootstrap+Knockout.j

s

MVC5+BOOTSTARP+KNOCKOUT.JS最初にアプリのデモSPA なので、CURD 全部 ,Single Page で。

MVC5+BOOTSTARP+KNOCKOUT.JSこのデモの構成

System.Web.Mvc.dllEntityFramework.dll(O/R マッパー ) サイト

HTML(MVC)/JS/CSS

サービスWebAPI

HTML, JS/CSS Data

いいところMVC5+Bootstrap+Knockout.js な

ら

IPHONE, ANDROID, WIN PC の各種ブラウザーで同じソースで動きます！！

環境構築は簡単です。NUGET から追加、依存関係も大丈夫！

統合環境 (VISUAL STUDIO) で サーバ・クライアントともデバック簡単！

JS/CSS MVC

独自認証 , 各種アカウントとも連携簡単！ 1/3

Office365

FB, etc

独自認証 , 各種アカウントとも連携簡単！ 2/3

IdentityConfig.cs( 管理クラス , 自動作成 )Web.config ( 設定、自動で記入される )<configuration><appSettings>

<add key="ida:FederationMetadataLocation" value="https://login.windows.net/exceedone.onmicrosoft.com/FederationMetadata/2007-06/FederationMetadata.xml" />

<add key="ida:Realm" value="https://exceedone.onmicrosoft.com/WebApplication3" />

<add key="ida:AudienceUri" value="https://exceedone.onmicrosoft.com/WebApplication3" />

</appSettings>

独自認証 , 各種アカウントとも連携簡単！ 3/3

Startup.Auth.cs app.UseMicrosoftAccountAuthentication(

clientId: "00000000XXXXXXX",clientSecret:

“ZZZZZZZZZZZZZZZZZZZZZZZZ"); app.UseTwitterAuthentication(

consumerKey: “XXXXXXX",consumerSecret: “YYYYYY");

app.UseFacebookAuthentication(appId: “XXXXXXXXXXXXXX",appSecret: “YYYYYYYYYYYYYY");

app.UseGoogleAuthentication(); デモ

WEB サーバスケールアウトもワンクリック！

デプロイもワンクリック！

参考

MS 系の SPA についての基礎はこちらを参考に！Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout.js) http://blogs.msdn.com/b/tsmatsuz/archive/2013/11/01/visual-studio-2013-asp-net-single-page-application-spa-knockout.aspx

ASP.NET シングル ページ アプリケーション (SPA) 詳説 ［スライド＆動画］ http://www.buildinsider.net/hub/bioff/c3