[Td 2015]박애주의 office 365, 멀티플랫폼과 사랑에 빠지다(최한홍)

최한홍
Technical Evangelist,
Microsoft Korea
Fb.com/james.choi.3760
박애주의 Office 365, 멀티플랫폼을 사랑하다

“The most strategic
developer surface area
for us is Office 365“
- Satya Nadella

4조+
O365로 발송하는
이메일
1억+
모바일앱
다운로드
8.5억
월 미팅생성건수
2–3
시간/일
Office app
사용
12억+
사용자
470PB
스토리지

History : Add-In과 Customization

Old Model (VSTO)
• VSTO 아키텍처
동작 방식 https://msdn.microsoft.com/en-us/library/zkhw8h59.aspx

Old Model (SharePoint Development)
https://msdn.microsoft.com/en-us/library/office/jj164060.aspx

멀티플랫폼을 지원하는 Office 365

“If you can create a webpage,
you can create an Office Add-ins”.
From Office Add-in Blog

Office Add-in의 종류
• 다양한 형태의 앱 개발 가능
• Task Pane App
• Content App
• Mail App
• Mail Compose App
Excel ApplicationWord Application
Document
Outlook Application
Document Inbox Selected Message
Task Pane
App
Content
App
Mail App
Reply | Reply All| Forward
app
MessageBody
Outlook Application
Inbox New Message
To: xxx@yyy.com
Subject: Topsecret stuff
MessageBody
Mail
Compose
App

Office Add-in 적용 플랫폼

Office Add-in의 구조
• XML-based manifest
• 웹 페이지를 참조
• Office Add-in의 종류를 선언
• Web Page
• 다양한 방식
• Office.js 참조
Office
Manifest
<XML>
Web
Page
HTML+JS
Referencing
Office.js
App for Office

Office Add-in의 동작 방식
• 웹 표준으로 작성된 페이지
• HTML5, JavaScript, CSS
Browser Control
or
iFrame

• Office.js가 interop의 역할
Office.js
Browser Control
or
iFrame

• 웹 서버로 부터의 호스팅
웹 서버
Browser Control
or
iFrame

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xsi:type="MailApp">
<Version>1.0.0.0</Version>
<ProviderName>Salesforce.com</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue=“Salesforce" />
<Capabilities>
<Capability Name="Mailbox" />
</Capabilities>
<DesktopSettings>
<SourceLocation DefaultValue=“https://salesforce.com/office" />
<RequestedHeight>300</RequestedHeight>
</DesktopSettings>
<Permissions>ReadItem</Permissions>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message"/>
<Rule xsi:type="ItemIs" ItemType="Appointment"/>
</Rule>
</OfficeApp>
• Almost zero client footprint

• Almost zero client footprint
• Office가 동작하는 곳 어디에서든

document.getSelectedDataAsync()
• 문서 내 선택 영역을 읽어 올 때

Coercion Types
• 데이터를 읽을 때의 타입을 지정
• text
• html
• matrix
• table
• ooxml - Office Open XML

document.setSelectDataAsync()
• 문서의 선택 영역의 데이터를 변경할 때

document.bindings
• 바인딩 추가
• bindings.addFromPromptAsync
• bindings.addFromSelectionAsync
• bindings.addFromNamedItem
• 바인딩 참조
• bindings.getAllAsync
• bindings.getByIdAsync
• Office.select
• 바인딩 제거
• bindings.releaseByIdAsync
• 바인딩 이벤트 핸들러
• binding.addHandlerAsync(“type”, handler);
addFromPromptAsync 호출 시 다이얼로그가 등장

Coding Pattern
1: Context
생성
iOS
Desktop
Web

Coding Pattern
2: Instructions
배치
iOS
Desktop
Web

Coding Pattern
3. Instructions
전송
iOS
Desktop
Web

Coding Pattern
4. 호스트(오피스)가
Instructions
을 차례로 수행
iOS
Desktop
Web

Coding Pattern
5. Callback 함수를
등록하여 예외 처리
가 가능하도록
iOS
Desktop
Web

Coding Pattern
iOS
Desktop
Web6. 예외 처리 함수
작성 및 호출

분류
https://msdn.microsoft.com/library/fp179887(v=office.15)

SharePoint-hosted app 구조
SharePoint
Web Services
Host Web
App Web

SharePoint-hosted App의 종류
Add-in Parts
Add-in Commands
리본, Edit Control Block(ECB)를 통한 App Launch
Full Page Add-ins
SharePoint Dialog

SharePoint-hosted App의 구조

Remind ! Old Model !
https://msdn.microsoft.com/en-us/library/office/jj164060.aspx

Object 모델 Table
https://msdn.microsoft.com/en-us/library/office/dn268594.aspx
…

Provider-hosted App 개발 방법
• SharePoint와 분리된(decoupled) 로직
• API를 통한 SharePoint와의 커뮤니케이션
• (REST or CSOM)
• 어떤 웹 플랫폼이던 개발과 호스팅 가능
• OAuth를 이용한 인증
REST/CSOM

Provider-hosted App의 구조
ASP.NET Web Forms
ASP.NET MVC

Office ribbon을 통한 스토어 접근
• 다양한 플랫폼, 다양한 클라이언트에서…
• Word, Excel, PPT, Project, Access
• Office Online
• Android, iOS

Calendar
Office 365 APIs
Office Graph
Search
Social
Mail PeopleDocuments
openness and
flexibility
consistent
development
platform
Powering
a world
of devices
iOS
dev.office.com
Groups Notebooks Videos

조직의 정보를 가져 오기 위해서는…
• Office 365의 인증은 Azure AD가
• Azure AD를 통한 응용프로그램 인증은 OAuth2.0 프로토콜을 사용
정보를 가져가려면 조직에 로그인해야…

Unified APIs
• 수 많은 끝점과 SDK들

Azure Active Directory (Azure AD)
app
microsoft.onmicrosoft.com
app
contosotravel.onmicrosoft.com
app
yourcompany.onmicrosoft.com
Exchange Online
SharePoint Online
OneNote
Yammer
Travel Pro
Expense Manager
Some App
Another App
Microsoft Travel

Azure AD 관리
• 사용자와 그룹 관리는 Office 365 포털과 Azure 포털에서

Azure AD OAuth for Office 365
• Office 365를 위한 Single Auth
• Azure AD Graph, Exchange, SharePoint
• Device apps and web sites
• Admin and end-user consent
• Secure protocol
• OAuth 2.0
• No capturing user credentials
• Fine-grained access scopes
• Supports MFA and federated user sign-in
• Long-term access through refresh tokens

Azure AD
인증받는
응용프로그램
등록

• 인증 용도로만 사용
• 별도의 지불 정보가 필요 없음
• Azure IaaS / PaaS 기능 사용을
위해서는 별도의 등록이 필요
Office 365 계정으로 Azure에 등록, 로그인

Application 등록
• 종류
• Third-party Apps in the gallery
• Office 365 SharePoint, Exchange
• Dynamics CRM
• …
• Custom Apps
• Native Client
• Web Application
• Web API

Custom Application 등록
• 주요 정보
• Client ID
• Keys (aka. Client Secret)
• Redirect / Sign-On URI

Azure AD
1. Auth 코드 요청 (Client ID & Key, Redirect URI, App ID URI)
OAuth 2.0
App
Native App
• Client ID & Key
• Redirect URI
Impersonation grant
권한 부여(Authorize) 끝점 토큰(Token) 끝점
2. 로그인
3. Redirect URI로 Auth 코드 반환
사용자
로그인
…
OAuth 2.0 인증 절차
Office 365
API
Azure AD(O365)
• Client ID
• App ID URI
• Redirect URL

4. Auth 코드를 이용하여 액세스 토큰 요청
(Auth Code, Client ID, Redirect URI, App ID URI)
5. 액세스 토큰 반환
6. 액세스 토큰 전송, API 호출
Office 365
API
Azure AD
Azure AD(O365)
• Client ID
• App ID URI
• Redirect URL
App
Native App
• Client ID
• Redirect URI
Impersonation grant
OAuth 2.0 권한 부여(Authorize) 끝점 토큰(Token) 끝점
7. HTTP Response 반환
OAuth 2.0 인증 절차

지원 범위
ADAL Library ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Office 365 SDK ✔ ✔ ✔ ✔ ✔ ✔ ✔
Dev.office.com Samples ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
z

참고 자료
- Office 스토어
- Office 개발자 센터
- Office 365 Patterns and Practices
- Office 365 App 개발 사례
- Office 365 App 개발 Training 컨텐츠 (Github)
- 통합 Application 등록 포털 (Microsoft ID / 학교 및 조직의 계정)
- Azure AD 발표자료 (MVA)
- Outlook API Test사이트

Developer Program
http://dev.office.com/devprogram

https://www.yammer.com/itpronetwork @OfficeDev
St ar tSt ar t
http://dev.office.com/podcasts
http://officespdev.userv
oice.com/
http://aka.ms/O365DevShow
Engage

© 2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on th
e part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

http://aka.ms/td2015_again
TechDays Korea 2015에서 놓치신 세션은
Microsoft 기술 동영상 커뮤니티 Channel 9에서
추후에 다시 보실 수 있습니다.

[Td 2015]박애주의 office 365, 멀티플랫폼과 사랑에 빠지다(최한홍)

More Related Content

What's hot (20)

Similar to [Td 2015]박애주의 office 365, 멀티플랫폼과 사랑에 빠지다(최한홍) (20)

More from Sang Don Kim (20)

[Td 2015]박애주의 office 365, 멀티플랫폼과 사랑에 빠지다(최한홍)