자습서

이 문서에서는 Teams 앱 기능 빌드에 대해 자세히 알아봅니다. 다음은 Teams 플랫폼 기능에 사용할 수 있는 단계별 가이드 목록입니다.

# 기능 단계별 가이드
1. 봇 - Microsoft 365 에이전트 플레이그라운드를 사용하여 AI 챗봇 디버그
- 자동 관리 메시지 보내기
2. 메시지 확장 - API 기반 메시지 확장 빌드
- 작업 기반 메시지 확장 빌드
- JavaScript를 사용하여 첫 메시지 확장 앱 빌드
3. Tab 키 C sharp를 사용하여 첫 번째 탭 앱 빌드
4. SSO - SSO 인증을 사용하여 봇 빌드
- 탭 및 메시지 확장 앱에 SSO 추가

첫 번째 봇 앱 빌드

첫 번째 Teams 앱으로 Microsoft Teams 앱 개발을 시작하세요. JavaScript를 사용하여 Teams로 봇 앱을 만들 수 있습니다.


첫 번째 봇 빌드

앱에 자체 UI 및 UX와 함께 제공되는 기능이 있습니다.

다이어그램은 이 앱에 세 가지 기능이 있음을 보여줍니다.

이 자습서에서는 다음에 대해 알아봅니다.

  • Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)를 사용하여 새 프로젝트를 설정하는 방법입니다.
  • 봇 앱을 빌드하는 방법.
  • 앱을 배포하는 방법입니다.

필수 구성 요소

앱을 빌드하고 배포하기 위해 다음 도구를 설치해야 합니다.

  설치 사용...
필수    
  Microsoft 365 에이전트 도구 키트 앱에 대한 프로젝트 스캐폴딩을 만드는 Microsoft Visual Studio Code 확장입니다. 최신 버전을 사용합니다.
  Microsoft Teams Microsoft Teams는 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 모든 사람과 한 곳에서 공동 작업할 수 있습니다.
  Node.js 백 엔드 JavaScript 런타임 환경입니다. 자세한 내용은 프로젝트 유형에 대한 버전 호환성 표Node.js 참조하세요.
  Microsoft Edge (권장) 또는 Google Chrome 개발자 도구가 있는 브라우저
  Visual Studio Code JavaScript, TypeScript 또는 SharePoint 프레임워크(SPFx) 빌드 환경입니다. 최신 버전을 사용합니다.
선택 사항    
  Visual Studio Code 및 Azure CLI용 Azure 도구 저장된 데이터에 액세스하거나 Azure에서 Teams 앱에 대한 클라우드 기반 백 엔드를 배포하는 도구를 Azure합니다.
  Chrome용 React 개발자 도구 또는 Microsoft Edge용 React 개발자 도구 오픈 소스 React JavaScript 라이브러리용 브라우저 DevTools 확장입니다.
  Microsoft Graph Explorer Microsoft Graph Explorer는 Microsoft Graph 데이터에서 쿼리를 실행할 수 있는 브라우저 기반 도구입니다.
  Teams용 개발자 포털 organization 또는 Microsoft Teams 스토어를 포함하여 Teams 앱을 구성, 관리 및 게시하기 위한 웹 기반 포털입니다.

팁

Microsoft Graph 데이터로 작업하는 경우 Microsoft Graph Explorer에 대해 알아보고 책갈피를 지정해야 합니다. 이 브라우저 기반 도구를 사용하면 앱 외부에서 Microsoft Graph를 쿼리할 수 있습니다.

필수 구성 요소 설정

필요한 도구를 설치한 후 개발 환경을 설정합니다.

Microsoft 365 에이전트 도구 키트 설치

Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)는 앱에 대한 클라우드 리소스를 프로비전 및 배포하고 Teams 스토어에 게시하는 도구를 사용하여 개발 프로세스를 간소화하는 데 도움이 됩니다.

에이전트 도구 키트를 Visual Studio Code 또는 Microsoft 365 에이전트 도구 키트 CLI(이전의 TeamsFx CLI)라는 명령줄 인터페이스와 함께 사용할 수 있습니다.

  1. Visual Studio Code를 열고 확장(Ctrl+Shift+X 또는 확장 보기>)을 선택합니다.

  2. 검색 상자에 Microsoft 365 에이전트 도구 키트를 입력합니다.

  3. 설치를 선택합니다.

    스크린샷은 에이전트 도구 키트 확장 설치를 보여줍니다.

    Microsoft 365 에이전트 도구 키트 아이콘이 Visual Studio Code 활동 표시줄에 나타납니다.

Visual Studio Code Marketplace에서 에이전트 도구 키트를 설치할 수도 있습니다.

Teams 개발 테넌트 설정

테넌트는 채팅하고, 파일을 공유하고, 모임을 진행하는 Teams의 organization에 대한 공간 또는 컨테이너입니다. 이 공간은 앱을 업로드하고 테스트하는 곳이기도 합니다. 테넌트와 함께 개발할 준비가 되었는지 확인해 보겠습니다.

앱 업로드 옵션 확인

사용자 지정 앱을 만든 후 사용자 지정 앱 업로드 옵션을 사용하여 Teams에 앱을 업로드해야 합니다. Microsoft 365 계정에 로그인하여 이 옵션이 활성화되어 있는지 검사합니다.

다음 단계는 Teams에서 앱을 업로드할 수 있는지 확인하는 데 도움이 됩니다.

  1. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드를 선택합니다.

  4. 사용자 지정 앱을 업로드하는 옵션을 찾습니다. 이 옵션이 표시되면 사용자 지정 앱을 업로드할 수 있습니다.

    Teams에서 사용자 지정 앱을 업로드하는 옵션을 보여 주는 스크린샷

참고

사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기

Teams 개발자 계정이 없는 경우 Microsoft 365 개발자 프로그램에 참가하세요. 선택적 단계입니다.

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 나타납니다.

    스크린샷은 Microsoft 365 개발자 프로그램을 보여줍니다.

  5. 방금 설정한 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

무료 Azure 계정 가져오기

Azure에서 앱을 호스트하거나 리소스에 액세스하려면 Azure 구독이 있어야 합니다. 시작하기 전에 무료 계정을 만드세요.

이제 계정을 설정하기 위한 모든 도구를 사용했습니다. 다음으로, 개발 환경을 설정하고 구축을 시작하겠습니다! 먼저 만들려는 앱을 선택합니다.

봇 앱에 대한 프로젝트 작업 영역 만들기

첫 번째 봇 앱을 만들어 보겠습니다.

Teams 앱의 봇 기능은 챗봇 또는 대화형 봇을 만듭니다. 고객 서비스 제공과 같은 간단하고 자동화된 작업을 실행하는 데 사용합니다. 봇은 웹 서비스와 통신하며 해당 제품을 사용할 수 있도록 도와줍니다. 대화형 봇을 사용하여 일기 예보, 예약 또는 기타 제공되는 모든 서비스를 확인할 수 있습니다.

이 앱에 세 가지 기능이 있음을 보여주는 다이어그램. 봇이 강조 표시됩니다.

이러한 앱을 만들 준비를 이미 마쳤으므로 봇 앱을 만들기 위한 새 Teams 프로젝트를 설정할 수 있습니다.

이 자습서에서는 다음을 알아봅니다.

  1. 에이전트 도구 키트를 사용하여 새 봇 프로젝트를 설정하는 방법입니다.
  2. 앱 프로젝트의 디렉터리 구조에 관한 정보입니다.

중요

봇은 GCC(정부 커뮤니티 클라우드), GCC High, DoD(국방부) 및 21Vianet 환경에서 운영되는 Teams 에서 사용할 수 있습니다.

봇 프로젝트 작업 영역 만들기

전제 조건이 마련되었다면 시작하겠습니다!

참고

표시된 Visual Studio Code UI는 Mac에서 만든 것입니다. 운영 체제, Agents Toolkit 버전 및 환경에 따라 다를 수 있습니다.

  1. Visual Studio Code를 엽니다.

  2. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 새 에이전트/앱>Teams 앱 만들기를 선택합니다.

    이 스크린샷은 에이전트 도구 키트 사이드바에서 새 프로젝트 만들기 링크의 위치를 보여줍니다.

  4. 봇을 선택하여 새 봇 프로젝트를 만듭니다.

    스크린샷은 새 프로젝트 만들기 마법사를 보여 줍니다.

  5. 앱에서 빌드할 앱 기능으로 기본 봇 이 선택되어 있는지 확인합니다.

    스크린샷은 새 앱에 추가할 앱 기능을 보여줍니다.

  6. 프로그래밍 언어로 JavaScript 를 선택합니다.

    스크린샷에는 프로그래밍 언어 선택 옵션이 나와 있습니다.

  7. 기본 폴더를 선택하여 프로젝트 루트 폴더를 기본 위치에 저장합니다.

    스크린샷은 기본 위치 선택을 보여줍니다.

    다음 단계를 통해 기본 위치를 변경할 수도 있습니다.

    1. 찾아보기를 선택합니다.

      스크린샷은 찾아보기 위치 옵션의 선택을 보여줍니다.

    2. 프로젝트 작업 영역의 위치를 선택합니다.

    3. 폴더 선택을 선택합니다.

      스크린샷은 선택할 폴더를 보여 줍니다.

  8. 앱에 적합한 이름을 입력한 다음 Enter 키를 선택합니다.

    앱 이름을 입력할 위치를 보여 주는 스크린샷.

이 폴더에 있는 파일의 작성자를 신뢰하려면 예 또는 아니요를 선택해야 하는 대화 상자가 나타납니다.

스크린샷은 이 폴더에 있는 파일의 작성자를 신뢰하거나 신뢰하지 않는 대화 상자를 보여줍니다.

봇 기능이 있는 Teams 앱이 몇 초 안에 만들어집니다.

생성된 앱을 보여 주는 스크린샷.

앱이 만들어지면 에이전트 도구 키트에 다음 메시지가 표시됩니다.

스크린샷은 기능이 성공적으로 만들어졌다는 메시지를 보여줍니다.

로컬 디버그를 선택하여 프로젝트를 미리 봅니다.

Teams 앱 만들기에 대한 간략한 요약입니다. Teams 앱 만들기에 대한 이 짧은 요약을 시청하세요.

Teams 앱 만들기

봇 앱 소스 코드 둘러보기

스캐폴딩이 완료되면 Visual Studio Code의 Explorer에서 프로젝트 디렉터리와 파일을 봅니다.

스크린샷은 폴더 구조를 보여줍니다.

폴더/파일 내용
m365agents.yml 주 프로젝트 파일
m365agents.local.yml 이렇게 하면 로컬 실행 및 디버깅을 활성화하는 작업으로 재정의 m365agents.yml 됩니다.
.vscode/ 로컬 디버그를 위한 VSCode 파일입니다.
appPackage/ Teams 응용 프로그램 매니페스트용 템플릿입니다.
adaptiveCards/ 봇에서 다시 보낸 적응형 카드입니다.
infra/ Azure 리소스를 프로비저닝하기 위한 템플릿입니다.
index.js 애플리케이션 진입점 및 express 처리기입니다.
teamsBot.js Teams 활동 처리기.

팁

Teams 내에서 첫 번째 봇을 통합하기 전에 Teams 외부의 봇에 익숙해지세요.

첫 번째 봇 앱 빌드 및 실행

에이전트 도구 키트를 사용하여 프로젝트 작업 영역을 설정한 후 봇 프로젝트를 빌드합니다. Microsoft 365 계정에 로그인해야 합니다.

Microsoft 365 계정에 로그인

이 계정을 사용하여 Teams에 로그인합니다. Microsoft 365 개발자 프로그램 테넌트를 사용하는 경우 등록하는 동안 설정한 관리자 계정은 Microsoft 365 계정입니다.

  1. Visual Studio Code를 엽니다.

  2. 사이드바에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 자격 증명을 사용하여 M365에 로그인 을 선택합니다.

    기본 웹 브라우저가 열리고 계정에 로그인할 수 있습니다.

  4. 메시지가 표시되면 브라우저를 닫고 Visual Studio Code로 돌아갑니다.

  5. Visual Studio Code 내의 에이전트 도구 키트로 돌아갑니다.

    이 계정을 사용하여 Teams에 로그인합니다. Microsoft 365 개발자 프로그램 테넌트를 사용하는 경우 등록하는 동안 설정한 관리자 계정은 Microsoft 365 계정입니다.

    스크린샷은 Microsoft 365 및 Azure에 로그인하는 위치를 보여줍니다.

이제 앱을 빌드하고 로컬에서 실행할 준비가 되었습니다.

로컬에서 첫 번째 봇 앱 빌드 및 실행

로컬 환경에서 앱을 빌드하고 실행하려면 다음을 수행합니다.

  1. Visual Studio Code에서 F5를 선택하여 앱을 디버그 모드로 실행합니다.

    참고

    에이전트 도구 키트가 특정 전제 조건을 검사할 수 없는 경우 검사하라는 메시지가 표시됩니다.

    디버거에서 로컬로 앱을 실행할 때 발생하는 상황을 알아봅니다.

    궁금한 경우를 위해 F5 키를 누르면 에이전트 도구 키트에서 다음이 나타납니다.

    1. 다음 필수 구성 요소를 모두 확인합니다.
    • Microsoft 365 계정으로 로그인했습니다.
    • Microsoft 365 계정에 대해 사용자 지정 앱 업로드가 사용하도록 설정되어 있습니다.
    • 지원되는 Node.js 버전이 설치되어 있습니다.
    • 봇 앱에 필요한 포트를 사용할 수 있습니다.
    1. npm 패키지를 설치합니다.
    2. 개발 터널을 시작하여 HTTP 터널을 만듭니다.
    3. Microsoft Entra ID에 앱을 등록하고 앱을 구성합니다.
    4. Bot Framework에서 봇 앱을 등록하고 봇 앱을 구성합니다.
    5. Teams 개발자 포털에 앱을 등록하고 앱을 구성합니다.
    6. 봇 앱을 시작합니다.
    7. 웹 브라우저에서 Teams를 시작하고 사용자 지정 봇 앱을 업로드합니다.

    디버깅을 위해 F5 키를 눌렀을 때를 보여주는 스크린샷

    참고

    앱을 처음 실행하면 모든 종속성이 다운로드되고 앱이 빌드됩니다. 빌드가 완료되면 브라우저 창이 자동으로 열립니다. 이 프로세스를 완료하는 데 3-5분 정도 걸릴 수 있습니다.

    Teams는 웹 브라우저에서 앱을 실행합니다.

  2. 메시지가 나타나면 Microsoft 365 계정으로 로그인합니다.

  3. 추가를 선택하여 사용자 지정 봇 앱을 Teams에 업로드합니다.

    Teams에 봇 앱을 추가하는 앱 세부 정보 대화 상자의 스크린샷.

  4. 열기를 선택하여 개인 scope에서 앱을 엽니다.

    또는 필요한 scope를 검색하여 선택하거나 목록에서 채널, 채팅 또는 모임을 선택한 다음 대화 상자를 이동하여 이동을 선택할 수 있습니다.

    공유 범위 목록이 있는 scope 선택 대화 상자의 스크린샷입니다.

    이제 봇이 Teams에서 성공적으로 실행되고 있습니다! 앱이 로드되면 봇과의 채팅 세션이 열립니다.

    스크린샷은 봇이 Teams 클라이언트에서 실행 중임을 보여줍니다.

    입력 welcome 하여 소개 카드를 표시하고, 입력 learn 하여 적응형 카드 및 봇 명령 설명서로 이동할 수 있습니다.

    스크린샷은 Teams 클라이언트의 봇에 있는 학습 카드를 보여줍니다.

    다른 웹 응용 프로그램과 마찬가지로 중단점 설정과 같은 일반적인 디버깅 작업을 수행할 수 있습니다. 파일을 열고 bot/teamsBot.js 메서드를 찾습니다.onMessage() 어떤 경우든 중단점을 설정합니다. 그런 다음, 텍스트를 입력합니다.

    앱이 로컬로 실행되지 않는 경우 문제를 해결하는 방법을 알아봅니다.

    Teams에서 앱을 성공적으로 실행하려면 Teams 계정에서 사용자 지정 앱 업로드를 사용하도록 설정했는지 확인하세요. 필수 구성 요소 섹션에서 사용자 지정 앱 업로드에 대해 자세히 알아볼 수 있습니다.

    중요

    사용자 지정 앱 업로드는 GCC(정부 커뮤니티 클라우드)에서 사용할 수 있으며 GCC High, DoD 및 21Vianet에서 운영하는 Teams에서는 지원되지 않습니다.

    팁

    앱 유효성 검사 도구를 사용하여 사용자 지정 앱을 업로드하기 전에 문제를 확인합니다. 이 도구는 도구 키트에 포함되어 있습니다. 오류를 수정하여 앱을 업로드합니다.

첫 번째 Teams 앱 배포

봇 기능으로 Teams 앱을 만들고, 빌드하고, 실행하는 방법을 배웠습니다. 마지막 단계는 Azure에 앱을 배포하는 것입니다.

에이전트 도구 키트를 사용하여 Azure에 봇 기능이 있는 첫 번째 앱을 배포해 보겠습니다.

Azure 계정에 로그인

이 계정을 사용하여 Microsoft Azure Portal에 액세스하고 앱을 지원하기 위한 새 클라우드 리소스를 프로비저닝합니다.

  1. Visual Studio Code를 엽니다.

  2. 봇 앱을 만든 프로젝트 폴더를 엽니다.

  3. 사이드바에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  4. 자격 증명을 사용하여 Azure에 로그인을 선택합니다.

    팁

    AZURE 계정 확장이 설치되어 있고 동일한 계정을 사용하는 경우 이 단계를 건너뛸 수 있습니다. 다른 확장에서 사용하는 것과 동일한 계정을 사용합니다.

    기본 웹 브라우저가 열리고 계정에 로그인할 수 있습니다.

  5. 메시지가 표시되면 브라우저를 닫고 Visual Studio Code로 돌아갑니다.

    사이드바의 계정 섹션에는 두 계정이 별도로 표시됩니다. 또한 사용 가능한 사용 가능한 Azure 구독 수도 나열합니다. 사용 가능한 Azure 구독이 하나 이상 있는지 확인합니다. 그렇지 않은 경우 로그아웃하고 다른 계정을 사용합니다.

축하합니다. Teams 앱을 만들었습니다! 이제 에이전트 도구 키트를 사용하여 앱 중 하나를 Azure에 배포하는 방법을 알아보겠습니다.

Azure에서 앱 프로비전 및 배포

배포는 두 단계로 구성됩니다. 먼저 Azure에서 필요한 클라우드 리소스(프로비저닝이라고도 함)를 만듭니다. 그런 다음 Azure는 앱의 코드를 생성된 클라우드 리소스에 복사합니다. 이 자습서에서는 봇 앱을 배포합니다.

프로비전과 배포의 차이점은 무엇인가요?
프로비전 단계에서는 앱에 대한 리소스를 Azure 및 Microsoft 365에 만들지만 리소스에 코드(HTML, CSS 또는 JavaScript)를 복사하지는 않습니다. 배포 단계에서는 프로비전 단계에서 만든 리소스에 앱의 코드를 복사합니다. 새 리소스를 프로비전하지 않고 여러 번 배포하는 것이 일반적입니다. 프로비전 단계는 완료하는 데 시간이 걸릴 수 있으므로 배포 단계와는 별개입니다.

Visual Studio Code 사이드바에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  1. 프로 비저닝을 선택합니다.

    스크린샷은 에이전트 도구 키트 아래의 클라우드에서 프로비저닝 선택을 보여줍니다.

  2. Azure 리소스에 사용할 구독을 선택합니다.

    스크린샷은 Azure 리소스에 사용할 구독을 보여줍니다.

    앱이 Azure 리소스를 사용하여 호스트됩니다.

    Azure에서 리소스를 실행할 때 비용이 발생할 수 있음을 경고하는 대화 상자가 표시됩니다.

  3. 프로 비저닝을 선택합니다.

    스크린샷은 Azure에서 리소스를 실행할 때 발생할 수 있는 비용에 대한 대화 상자를 보여줍니다.

    프로비저닝 프로세스는 Azure 클라우드에 리소스를 만듭니다. 시간이 다소 걸릴 수 있습니다. 오른쪽 아래 모서리에 있는 대화 상자를 보고 진행률을 모니터링할 수 있습니다. 몇 분 후 다음 알림이 표시됩니다.

    스크린샷은 클라우드에서 성공적으로 프로비저닝된 hellomsg를 표시하는 알림을 보여줍니다.

    원하는 경우 프로비전된 리소스를 볼 수 있습니다. 이 자습서에서는 리소스를 볼 필요가 없습니다.

    프로비전된 리소스가 환경 섹션에 나타납니다.

    스크린샷은 환경 섹션에서 프로비전되는 리소스를 보여줍니다.

  4. 프로비저닝이 완료된 후 수명 주기 패널에서 배포를 선택합니다.

    스크린샷은 클라우드에 배포가 빨간색으로 강조 표시된 것을 보여줍니다.

    프로비저닝과 마찬가지로 배포에도 다소 시간이 걸립니다. 오른쪽 아래 모서리에 있는 대화 상자를 보고 프로세스를 모니터링할 수 있습니다. 몇 분 후 완료 알림이 표시됩니다.

이제 동일한 프로세스를 사용하여 봇 및 메시지 확장 앱을 Azure에 배포할 수 있습니다.

배포된 앱 실행

프로비전 및 배포 단계가 완료되면 다음을 수행합니다.

  1. Visual Studio Code에서 디버그 패널(Ctrl+Shift+D / ⌘⇧-D 또는 실행 보기>)을 엽니다.

  2. 시작 구성 드롭다운에서 원격 시작(Edge) 을 선택합니다.

  3. 디버깅 시작(F5)을 선택합니다. Teams에 사용자 지정 봇 앱을 업로드하라는 메시지가 표시됩니다.

    스크린샷은 앱을 원격으로 디버그하고 시작하는 모습을 보여 줍니다.

  4. 추가를 선택하세요.

    Teams에 앱을 추가하는 앱 세부 정보 대화 상자의 스크린샷입니다.

  5. 열기를 선택하여 개인 scope에서 앱을 엽니다.

    또는 필요한 scope를 검색하여 선택하거나 목록에서 채널, 채팅 또는 모임을 선택한 다음 대화 상자를 이동하여 이동을 선택할 수 있습니다.

    공유 범위 목록이 있는 scope 선택 대화 상자의 스크린샷.

    Teams 클라이언트에 봇 앱을 성공적으로 추가했습니다.

    스크린샷은 Teams 클라이언트의 봇에 있는 학습 카드를 보여줍니다.

Azure에 앱을 배포한 경우 발생하는 결과 알아보기

배포하기 전에 응용 프로그램이 로컬에서 실행 중이었습니다.

  • 백 엔드는 Azure Functions 핵심 도구를 사용하여 실행됩니다.
  • Microsoft Teams에서 응용 프로그램을 로드하는 응용 프로그램 HTTP 엔드포인트는 로컬에서 실행됩니다.

배포는 2단계 프로세스입니다. 활성 Azure 구독에 리소스를 프로비전한 다음 애플리케이션의 백 엔드 및 프런트 엔드 코드를 Azure에 배포하거나 업로드합니다.

  • 백 엔드는 구성된 경우 Azure App Service 및 Azure Storage를 비롯한 다양한 Azure 서비스를 사용합니다.
  • 프런트 엔드 애플리케이션은 정적 웹 호스팅을 위해 구성된 Azure Storage 계정에 배포됩니다.

축하합니다!

해냈습니다!

봇 앱을 만들었습니다.

이제 기본 앱을 만드는 방법을 배웠으므로 더 복잡한 앱을 만들 수 있습니다. JavaScript를 사용하여 봇을 빌드하는 자습서를 완료했습니다.

자습서

Microsoft 365 에이전트 플레이그라운드를 사용하여 AI 챗봇 디버그

Teams AI 채팅 봇 앱을 사용하여 Microsoft Teams 앱 개발을 시작하고 Microsoft 365 에이전트 플레이그라운드(이전의 Teams 앱 테스트 도구)를 사용하여 디버그합니다. Agents Playground를 사용하면 봇 기반 앱을 손쉽게 디버깅할 수 있습니다. Agents Playground를 사용하기 위해 Microsoft 365 개발자 계정, 터널링 또는 Teams 앱 및 봇 등록이 필요하지 않습니다.


자습서: AI 챗봇 디버그

필수 구성 요소

봇과 채팅하고 Teams에 표시되는 메시지와 적응형 카드를 볼 수 있습니다. 활동 트리거를 사용하여 에이전트 플레이그라운드에서 활동을 모의 할 수도 있습니다.

참고

  • 에이전트 플레이그라운드는 Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)의 v5.4.0에서만 사용할 수 있습니다.
  • 에이전트 플레이그라운드는 데스크톱 및 웹 클라이언트에 대해서만 지원됩니다.

이 단계별 가이드는 에이전트 도구 키트를 사용하여 AI 챗봇을 빌드하고 테스트 도구를 사용하여 디버그하는 데 도움이 됩니다. 이 가이드를 완료하면 사용자가 AI 챗봇에 액세스하고 사용할 수 있는 다음 출력이 표시됩니다.

스크린샷은 테스트 도구에서 열린 봇을 보여줍니다.

설치 사용...
Visual Studio Code 또는 Visual Studio JavaScript, TypeScript 또는 C# 빌드 환경 최신 버전을 사용합니다.
Microsoft 365 에이전트 도구 키트 앱에 대한 프로젝트 스캐폴딩을 만드는 Microsoft Visual Studio Code 확장입니다. Agents Toolkit v5.4.0을 사용합니다. 자세한 내용은 에이전트 도구 키트 설치를 참조하십시오.
Node.js 백 엔드 JavaScript 런타임 환경입니다. 자세한 내용은 프로젝트 유형에 대한 버전 호환성 표Node.js 참조하세요.
OpenAI 또는 Azure OpenAI 먼저 OpenAI의 GPT를 사용하기 위한 OpenAI API 키를 생성합니다. 앱을 호스트하거나 Azure에서 리소스에 액세스하려면 Azure OpenAI 서비스를 만들어야 합니다.
Microsoft Edge (권장) 또는 Google Chrome 개발자 도구가 있는 브라우저

AI 챗봇 앱에 대한 프로젝트 작업 영역 만들기

Teams 앱의 봇 기능은 챗봇 또는 대화형 봇을 만듭니다. 웹 서비스와 통신하여 서비스 사용을 용이하게 합니다. 봇은 고객 서비스 제공과 같은 간단하고 자동화된 작업을 실행할 수 있습니다. 대화형 봇을 사용하여 일기 예보, 예약 또는 기타 제공되는 모든 서비스를 확인할 수 있습니다.

스크린샷은 세 가지 기능이 있는 앱을 보여줍니다. 봇이 강조 표시됩니다.

이러한 앱을 만들 준비가 이미 되었으므로 AI 챗봇 앱을 만들기 위한 새 Teams 프로젝트를 설정할 수 있습니다.

봇 프로젝트 작업 영역 만들기

전제 조건이 마련되었다면 시작하겠습니다!

  1. Visual Studio Code를 엽니다.

  2. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 새 에이전트/앱 만들기를 선택합니다.

    스크린샷은 에이전트 도구 키트 사이드바에서 새 프로젝트 만들기 링크의 위치를 보여줍니다.

  4. Teams>용 에이전트 선택 Azure OpenAI> 입력 필드에 입력 지금 Azure API 서비스 키 입력

    스크린샷은 에이전트 도구 키트 앱 템플릿을 보여줍니다.

  5. Teams용 기본 에이전트를 선택합니다. 봇에 다른 기능이 필요한 경우 필요한 옵션을 선택합니다.

    스크린샷은 새 앱에 추가할 앱 기능을 보여줍니다.

  6. 프로그래밍 언어를 JavaScript로 선택합니다.

    스크린샷은 프로그래밍 언어를 선택하는 옵션을 표시합니다.

  7. 기본 폴더를 선택합니다.

    스크린샷은 기본 위치의 선택을 표시합니다.

    기본 위치를 변경하려면 다음 단계를 따릅니다.

    1. 찾아보기를 선택합니다.

      스크린샷은 찾아보기 위치 옵션의 선택을 보여줍니다.

    2. 프로젝트 작업 영역의 위치를 선택합니다.

    3. 폴더 선택을 선택합니다.

      스크린샷은 선택할 폴더를 보여 줍니다.

  8. 앱에 적합한 이름을 입력한 다음 Enter 키를 선택합니다.

    앱 이름을 입력할 위치를 보여 주는 스크린샷.

    이 폴더의 파일 작성자를 신뢰하려면 예 또는 아니요를 선택해야 하는 대화 상자가 나타납니다.

    스크린샷은 이 폴더에 있는 파일의 작성자를 신뢰하거나 신뢰하지 않는 대화 상자를 보여줍니다.

이제 AI 챗봇 프로젝트 작업 영역을 성공적으로 만들었습니다.

봇 앱 소스 코드 둘러보기

스캐폴딩을 완료한 후 Visual Studio Code의 EXPLORER 섹션에서 프로젝트 디렉터리 및 파일을 탐색합니다.

스크린샷은 Teams 도구 키트 샘플 봇 폴더 구조를 보여줍니다.

폴더 또는 파일 이름 내용
env/.env.playground Git에 커밋할 수 있는 환경 변수가 있는 구성 파일입니다.
env/.env.playground.user 기본적으로 Git에 커밋되지 않는 자격 증명을 비롯한 환경 변수가 포함된 구성 파일입니다.
appPackage 앱 매니페스트 템플릿 파일 및 앱 아이콘(color.png 및 outline.png).
appPackage/manifest.json 로컬 및 원격 환경에서 앱을 실행하기 위한 앱 매니페스트입니다.
src/app.js AI 챗봇에 대한 비즈니스 논리를 처리합니다.
m365agents.yml 메인 에이전트 도구 키트 프로젝트 파일입니다. 프로젝트 파일은 두 가지 기본 항목인 속성, 구성 및 스테이지 정의를 정의합니다.
m365agents.local.yml 이렇게 하면 로컬 실행 및 디버깅을 활성화하는 작업으로 재정의 m365agents.yml 됩니다.
m365agents.playground.yml 테스트 도구에서 로컬 실행 및 디버깅을 사용하도록 설정하는 작업으로 재정의됩니다 m365agents.yml .

AI 챗봇 앱 빌드 및 실행

AI 채팅 봇용 OpenAI 키 및 엔드포인트 만들기

  1. Azure Portal로 이동합니다.

  2. 리소스 만들기를 선택하고 Azure OpenAI를 검색합니다.

  3. Azure OpenAI를 선택하고 만들기를 선택합니다.

    스크린샷은 Azure Portal의 Azure OpenAI를 보여줍니다.

  4. 필요한 세부 정보를 입력하고 다음을 선택합니다.

    스크린샷은 Azure OpenAI 구독 및 리소스 그룹을 보여줍니다.

  5. 인터넷을 포함한 모든 네트워크에서 이 리소스에 액세스할 수 있음을 선택하고 다음을 선택합니다.

    스크린샷은 Azure OpenAI 네트워크 세부 정보를 보여줍니다.

  6. 필요한 세부 정보를 입력하고 다음을 선택합니다.

    스크린샷은 Azure OpenAI 태그 세부 정보를 보여줍니다.

  7. 만들기를 선택합니다.

    스크린샷은 Azure OpenAI를 미리 보고 만드는 방법을 보여 줍니다.

AI 챗봇에 대한 키 및 엔드포인트를 만들었습니다.

스크린샷은 Azure OpenAI의 배포를 보여줍니다.

참고

AI 챗봇을 디버그하기 위해 OpenAI API 키를 얻을 수도 있습니다.

Azure OpenAI 키 및 엔드포인트 가져오기

  1. 리소스로 이동을 선택합니다.

    스크린샷은 Azure OpenAI 배포를 보여줍니다.

  2. 왼쪽 창에서 키 및 엔드포인트 를 선택하고 키 및 엔드포인트를 복사합니다. KEY 1 또는 KEY 2를 복사할 수 있습니다.

    스크린샷은 키와 엔드포인트를 보여줍니다.

    추가 사용을 위해 키 및 엔드포인트 를 저장합니다.

  3. 왼쪽 창에서 모델 배포를 선택하고 배포 관리를 선택합니다.

    스크린샷은 Azure OpenAI에 대한 모델 배포를 보여 줍니다.

    Azure OpenAI Studio 창이 나타납니다.

  4. 왼쪽 창에서 배포 를 선택하고 + 새 배포 만들기를 선택합니다.

    스크린샷은 Azure OpenAI에 대한 모델 배포를 보여줍니다.

  5. 다음 세부 정보를 선택합니다.

    1. 모델 선택 드롭다운 목록에서 gpt-35-turbo를 선택합니다.

      참고

      AI 챗봇에는 gpt-35-turbo 모델만 지원됩니다.

    2. 모델 버전 드롭다운 목록에서 0301(기본값)을 선택합니다.

    3. 배포 이름을 입력하고 만들기를 선택합니다.

      스크린샷은 Azure OpenAI 배포의 모델 및 버전을 보여줍니다.

    4. 나중에 사용할 수 있도록 배포 이름을 복사하고 저장합니다.

      스크린샷은 Azure OpenAI 배포의 배포 이름을 보여줍니다.

Azure OpenAI 키 및 엔드포인트 업데이트

  1. Visual Studio Code에서 프로젝트를 엽니다.

  2. EXPLORER에서 env.env.playground.user> 파일로 이동합니다.

  3. SECRET_AZURE_OPENAI_API_KEY과 SECRET_AZURE_OPENAI_ENDPOINT를 입력합니다.

    ...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

  4. src>app.js 파일로 이동합니다.

  5. 코드에 OpenAI 주석 처리하고 주석 처리 Azure OpenAI 를 제거합니다.

  6. 에 Azure OpenAI 배포 이름을 입력합니다.azureDefaultDeployment

    
// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,

AI 챗봇 앱 디버그 및 실행

  1. 왼쪽 창에서 실행 및 디버그 (Ctrl+Shift+D)를 선택한 다음 드롭다운 목록에서 에이전트 플레이그라운드에서 디버그 를 선택합니다.

    스크린샷은 에이전트 플레이그라운드에서 디버그를 선택하는 옵션을 보여줍니다.

  2. Agents Playground는 웹 페이지에서 AI 챗봇을 엽니다.

    스크린샷은 테스트 도구에서 열린 봇을 보여줍니다.

활동 트리거

활동 트리거에는 두 가지 유형이 있습니다.

미리 정의된 활동 트리거

Agents Playground는 봇의 기능을 테스트하기 위한 미리 정의된 활동 트리거를 제공합니다.

범주 활동 핸들러
설치 업데이트 작업 트리거 봇 설치


봇 제거		 onInstallationUpdate
onInstallationUpdateAdded

onInstallationUpdate
onInstallationUpdateRemove
대화 업데이트 활동 트리거 사용자 추가


봇 추가


채널 추가		 onMembersAdded
onTeamsMembersAddedEvent

onMembersAdded
onTeamsMembersAddedEvent

onTeamsChannelCreatedEvent
사용자 제거


봇 제거


채널 제거

팀 제거		 onMembersRemoved
onTeamsMembersRemovedEvent

onMembersRemoved
onTeamsMembersRemovedEvent

onTeamsChannelDeletedEvent

onTeamsTeamDeletedEvent
채널 이름 바꾸기

팀 이름 바꾸기		 onTeamsChannelRenamedEvent

onTeamsTeamRenamedEvent

참고

모든 유형의 활동을 모든 범위에서 사용할 수 있는 것은 아닙니다. 예를 들어 개인 채팅이나 그룹 채팅에서 채널을 추가하거나 제거할 수 없습니다.

미리 정의된 활동 트리거는 에이전트 플레이그라운드의 활동 모의 메뉴에서 사용할 수 있습니다.

사용자 추가 작업을 모의 작업하려면 다음 단계를 수행합니다.

  1. 에이전트 플레이그라운드에서 활동> 모의 사용자 추가로 이동합니다.

    스크린샷은 활동 모의 아래에 있는 사용자 추가 옵션을 보여줍니다.

    활동 처리기를 미리 볼 수 있는 대화 상자가 나타납니다.

  2. 활동 보내기를 선택합니다.

    스크린샷은 미리 정의된 모의 활동 추가 사용자에 대한 활동을 보내는 옵션을 보여줍니다.

    봇은 다음 응답을 보냅니다.

    스크린샷은 미리 정의된 모의 활동 사용자 추가의 응답을 보여줍니다.

사용자 지정 활동 트리거

예를 들어 reactionsAdded 봇 앱의 요구 사항을 충족하기 위해 사용자 지정 활동을 사용하여 활동 트리거를 사용자 지정할 수 있습니다. 에이전트 플레이그라운드는 활동의 필수 속성을 자동으로 채웁니다. 활동 유형을 수정하고 속성을 더 추가할 수도 있습니다.

  1. 활동 > 사용자지정 작업을모의작업을 선택합니다.

    스크린샷은 활동 모의 아래의 옵션 목록을 보여줍니다.

  2. messageReaction 추가하여 속성을 사용자 지정하세요.type

    {
    "type": "messageReaction",
    "reactionsAdded": [
    {
        "type": "like"
    }
    ],
    "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
}

  3. 활동 보내기를 선택합니다.

    스크린샷은 모의 활동에 대한 사용자 지정 후 활동을 보내는 옵션을 보여줍니다.

    봇은 onReactionsAdded 이에 대한 응답으로 처리기를 보냅니다.

    스크린샷은 사용자 지정 모의 작업의 응답을 보여줍니다.

챌린지 완료

이런 결과물을 생각해 냈나요?

스크린샷은 테스트 도구에서 열린 봇을 보여줍니다.

축하합니다! AI 챗봇 앱을 성공적으로 만들었습니다. 이제 Agents Playground에서 AI 챗봇 앱을 디버그하는 방법을 배웠습니다.

Microsoft 365 에이전트 플레이그라운드

맨 위로 이동

자동 관리 메시지 보내기

자동 관리 메시지는 사용자가 채팅에서 보낸 간단한 명령에 대한 응답으로 봇이 보내는 메시지입니다.


자습서: 자동 관리 메시지 보내기

메시지 응답은 다음 형식 중 하나일 수 있습니다.

  • 환영 메시지
  • 예약된 메시지
  • 알림

이 단계별 가이드는 봇에서 자동 관리 메시지를 보내는 데 도움이 됩니다. 다음 출력이 표시됩니다.

스크린샷은 Teams 채팅의 자동 관리 인사 메시지를 보여줍니다.

필수 구성 요소

앱을 빌드하고 배포하기 위해 다음 도구를 설치해야 합니다.

  설치 사용
  Microsoft Visual Studio Code JavaScript 또는 TypeScript, 빌드 환경. 최신 버전을 사용합니다.
  Microsoft 365 에이전트 도구 키트 (이전의 Teams 도구 키트) 앱에 대한 프로젝트 스캐폴딩을 만드는 Visual Studio Code 확장입니다. 최신 버전을 사용합니다.
  Node.js 백 엔드 JavaScript 런타임 환경입니다. 자세한 내용은 프로젝트 유형에 대한 버전 호환성 표Node.js 참조하세요.
  Microsoft Teams Teams는 채팅, 모임, 통화 및 모든 앱을 통해 함께 작업하는 모든 사람과 한 곳에서 공동 작업할 수 있습니다.
  Microsoft Edge (권장) 또는 Google Chrome 개발자 도구가 있는 브라우저
  Microsoft 365 개발자 계정 앱을 설치할 수 있는 적절한 권한이 있는 Teams 계정에 액세스합니다.

개발 환경 준비

필요한 도구를 설치한 후 개발 환경을 설정합니다.

Microsoft 365 에이전트 도구 키트 설치

Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)는 앱에 대한 클라우드 리소스를 프로비전 및 배포하고 Teams 스토어에 게시하는 도구를 사용하여 개발 프로세스를 간소화하는 데 도움이 됩니다.

에이전트 도구 키트를 Visual Studio Code 또는 Microsoft 365 에이전트 도구 키트 CLI(이전의 TeamsFx CLI)라는 명령줄 인터페이스와 함께 사용할 수 있습니다.

  1. Visual Studio Code를 열고 확장(Ctrl+Shift+X 또는 확장 보기>)을 선택합니다.

  2. 검색 상자에 Microsoft 365 에이전트 도구 키트를 입력합니다.

  3. 설치를 선택합니다.

    스크린샷은 에이전트 도구 키트 확장 설치를 보여줍니다.

    Microsoft 365 에이전트 도구 키트 아이콘이 Visual Studio Code 활동 표시줄에 나타납니다.

Visual Studio Code Marketplace에서 에이전트 도구 키트를 설치할 수도 있습니다.

Teams 개발 테넌트 설정

테넌트는 채팅하고, 파일을 공유하고, 모임을 진행하는 Teams의 organization에 대한 공간 또는 컨테이너입니다. 이 공간은 앱을 업로드하고 테스트하는 곳이기도 합니다. 테넌트와 함께 개발할 준비가 되었는지 확인해 보겠습니다.

앱 업로드 옵션 확인

사용자 지정 앱을 만든 후 사용자 지정 앱 업로드 옵션을 사용하여 Teams에 앱을 업로드해야 합니다. Microsoft 365 계정에 로그인하여 이 옵션이 활성화되어 있는지 검사합니다.

다음 단계는 Teams에서 앱을 업로드할 수 있는지 확인하는 데 도움이 됩니다.

  1. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드를 선택합니다.

  4. 사용자 지정 앱을 업로드하는 옵션을 찾습니다. 이 옵션이 표시되면 사용자 지정 앱을 업로드할 수 있습니다.

    Teams에서 사용자 지정 앱을 업로드하는 옵션을 보여 주는 스크린샷

    참고

    사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기(선택 사항)

Teams 개발자 계정이 없는 경우 Microsoft 365 개발자 프로그램에 참가하세요.

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 나타납니다.

    이 스크린샷은 Microsoft 365 개발자 프로그램을 표시합니다.

  5. 방금 설정한 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

사전 메시지 봇 빌드

Visual Studio Code를 사용하여 자동 대응 메시지 봇을 빌드하려면 다음 단계를 따르세요.

  1. Visual Studio Code를 엽니다.

  2. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 왼쪽 창에서 샘플 보기를 선택합니다.

    Visual Studio 활동 모음의 샘플 보기 옵션을 보여주는 스크린샷

  4. 샘플 목록에서 사전 메시징을 선택합니다. 디버깅할 준비가 된 미리 빌드된 샘플이 열립니다.

    스크린샷은 샘플 목록에서 미리 빌드된 자동 관리 메시징 봇 샘플을 보여줍니다.

  5. 만들기를 선택합니다.

    스크린샷은 자동 관리 메시징 봇을 만드는 만들기 옵션을 보여 줍니다.

  6. 기본 폴더를 선택하여 프로젝트 루트 폴더를 기본 위치에 저장합니다.

    스크린샷은 기본 위치를 선택하는 옵션을 보여 줍니다.

    기본 위치를 변경하려면 다음 단계를 수행합니다.

    1. 찾아보기를 선택합니다.

      스크린샷은 위치를 찾아보는 옵션을 보여줍니다.

    2. 프로젝트 작업 영역의 위치를 선택합니다.

    3. 폴더 선택을 선택합니다.

      스크린샷은 폴더 선택 옵션을 보여줍니다.

    자동 관리 메시지 봇은 몇 초 후에 생성되고 디버그 옵션과 함께 오른쪽 아래 모서리에 자동 관리 메시지 봇 성공 대화 상자가 표시됩니다.

    스크린샷은 봇이 만든 자동 관리 메시지를 보여줍니다. :::

  7. 왼쪽 위 모서리에서 실행 및 디버그 아이콘을 선택합니다.

  8. 드롭다운 목록에서 디버그(Edge) 또는 디버그(Chrome) 를 선택합니다.

    스크린샷은 선택할 디버깅 옵션을 보여줍니다.

    디버깅에 성공하면 로컬 컴퓨터의 Teams에 자동 관리 메시지 봇을 업로드하라는 메시지가 표시됩니다.

  9. 추가를 선택하세요.

    추가 옵션이 강조 표시된 메시지 확장 세부 정보 대화 상자의 스크린샷.

  10. 필요한 scope를 검색하여 선택하거나 목록에서 채널, 채팅 또는 모임을 선택한 다음 대화 상자를 이동하여 이동을 선택합니다.

    공유 범위 목록을 보여 주는 scope 선택 대화 상자의 스크린샷입니다.

    자동 관리 메시지 봇 앱이 Teams 클라이언트에 업로드되고 전송된 메시지에 대한 응답으로 다음 메시지가 표시됩니다.

    스크린샷은 채팅의 자동 관리 메시지 봇 응답을 보여줍니다.

  11. URL을 복사하여 붙여넣거나 브라우저에서 URL로 이동합니다. 자동 인사 메시지가 트리거되고 채팅에서 공유됩니다.

    스크린샷은 봇이 Teams에서 자동 관리 메시지로 응답하도록 트리거하는 브라우저를 보여줍니다.

  12. Teams로 이동합니다. 봇으로부터 자동 관리 인사 메시지를 받게 됩니다.

    스크린샷은 채팅에서 봇의 응답을 보여줍니다.

소스 코드 둘러보기

에이전트 도구 키트는 앱을 빌드하기 위한 구성 요소를 제공합니다. 프로젝트를 만든 후 Visual Studio Code의 탐색기 영역에서 프로젝트 폴더와 파일을 볼 수 있습니다.

스크린샷은 구조 탭을 보여줍니다.

새 프로젝트 폴더에는 다음 내용이 포함되어 있습니다.

폴더/파일 내용
.vscode/ 디버깅용 Visual Studio Code 파일입니다.
appManifest/ 앱 매니페스트(이전에는 Teams 앱 매니페스트라고 함)용 템플릿입니다.
env/ 이름/값 쌍은 환경 파일에 저장되며 프로비저닝 및 배포 규칙을 사용자 지정하는 데 사용됩니다 m365agents.yml .
manifest.json Teams용 개발자 포털을 통해 게시할 앱 매니페스트는 다음에 저장됩니다.Properties/manifest.json
m365agents.yml 기본 프로젝트 파일은 앱 구성을 설명하고 각 수명 주기 단계에서 실행할 작업 집합을 정의합니다.
m365agents.local.yml 이렇게 하면 로컬 실행 및 디버깅을 활성화하는 작업으로 재정의 m365agents.yml 됩니다.

사전 메시지 봇 배포

자동 관리 메시지 봇 기능을 사용하여 Teams 앱을 빌드하고 실행하는 방법을 배웠습니다. 에이전트 도구 키트를 사용하여 Azure에 자동 관리 메시지 봇 기능이 있는 첫 번째 앱을 배포해 보겠습니다.

Azure 계정에 로그인

계정을 사용하여 Microsoft Azure Portal에 액세스하고 앱을 지원하기 위한 새 클라우드 리소스를 프로비저닝합니다.

  1. Visual Studio Code를 엽니다.

  2. 자동 관리 메시지 봇 앱을 만든 프로젝트 폴더를 엽니다.

  3. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  4. 자격 증명을 사용하여 Azure에 로그인을 선택합니다.

    팁

    AZURE 계정 확장이 설치되어 있고 동일한 계정을 사용하는 경우 이 단계를 건너뛸 수 있습니다.

    기본 웹 브라우저가 열리고 계정에 로그인할 수 있습니다.

  5. 메시지가 표시되면 브라우저를 닫고 Visual Studio Code로 돌아갑니다.

사이드바의 계정 섹션에는 두 계정이 별도로 표시됩니다. 또한 사용 가능한 사용 가능한 Azure 구독 수도 나열합니다. 사용 가능한 Azure 구독이 하나 이상 있는지 확인합니다. 그렇지 않은 경우 로그아웃하고 다른 계정을 사용합니다.

Azure에 앱 배포

배포는 두 단계로 구성됩니다. 먼저, 필요한 클라우드 리소스가 생성됩니다(프로비저닝이라고도 함). 그런 다음 앱의 코드가 생성된 클라우드 리소스에 복사됩니다. 이 자습서에서는 봇 앱을 배포합니다.

프로비전과 배포의 차이점은 무엇인가요?
프로비전은 앱에 대한 Azure 및 Microsoft 365 리소스를 생성하지만 리소스에 코드(HTML, CSS 및 JavaScript)는 복사되지 않습니다.
배포 는 프로비저닝 중에 만든 리소스에 앱의 코드를 복사합니다. 새 리소스를 프로비전하지 않고 여러 번 배포하는 것이 일반적입니다. 프로비전을 완료하는 데 시간이 걸릴 수 있으므로 배포와는 별개입니다.

  1. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  2. 수명 주기에서 프로비저닝을 선택합니다.

    스크린샷은 프로비전 명령을 보여줍니다.

  3. 기존 구독 중 하나를 선택합니다.

    스크린샷은 프로비저닝을 위한 구독 옵션을 보여줍니다.

  4. 기존 리소스 그룹을 선택하거나 새 리소스 그룹을 만듭니다. 자세한 내용은 리소스 그룹 만들기를 참조하세요.

    스크린샷은 프로비저닝을 위한 리소스 그룹 옵션을 보여줍니다.

    참고

    Azure에서 리소스를 실행할 때 비용이 발생할 수 있음을 언급하는 대화 상자가 나타납니다.

  5. 프로 비저닝을 선택합니다.

    프로비저닝 대화 상자의 스크린샷.

    프로비저닝 프로세스는 Azure 클라우드에 리소스를 만듭니다. 오른쪽 아래 모서리에 나타나는 대화 상자에서 진행률을 모니터링할 수 있습니다. 몇 분 후 다음 대화 상자가 나타납니다.

    스크린샷은 프로비저닝 완료 대화 상자를 보여줍니다.

  6. 수명 주기에서 배포를 선택합니다.

    스크린샷은 LIFECYCLE 아래의 배포 옵션을 보여줍니다.

  7. 배포를 선택합니다.

    스크린샷은 배포할 확인 대화 상자를 보여줍니다.

    배포에는 다소 시간이 걸립니다. 오른쪽 아래 모서리에 나타나는 대화 상자에서 진행률을 모니터링할 수 있습니다. 몇 분 후 다음 대화 상자가 나타납니다.

    배포 확인 대화 상자의 스크린샷

  8. Visual Studio Code에서 디버그 패널(Ctrl+Shift+D / ⌘⇧-D 또는실행보기>)을 엽니다.

  9. 시작 구성 드롭다운 목록에서 원격 시작(Edge) 을 선택합니다.

    스크린샷은 강조 표시된 원격 디버그 옵션을 보여줍니다.

    디버깅이 성공하면 자동 관리 메시지 봇 앱을 Teams에 업로드하라는 메시지가 표시됩니다.

  10. 추가를 선택하세요.

    추가 옵션이 강조 표시된 메시지 확장 앱 대화 상자의 스크린샷.

  11. 필요한 scope를 검색하여 선택하거나 목록에서 채널, 채팅 또는 모임을 선택한 다음 대화 상자를 이동하여 이동을 선택합니다.

    스크린샷은 공유 범위 목록이 있는 scope 선택 대화 상자를 보여줍니다.

    자동 관리 메시지 봇 앱이 Teams 클라이언트에 업로드되고 전송된 메시지에 대한 응답으로 다음 메시지가 표시됩니다.

    스크린샷은 채팅의 자동 관리 메시지 봇 응답을 보여줍니다.

  12. URL을 복사하여 붙여넣거나 브라우저에서 URL로 이동합니다. 자동 인사 메시지가 트리거되고 채팅에서 공유됩니다.

    스크린샷은 봇이 Teams에서 자동 관리 메시지로 응답하도록 트리거하는 브라우저를 보여줍니다.

  13. Teams로 이동합니다. 봇으로부터 자동 관리 인사 메시지를 받게 됩니다.

    스크린샷은 채팅에서 봇의 응답을 보여줍니다.

챌린지 완료

이런 생각이 나셨나요?

스크린샷은 자동 인사 메시지를 보여줍니다.

시나리오를 완료했습니다.

  • 매일 알림을 보내거나 정기적으로 사용자의 피드백을 요청할 수 있습니다.
  • 여러 알림을 피하기 위해 제한 제한을 처리할 수 있습니다.

자동 관리 메시지 보내기

맨 위로 이동

API 기반 메시지 확장 빌드

API(API 기반)를 사용하여 빌드된 메시지 확장은 외부 서비스와 상호 작용할 수 있도록 하여 Teams 앱의 기능을 크게 향상시킵니다. API 기반 메시지 확장은 여러 애플리케이션 간에 전환할 필요성을 줄여 워크플로를 간소화하는 데 도움이 될 수 있습니다.


자습서: API 기반 메시지 확장 빌드

참고

API 기반 메시지 확장은 검색 명령만 지원합니다.

API 기반 메시지 확장을 사용하여 비즈니스 워크플로에서 일반적으로 사용되는 외부 서비스를 통합할 수 있습니다. 예를 들어 고객 관리에 CRM 시스템을 자주 사용하는 기업은 메시지 확장을 사용하여 Teams에서 직접 고객 데이터를 가져오고 표시할 수 있습니다. 이 앱은 다른 응용 프로그램 간에 전환할 필요성을 줄여 시간을 절약하고 효율성을 향상시키는 데 도움이 됩니다. 이 기능은 데스크톱, 웹, 모바일을 포함하여 Teams를 사용할 수 있는 모든 플랫폼에서 지원됩니다.

메시지 확장 빌드를 위한 필수 구성 요소

다음은 앱을 빌드하고 배포하는 데 필요한 도구 목록입니다.

설치 사용...
Microsoft Teams Microsoft Teams는 채팅, 모임 또는 통화용 앱을 통해 함께 작업하는 모든 사람들과 모두 한 곳에서 공동 작업할 수 있습니다.
Microsoft Edge (권장) 또는 Google Chrome 개발자 도구가 있는 브라우저
Visual Studio Code JavaScript, TypeScript 또는 SharePoint 프레임워크(SPFx) 빌드 환경입니다. 버전 1.55 이상을 사용합니다.
Microsoft 365 개발자 계정 앱을 설치할 수 있는 적절한 권한이 있는 Teams 계정에 액세스합니다.
Azure 계정 Azure 리소스에 대한 액세스 권한.
OAD(OpenAPI 설명) 문서 API의 기능을 설명하는 문서입니다. 자세한 내용은 OpenAPI 설명을 참조하세요.

Teams 개발 테넌트 설정

테넌트는 채팅하고, 파일을 공유하고, 모임을 진행하는 Teams의 organization에 대한 공간 또는 컨테이너와 같습니다. 이 공간은 사용자 지정 앱을 업로드하고 테스트하는 곳이기도 합니다. 테넌트와 함께 개발할 준비가 되었는지 확인해 보겠습니다.

사용자 지정 앱 업로드 옵션 확인

앱을 만든 후에는 배포하지 않고 Teams에 앱을 로드해야 합니다. 이 프로세스를 사용자 지정 앱 업로드라고 합니다. 이 옵션을 보려면 Microsoft 365 계정에 로그인하세요.

참고

Teams 로컬 환경에서 앱을 미리 보고 테스트하려면 사용자 지정 앱 업로드가 필요합니다. 사용하도록 설정되어 있지 않으면 Teams 로컬 환경에서 앱을 미리 보고 테스트할 수 없습니다.

테넌트가 이미 있고 관리자 액세스 권한이 있나요? 정말 그렇은지 검사해 봅시다!

Teams에서 사용자 지정 앱을 업로드할 수 있는지 확인합니다.

  1. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드를 선택합니다.

  4. 사용자 지정 앱을 업로드하는 옵션을 찾습니다. 옵션이 표시되면 사용자 지정 앱 업로드가 사용하도록 설정됩니다.

    스크린샷은 봇 홈을 보여줍니다.

참고

사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기(선택 사항)

Teams 개발자 계정이 없는 경우 무료로 받을 수 있습니다. Microsoft 365 개발자 프로그램에 참여하세요!

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 나타납니다.

    스크린샷은 Microsoft 365 개발자 프로그램을 표시합니다.

  5. 방금 설정한 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

무료 Azure 계정 가져오기

Azure에서 앱을 호스트하거나 리소스에 액세스하려면 Azure 구독이 있어야 합니다. 시작하기 전에 무료 계정을 만드세요.

계정을 설정하기 위한 모든 도구가 있습니다. 다음으로, 개발 환경을 설정하고 구축을 시작하겠습니다! 먼저 빌드할 앱을 선택합니다.

OpenAPI 설명 문서 만들기

OAD(OpenAPI 설명)는 OpenAPI 파일의 구조화 및 개요 방식을 설명하는 업계 표준 사양입니다. API를 설명하기 위한 언어에 구애받지 않고 사람이 읽을 수 있는 형식입니다. 사람과 기계 모두 쉽게 읽고 쓸 수 있습니다. 스키마는 컴퓨터에서 읽을 수 있으며 YAML 또는 JSON으로 표시됩니다.

API와 상호 작용하려면 OpenAPI 설명 문서가 필요합니다. OpenAPI 설명 문서는 다음 기준을 충족해야 합니다.

  • 이 속성은 auth 지정할 수 없습니다.

  • 지원되는 형식은 JSON 및 YAML입니다.

  • OpenAPI 버전 2.0 및 3.0.x가 지원됩니다.

  • Teams는 oneOf, anyOf, allOf 및 not(swagger.io) 구문을 지원하지 않습니다.

  • 요청에 대한 배열 생성은 지원되지 않지만 JSON 요청 본문 내의 중첩된 개체는 지원됩니다.

  • 요청 본문이 있는 경우 다양한 API와의 호환성을 보장하기 위해 애플리케이션/Json이어야 합니다.

  • 속성에 대한 HTTPS 프로토콜 서버 URL을 정의합니다.servers.url

  • 단일 매개 변수 검색만 지원됩니다.

  • 기본값 없이 필수 매개 변수 하나만 사용할 수 있습니다.

  • POST 및 GET HTTP 메서드만 지원됩니다.

  • OpenAPI 설명 문서에는 operationId.

  • 작업에는 기본값이 없는 헤더 또는 쿠키 매개 변수가 필요하지 않아야 합니다.

  • 명령에는 정확히 하나의 매개 변수가 있어야 합니다.

  • OpenAPI 설명 문서에 원격 참조가 없는지 확인합니다.

  • 기본값이 있는 필수 매개 변수는 선택 사항으로 간주됩니다.

    이 자습서의 예로 다음 OpenAPI 설명을 사용했습니다.

    OpenAPI 설명 
        openapi: 3.0.1
    info:
    title: OpenTools Plugin
    description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
    version: 'v1'
    servers:
        - url: https://gptplugin.opentools.ai
    paths:
    /tools:
    get:
    operationId: searchTools
    summary: Search for AI Tools
        parameters:
        - in: query
          name: search
          required: true
          schema:
          type: string
          description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
        responses:
        "200":
          description: OK
          content:
          application/json:
            schema:
            $ref: '#/components/schemas/searchToolsResponse'
        "400":
          description: Search Error
          content:
          application/json:
            schema:
            ref: '#/components/schemas/searchToolsError'
        components:
        schemas:
        searchToolsResponse:
        required:
        - search
        type: object
        properties:
        tools:
        type: array
        items:
        type: object
        properties:
        name:
        type: string
        description: The name of the tool.
        opentools_url:
        type: string
        description: The URL to access the tool.
        main_summary:
        type: string
        description: A summary of what the tool is.
        pricing_summary:
        type: string
        description: A summary of the pricing of the tool.
        categories:
        type: array
        items:
        type: string
        description: The categories assigned to the tool.
        platforms:
        type: array
        items:
        type: string
        description: The platforms that this tool is available on.
        description: The list of AI tools.
        searchToolsError:
        type: object
        properties:
        message:
        type: string
        description: Message of the error.

    참고

    속성을 하나의 매개 변수에만 사용할 수 있는지 required: true 확인합니다. 필수 매개 변수가 두 개 이상 있는 경우 다른 매개 변수에 대한 필수 속성을 업데이트할 수 있습니다.required: false

OpenAPI 설명 문서가 유효한지 확인할 수 있습니다. 확인하려면 다음 단계를 따르세요.

  1. Swagger 또는 OpenAPI 유효성 검사기로 이동하여 OpenAPI 설명 문서의 유효성을 검사합니다.

  2. OpenAPI 설명 문서를 저장합니다.

  3. Swagger 편집기로 이동합니다.

  4. 왼쪽 창의 편집기에 OpenAPI 설명을 붙여넣습니다.

  5. 오른쪽 창에서 GET을 선택합니다.

  6. 사용해 보기를 선택합니다.

  7. 검색 매개변수의 값을 도구로 입력하여 음악을 만듭니다.

  8. 실행을 선택합니다. Swagger 편집기가 제품 목록과 함께 응답을 표시합니다.

    스크린샷은 매개 변수, 해당 값 및 Swagger 편집기의 **EXECUTE** 옵션을 보여줍니다.

  9. 서버 응답>응답 본문으로 이동합니다.

  10. 에서 products목록에서 첫 번째 제품을 복사하고 나중에 참조할 수 있도록 저장합니다.

    스크린샷은 응답 본문에서 선택된 강조 표시된 제품을 보여줍니다.

응답 렌더링 템플릿 만들기

OpenAPI 설명 문서에는 앱이 GET 또는 POST 요청에 응답하기 위한 응답 렌더링 템플릿이 필요합니다. 응답 렌더링 템플릿은 적응형 카드 템플릿, 미리 보기 카드 템플릿 및 메타데이터로 구성됩니다.

적응형 카드 서식 파일

적응형 카드 서식 파일을 만들려면 다음 단계를 수행합니다.

  1. ChatGPT로 이동하여 메시지 작성 영역에서 다음 쿼리를 요청합니다.

    
Create an Adaptive Card Template that binds to the following response:
    "categories": [
        "Music Generation",
        "AI Detection"
    ],
    "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
    "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
    "name": "AI Music Generator",
    "opentools_url": "https://goto.opentools.ai/ai-music-generator",
    "platforms": [
        "Web",
        "App",
        "API"
    ]

  2. 메시지 보내기를 선택합니다.

  3. ChatGPT는 샘플 데이터에 바인딩되는 적응형 카드 템플릿을 사용하여 응답을 생성합니다. 나중에 참조할 수 있도록 적응형 카드 서식 파일을 저장합니다.

    다음은 적응형 카드 서식 파일의 예입니다.

    적응형 카드 서식 파일 
    
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
    {
    "type": "TextBlock",
    "text": "AI Music Generator",
    "weight": "Bolder",
    "size": "Large"
    },
    {
    "type": "TextBlock",
    "text": "Categories",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
     "text": "Music Generation, AI Detection",
     "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Description",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
    "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Platform",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "Web, App, API",
    "wrap": true
    }
],
"actions": [
    {
    "type": "Action.OpenUrl",
    "title": "Learn More",
    "url": "https://goto.opentools.ai/ai-music-generator"
    },
    {
    "type": "Action.OpenUrl",
    "title": "Try It",
    "url": "https://goto.opentools.ai/c/ai-music-generator"
    }
]
}

  4. 생성된 적응형 카드가 샘플 데이터에 바인딩되는지 확인하려면 다음 단계를 수행합니다.

    1. 적응형 카드 Designer로 이동합니다.

    2. 호스트 앱 선택으로 이동한 다음 드롭다운에서 Microsoft Teams를 선택합니다.

    3. 카드 페이로드 편집기로 이동하여 적응형 카드 템플릿 코드를 붙여넣습니다.

    4. 샘플 데이터 편집기로 이동하여 이전에 저장한 GET API 응답을 붙여넣습니다.

      스크린샷은 적응형 카드 템플릿 및 샘플 데이터가 있는 적응형 카드 디자이너를 보여줍니다.

    5. 미리 보기 모드를 선택합니다. 적응형 카드 디자이너는 응답을 템플릿에 바인딩하는 데이터와 함께 적응형 카드를 표시합니다.

      스크린샷은 적응형 카드 템플릿 및 샘플 데이터가 있는 적응형 카드 디자이너를 보여줍니다.

미리 보기 카드 템플릿 만들기

미리 보기 카드 템플릿에는 , , subtitle및 image 속성이 포함될 title수 있습니다. API 응답에 이미지가 없는 경우 이미지 속성을 제거할 수 있습니다.

다음은 미리 보기 카드 템플릿의 예입니다.

미리 보기 카드 템플릿 
   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    }

and titlesubtitle에 대한 if 조건을 만듭니다. 여기서:

  • 이름이 있으면 봇이 이름을 사용합니다.
  • 이름이 없으면 봇은 NA를 사용합니다.

예를 들면 "title": "Name: ${if(name, name, 'N/A')}". 나중에 참조할 수 있도록 미리 보기 카드 템플릿을 저장합니다.

응답 렌더링 템플릿

응답 렌더링 템플릿은 에서 호스트되는 스키마를 준수해야 합니다.https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json

응답 렌더링 템플릿을 만들려면 다음 단계를 수행합니다.

  1. JSON 파일을 만들고 파일에 다음 코드를 추가합니다.

    { 
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
  "version": "1.0", 
  "jsonPath": "", 
  "responseLayout": "", 
  "responseCardTemplate": { 
 },
 "previewCardTemplate": {
     }
 }

  2. 다음과 같이 응답 렌더링 템플릿의 속성을 업데이트합니다.

    # 속성 이름 값
    1. "$schema" "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
    2. "version" "1.0"
    version 사용할 렌더링 템플릿의 버전입니다.
    3. "jsonPath" "tools"
    jsonPath 응답 JSON 응답의 하나 이상의 결과에 대한 경로입니다. API 응답의 제품 목록에서 관련 데이터/배열에 를 추가합니다 jsonPath . 이 경우는 jsonPath 도구입니다. JSON 경로를 결정하는 방법에 대한 자세한 내용은 JSON 경로로 JSON 쿼리 단원을 참조하십시오.
    4. "responseLayout" "list"
    responseLayout 첨부 파일의 레이아웃을 지정합니다. 결과 형식의 응답에 사용됩니다. 지원되는 형식은 목록 및 그리드입니다. 응답 본문에 텍스트, 제목 및 이미지와 같은 여러 요소가 있는 개체가 포함된 경우 응답 레이아웃을 로 설정해야 합니다.list API 응답에 이미지나 미리 보기만 포함된 경우 응답 레이아웃을 로 설정해야 합니다.grid
    5. "responseCardTemplate" 이전에 저장한 적응형 카드 템플릿 코드를 붙여넣습니다.
    responseCardTemplate JSON 응답을 적응형 카드에 매핑하는 적응형 카드 템플릿입니다.
    6. "previewCardTemplate" 이전에 저장한 미리 보기 카드 템플릿 코드를 붙여넣습니다.
    previewCardTemplate메시지 확장 플라이아웃에서 결과의 미리 보기를 표시하는 데 사용되는 미리 보기 카드 템플릿입니다.

  3. OpenAPI 설명 문서를 저장한 것과 동일한 폴더에 응답 렌더링 템플릿을 저장합니다.

다음 코드는 응답 렌더링 템플릿의 예입니다.

응답 렌더링 템플릿 

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

앱 매니페스트 만들기

이제 앱 매니페스트(이전에는 Teams 앱 매니페스트라고 함)를 만들어야 합니다. 앱 매니페스트는 앱이 Microsoft Teams 제품에 통합되는 방법을 설명합니다.

Teams 앱 매니페스트 만들기

매니페스트를 만들려면 다음 단계를 수행합니다.

  1. 새 JSON 파일을 만듭니다. 앱 매니페스트는 앱 매니페스트 스키마에 정의된 스키마 1.20 버전을 따라야 합니다.

  2. JSON 파일에 다음 코드를 추가합니다.

    앱 매니페스트 
    {
 "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
 "manifestVersion": "1.20",
 "version": "1.0.3",
 "id": "<<YOUR-MICROSOFT-APP-ID>>",
 "packageName": "com.microsoft.teams.extension",
 "developer": {
     "name": "Teams App, Inc.",
     "websiteUrl": "https://www.example.com",
     "privacyUrl": "https://www.example.com/termofuse",
     "termsOfUseUrl": "https://www.example.com/privacy"
 },
 "icons": {
     "color": "color.png",
     "outline": "outline.png"
 },
 "name": {
     "short": "Search ME API",
     "full": "Search ME API full"
 },
 "description": {
     "short": "product app for testing API Message Extensions",
     "full": "product app for testing API Message Extensions"
 },
 "accentColor": "#FFFFFF",
 "composeExtensions": [
     {
         "composeExtensionType": "",
         "apiSpecificationFile": "",
         "commands": [
             {
                 "context": [
                     "compose"
                 ],
                 "type": "query",
                 "title": "API for fetching Klarna.",
                 "id": "",
                 "parameters": [
                     {
                         "name": "",
                         "title": "",
                         "description": ""
                     }
                 ],
                 "description": "",
                 "apiResponseRenderingTemplateFile": ""
             }
         ]
     }
 ],
 "permissions": [
     "identity",
     "messageTeamMembers"
 ],
 "validDomains": []
}

  3. 다음과 같이 앱 매니페스트 속성을 업데이트합니다.

    • 봇의 Microsoft 앱 ID로 바꿉 <<YOUR-MICROSOFT-APP-ID>> 니다.
    • 의 값을 composeExtensionType 업데이트합니다.apiBased
    • 의 apiSpecificationFile 값을 OpenAPI 설명 파일의 경로로 업데이트합니다.
    • 의 값을 commands.id 업데이트합니다.searchTools
    • 의 값을 commands.title 업데이트합니다.Search for AI Tools
    • 의 값을 commands.description 업데이트합니다.Search for AI Tools
    • 의 값을 parameters.name 업데이트합니다.search 매개 변수가 없는 경우 값은 쿼리 매개 변수 properties.name 이거나 요청 본문 스키마의 속성을 참조하는 경우 이어야 합니다.
    • 응답 렌더링 템플릿 파일의 경로로 업데이트합니다 apiResponseRenderingTemplateFile .
    • 의 validDomains 값을 OpenAPI 설명 파일에 정의된 엔드포인트로 service URL 업데이트합니다.

  4. OpenAPI 설명 문서와 응답 렌더링 템플릿을 저장한 폴더에 Teams 앱 매니페스트를 저장합니다.

    • 컬러 이미지와 윤곽선 이미지가 필요합니다. 이러한 이미지는 폴더에 포함되고 Teams 앱 매니페스트에서 참조되어야 합니다.

    • 폴더의 내용을 압축합니다. zip 파일에는 다음 파일이 포함되어야 합니다.

      • OpenAPI 설명 문서
      • 응답 렌더링 템플릿
      • 앱 매니페스트
      • 색 아이콘
      • 개요 아이콘

Teams에 사용자 지정 앱 업로드

Teams 테스트 환경에 로그인하여 Teams에서 앱을 테스트합니다. Teams에서 사용자 지정 앱을 업로드하려면 다음 단계를 따르세요.

  1. Microsoft Teams로 이동하고 테스트 테넌트 자격 증명을 사용하여 로그인합니다.

  2. 앱, 앱>> 관리, 앱 업로드로 이동합니다.

  3. 사용자 지정된 앱 업로드를 선택합니다.

  4. 생성된 zip 파일을 선택하고 열기를 선택합니다.

  5. 추가를 선택하세요.

    추가 옵션이 강조 표시된 메시지 확장 앱의 스크린샷

  6. 열기를 선택합니다.

    열기 옵션이 강조 표시된 메시지 확장 앱의 스크린샷

  7. 채팅으로 이동한 다음, 메시지 작성 영역에서 선택하고 + 앱을 검색합니다.

  8. 앱을 선택하고 검색 쿼리를 만듭니다.

    스크린샷은 채팅 메뉴의 더하기 아이콘에서 사용자가 플라이아웃 메뉴에 표시된 메시지 확장 앱을 호출할 수 있음을 보여줍니다.

  9. 앱은 채팅 창에서 적응형 카드로 응답합니다.

  10. 보내기를 선택합니다.

    스크린샷은 Teams의 채팅 메시지에서 검색 결과가 있는 적응형 카드를 보여줍니다.

축하합니다! 성공하셨군요! OpenAPI 설명 문서를 사용하여 API 기반 메시지 확장을 만드는 방법을 배웠습니다.

API 기반 메시지 확장 만들기

맨 위로 이동

작업 기반 메시지 확장 빌드

Teams 작업 기반 메시지 확장을 사용하면 사용자가 Microsoft Teams 클라이언트에서 웹 서비스와 상호 작용할 수 있습니다. 메시지 확장을 사용하면 외부 시스템에서 메시지 작성 영역, 명령 상자 또는 메시지에서 직접 작업을 시작할 수 있습니다.


자습서: 작업 기반 메시지 확장 빌드

동작 기반 메시지 확장의 주요 기능:

  • 정보를 수집하거나 표시할 수 있는 모달 팝업을 사용자에게 제공합니다.
  • 메시지 작성 영역, 명령 상자 또는 메시지에서 작업 명령을 트리거합니다.

이 단계별 가이드는 메시지 작성 및 메시지 영역에서 작업을 시작하는 Teams 작업 기반 메시지 확장을 빌드하는 데 도움이 됩니다. 이 자습서를 마치면 다음과 같은 출력을 얻을 수 있습니다.

단계별 가이드를 성공적으로 완료한 후의 메시지 확장 출력 스크린샷.

필수 구성 요소

다음 도구를 설치하고 개발 환경을 설정해야 합니다.

  설치 사용...
  Microsoft Teams Microsoft Teams는 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 모든 사람과 한 곳에서 공동 작업할 수 있습니다.
  Visual Studio 2022 Visual Studio 2022에 엔터프라이즈 버전을 설치하고 ASP.NET 및 웹 개발 워크로드를 설치할 수 있습니다. 최신 버전을 사용합니다.
  .NET Core SDK 로컬 디버깅 및 Azure Functions 앱 배포를 위한 사용자 지정된 바인딩입니다. 최신 버전을 설치하지 않은 경우 휴대용 버전을 설치합니다.
  개발자 터널 Teams 앱 기능(대화형 봇, 메시지 확장 및 들어오는 웹후크)에는 인바운드 연결이 필요합니다. 터널을 통해 개발 시스템을 Teams에 연결할 수 있습니다. 개발자 터널은 로컬 호스트를 인터넷에 안전하게 열고 액세스 권한을 가진 사용자를 제어하는 강력한 도구입니다. 개발자 터널은 Visual Studio 2022 버전 17.7.0 이상에서 사용할 수 있습니다.
또는
ngrok 를 터널로 사용하여 개발 시스템을 Teams에 연결할 수도 있습니다. 탭만 포함하는 앱에는 필요하지 않습니다. 이 패키지는 프로젝트 디렉터리 내에 설치됩니다(npm devDependencies사용).

참고

ngrok를 다운로드한 후 등록하고 authtoken을 설치합니다.

로컬 환경 설정

  1. Microsoft-Teams-Samples를 엽니다.

  2. 코드를 선택합니다.

  3. 드롭다운 메뉴에서 GitHub Desktop으로 열기를 선택합니다.

    스크린샷은 로컬에서 리포지토리를 복제하는 옵션을 보여줍니다.

  4. 복제 를 선택합니다.

Microsoft Entra 앱 등록

다음 단계는 Azure Portal에서 봇을 만들고 등록하는 데 도움이 됩니다.

  • Azure 앱을 만들고 등록합니다.
  • 봇의 SSO 인증을 사용하도록 설정하는 클라이언트 암호를 만듭니다.
  • 봇을 배포할 Teams 채널을 추가합니다.
  • dev tunnel(권장) 또는 ngrok를 사용하여 웹 서버의 엔드포인트에 대한 터널을 만듭니다.
  • 만든 개발 터널에 메시징 엔드포인트를 추가합니다.

앱 등록 추가

  1. Azure Portal로 이동합니다.

  2. 앱 등록을 선택합니다.

    스크린샷은 앱 등록을 선택하는 Azure 서비스를 보여줍니다.

  3. + 새 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터의 새 등록 페이지를 보여줍니다.

  4. 앱의 이름을 입력합니다.

  5. 모든 조직 디렉터리에서 계정을 선택합니다(모든 Microsoft Entra ID 테넌트 - 다중 테넌트).

  6. 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터에서 봇을 등록하는 옵션을 보여줍니다.

    앱이 Microsoft Entra ID에 등록되었습니다. 앱 개요 페이지가 나타납니다.

    스크린샷은 앱 등록 개요 페이지를 보여줍니다.

    참고

    나중에 사용할 수 있도록 애플리케이션(클라이언트) ID 및 디렉터리(테넌트) ID 에서 앱 ID를 저장합니다.

터널 만들기

다음 두 가지 방법 중 하나에 따라 터널을 생성합니다.

  1. Visual Studio를 엽니다.

  2. 새 프로젝트 만들기를 선택합니다.

    스크린샷은 새 프로젝트를 만들기 위한 선택 영역을 보여 줍니다.

  3. 검색 상자에 ASP.NET 를 입력합니다. 검색 결과에서 ASP.NET Core 웹앱을 선택합니다.

  4. 다음을 선택합니다.

    스크린샷은 템플릿의 검색 및 선택을 보여줍니다.

  5. 프로젝트 이름을 입력하고 다음을 선택합니다.

    입력할 프로젝트 이름을 보여 주는 스크린샷

  6. 만들기를 선택합니다.

    스크린샷은 프로젝트 추가 정보를 보여줍니다.

    개요 창이 나타납니다.

    스크린샷은 개요 창을 보여줍니다.

  7. 디버그 드롭다운 목록에서 개발자 터널(활성 터널 없음)터널 만들기...를> 선택합니다.

    스크린샷은 개발 터널을 선택하는 드롭다운을 보여줍니다.

    팝업 창이 나타납니다.

  8. 팝업 창에서 다음 세부 정보를 업데이트합니다.

    1. 계정: Microsoft 또는 GitHub 계정을 입력합니다.
    2. 이름: 터널의 이름을 입력합니다.
    3. 터널 유형: 드롭다운 목록에서 임시를 선택합니다.
    4. 액세스: 드롭다운 목록에서 퍼블릭을 선택합니다.

  9. 확인을 선택합니다.

    터널 생성을 위해 업데이트할 세부 정보를 보여주는 스크린샷입니다.

    개발자 터널이 성공적으로 만들어졌음을 보여주는 팝업 창이 나타납니다.

  10. 확인을 선택합니다.

    터널이 생성되었다는 팝업 메시지를 보여주는 스크린샷.

    다음과 같이 디버그 드롭다운 목록에서 생성한 터널을 찾을 수 있습니다.

    스크린샷은 터널이 활성 상태이고 선택되어 있음을 보여줍니다.

  11. F5를 선택하여 디버그 모드에서 응용 프로그램을 실행합니다.

  12. 보안 경고 대화 상자가 나타나면 예를 선택합니다.

    스크린샷은 보안 경고를 수락하는 대화 상자를 보여줍니다.

    팝업 창이 나타납니다.

  13. 계속을 선택합니다.

    스크린샷은 터널의 URL을 보여줍니다.

    개발자 터널 홈페이지가 새 브라우저 창에서 열리고 개발자 터널이 활성 상태입니다.

    브라우저의 개발자 터널 시작 페이지를 보여 주는 스크린샷

  14. Visual Studio로 이동하여 출력 보기 > 를 선택합니다.

  15. 출력 콘솔 드롭다운 메뉴에서 개발자 터널을 선택합니다.

    출력 콘솔에 개발 터널 URL이 표시됩니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

웹 인증 추가

  1. 왼쪽 창의 관리 아래에서 인증을 선택합니다.

  2. 플랫폼 >웹 추가를선택합니다.

    스크린샷은 웹 인증 선택을 보여줍니다.

  3. 정규화된 도메인 이름에 추가 auth-end 하여 앱의 리디렉션 URI를 입력합니다. 예를 들면 https://your-devtunnel-domain/auth-end 또는 https://your-ngrok-domain/auth-end.

  4. 암시적 권한 부여 및 하이브리드 흐름에서 액세스 토큰 및 ID 토큰 확인란을 선택합니다.

  5. 구성을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션을 보여줍니다.

  6. 웹에서 URI 추가를 선택합니다.

  7. Enter .https://token.botframework.com/.auth/web/redirect

  8. 저장을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션을 보여줍니다.

클라이언트 암호 만들기

참고

클라이언트 비밀이 테넌트 전체 정책에 의해 차단됨 오류가 발생하는 경우. 자세한 내용은 테넌트 관리자에게 문의하세요. 대신 인증서를 만들 수 있습니다. 단계별 지침은 앱 등록용 인증서 만들기를 참조하세요.

  1. 왼쪽 창의 관리에서 인증서 & 비밀을 선택합니다.

  2. 클라이언트 암호에서+ 새 클라이언트 암호를 선택합니다.

    스크린샷은 새 클라이언트 암호의 선택을 보여줍니다.

    Add a client secret(클라이언트 암호 추가) 창이 나타납니다.

  3. 설명을 입력합니다.

  4. 추가를 선택하세요.

    스크린샷은 추가할 클라이언트 암호 설명 옵션을 보여줍니다.

  5. 값에서클립보드에 복사를 선택하여 나중에 사용할 수 있도록 클라이언트 암호 값을 저장합니다.

    스크린샷은 클라이언트 암호 ID 값을 복사하여 값을 클립보드에 복사하는 옵션을 보여줍니다.

API 권한 추가

  1. 왼쪽 창에서 API 권한을 선택합니다.

  2. + 권한 추가를 선택합니다.

    스크린샷은 권한 추가를 선택하는 옵션을 보여줍니다.

  3. Microsoft Graph를 선택합니다.

  4. 위임된 권한을 선택합니다.

  5. 사용자>User.Read를 선택합니다.

  6. 사용 권한 추가를 선택합니다.

    스크린샷은 사용 권한을 선택하는 옵션을 보여줍니다.

    참고

    • 앱에 IT 관리자 동의가 부여되지 않은 경우 사용자는 앱을 처음 사용할 때 동의를 제공해야 합니다.
    • 사용자는 Microsoft Entra 앱이 다른 테넌트에 등록된 경우에만 API 권한에 동의해야 합니다.

애플리케이션 ID URI 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. 애플리케이션 ID URI 옆에 있는 추가를 선택합니다.

    스크린샷은 앱에 대한 애플리케이션 ID URI를 추가하는 옵션을 보여줍니다.

  3. 애플리케이션 ID URI를 api://botid-{AppID} 형식으로 업데이트하고 저장을 선택합니다.

    스크린샷은 앱 ID URI를 추가하고 저장하는 옵션을 보여줍니다.

scope 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. + scope 추가를 선택합니다.

    스크린샷은 범위를 추가하기 위한 선택 항목을 보여 줍니다.

  3. 범위 이름으로 access_as_user를 입력합니다.

  4. 누가 동의할 수 있나요?에서관리자 및 사용자를 선택합니다.

  5. 나머지 필드의 값을 다음과 같이 업데이트합니다.

    • 입력 Teams는 관리 동의 표시 이름으로 사용자 프로필에 액세스할 수 있습니다.

    • Enter Teams가 관리 동의 설명으로 현재 사용자로 앱의 웹 API를 호출할 수 있도록 허용합니다.

    • 입력 Teams 사용자 프로필에 액세스하고 사용자동의 표시 이름으로 사용자 대신 요청할 수 있습니다.

    • Teams 가 사용자와 동일한 권한으로 이 앱의 API를 호출하도록 허용을 사용자 동의 설명과 입력합니다.

  6. 상태가 사용으로 설정되어 있는지 확인합니다.

  7. Add scope를 선택합니다.

    다음 이미지는 필드와 값을 보여 줍니다.

    스크린샷은 Add a scope 필드에 입력된 값을 보여 줍니다.

    참고

    범위 이름은 끝에 추가되는 애플리케이션 ID URI /access_as_user 와 일치해야 합니다.

    스크린샷은 범위의 세부 정보를 보여줍니다.

클라이언트 애플리케이션 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

    승인된 클라이언트 애플리케이션에서 앱의 웹 애플리케이션에 대해 권한을 부여할 애플리케이션을 식별합니다.

  2. + 클라이언트 애플리케이션 추가를 선택합니다.

    스크린샷은 클라이언트 애플리케이션 선택 옵션을 보여줍니다.

  3. Teams 모바일 또는 데스크톱 및 Teams 웹 응용 프로그램을 추가합니다.

    1. Teams 모바일 또는 데스크톱의 경우: 클라이언트 ID를 다음으로 입력합니다.1fec8e78-bce4-4aaf-ab1b-5451cc387264

      스크린샷은 모바일 또는 데스크톱 클라이언트 ID 애플리케이션을 보여줍니다.

    2. Teams 웹의 경우: 클라이언트 ID를 다음으로 입력합니다.5e3ce6c0-2b1f-4285-8d4b-75ee78787346

      스크린샷은 웹 클라이언트 ID 애플리케이션을 보여줍니다.

  4. 승인된 범위 확인란을 선택합니다.

  5. 애플리케이션 추가를 선택합니다.

    스크린샷은 승인된 범위를 선택하고 응용 프로그램을 추가하는 옵션을 보여 줍니다.

    다음 이미지에는 클라이언트 ID가 표시됩니다.

    스크린샷은 클라이언트 애플리케이션의 출력을 보여줍니다.

봇 만들기

Azure 봇 리소스 만들기

참고

이미 Teams에서 봇을 테스트하고 있는 경우 이 앱과 Teams에서 로그아웃합니다. 이 변경 내용을 보려면 다시 로그인하세요.

  1. 홈으로 이동합니다.

  2. + 리소스 만들기를 선택합니다.

  3. 검색 상자에 Azure Bot을 입력합니다.

  4. Enter 키를 선택합니다.

  5. Azure 봇을 선택합니다.

  6. 만들기를 선택합니다.

    스크린샷은 Azure 봇을 만드는 방법을 보여 줍니다.

  7. 봇 핸들에 봇 이름을 입력합니다.

  8. 드롭다운 목록에서 구독 을 선택합니다.

  9. 드롭다운 목록에서 리소스 그룹을 선택합니다.

    스크린샷은 Azure Portal의 리소스 그룹 및 구독 옵션을 보여 줍니다.

    기존 리소스 그룹이 없는 경우 새 리소스 그룹을 만들 수 있습니다. 새 리소스 그룹을 만들려면 다음 단계를 수행합니다.

    1. 새로 만들기를 선택합니다.
    2. 리소스 이름을 입력하고 확인을 선택합니다.
    3. 새 리소스 그룹 위치 드롭다운 목록에서 위치를 선택합니다.

    스크린샷은 Azure Portal의 새 리소스 그룹 옵션을 보여줍니다.

  10. 가격 책정에서플랜 변경을 선택합니다.

    스크린샷은 Azure Portal의 가격 책정 옵션을 보여줍니다.

  11. FO 무료>선택을 선택합니다.

    스크린샷은 무료 선택 옵션을 보여줍니다.

  12. Microsoft 앱 ID에서 앱 유형을다중 테넌트로 선택합니다.

  13. 만들기 유형에서 기존 앱 등록 사용을 선택합니다.

  14. 앱 ID를 입력합니다.

    참고

    동일한 Microsoft 앱 ID를 사용하여 봇을 두 개 이상 만들 수 없습니다.

  15. 검토 + 만들기를 선택합니다.

    스크린샷은 새 봇을 만드는 방법을 보여 줍니다.

  16. 유효성 검사가 통과되면 만들기를 선택합니다.

    봇을 프로비전하는 데 몇 분 정도 걸립니다.

  17. 리소스로 이동을 선택합니다.

    스크린샷은 Azure Portal의 리소스로 이동 옵션을 보여줍니다.

    Azure 봇을 만들었습니다.

    봇의 출력을 보여 주는 스크린샷

Teams 채널 추가

  1. 왼쪽 창에서 채널을 선택합니다.

  2. 사용 가능한 채널에서Microsoft Teams를 선택합니다.

    스크린샷은 채널의 Teams 선택을 보여줍니다.

  3. 확인란을 선택하여 서비스 약관에 동의합니다.

  4. 동의를 선택합니다.

    스크린샷은 서비스 약관의 동의를 보여줍니다.

  5. 적용을 선택합니다.

    스크린샷은 적용할 메시지로 Microsoft Teams를 보여줍니다.

메시징 엔드포인트 추가

다음 방법 중 하나를 사용하여 메시징 엔드포인트를 추가합니다.

  1. 출력 콘솔에서 개발 터널 URL을 메시징 끝점으로 사용합니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

  2. 왼쪽 창의 설정에서 구성을 선택합니다.

  3. 메 시징 엔드포인트 를 형식으로 업데이트합니다 https://your-devtunnel-domain/api/messages.

    스크린샷은 api를 추가하는 메시징 엔드포인트를 보여줍니다.

  4. 적용을 선택합니다.

    Azure Bot Service에서 봇을 성공적으로 설정했습니다.

    참고

    Application Insights 계측 키에 오류가 표시되면 앱 ID로 업데이트합니다.

앱 설정 및 매니페스트 파일 설정

  1. 복제된 리포지토리의 appsettings.json 파일로 이동합니다.

    스크린샷은 appsettings json 파일의 위치를 보여줍니다.

  2. appsettings.json 파일을 열고 다음 정보를 업데이트합니다.

    • 봇의 Microsoft 앱 ID로 설정합니다"MicrosoftAppId".
    • 봇의 클라이언트 암호 ID 값으로 설정합니다"MicrosoftAppPassword".
    • OAuth 연결 이름으로 설정합니다 ConnectionName .
    • 다중 테넌트로 설정합니다"MicrosoftAppType".
    • 일반으로 설정합니다"MicrosoftAppTenantId".

    스크린샷은 appsettings json을 보여줍니다.

  3. 복제된 리포지토리의 manifest.json 파일로 이동합니다.

    스크린샷은 매니페스트 json 파일의 선택을 보여줍니다.

  4. manifest.json 파일을 열고 다음 변경 내용을 업데이트합니다.

    • 모든 "{TODO: MicrosoftAppId}" 항목을 Microsoft 앱 ID로 바꿉니다.
    • ngrok 또는 dev tunnel 도메인으로 설정합니다 "<<domain-name>>" .

    스크린샷은 Visual Studio의 매니페스트 파일에 채워진 세부 정보를 보여줍니다.

서비스 빌드 및 실행

서비스를 빌드하고 실행하려면 Visual Studio 또는 명령줄을 사용합니다.

  1. Visual Studio를 엽니다.

  2. 파일>로 이동프로젝트/솔루션열기>.....

    프로젝트/솔루션이 빨간색으로 강조 표시된 Visual Studio의 스크린샷

  3. csharp 폴더에서 TeamsMessagingExtensionsAction.csproj 파일을 선택합니다.

    TeamsMessagingExtensionsAction.csproj가 빨간색으로 강조 표시된 복제된 리포지토리의 스크린샷

  4. F5 키를 눌러 프로젝트를 실행합니다.

  5. 다음 대화 상자가 나타나면 예를 선택합니다.

    스크린샷은 예 옵션이 빨간색으로 강조 표시된 보안 경고를 보여줍니다.

    봇이 준비되었습니다!라는 메시지가 포함된 웹 페이지가 나타납니다.

    봇이 준비되었습니다!를 표시하는 웹 페이지의 스크린샷.

Teams에 작업 메시지 확장 앱 추가

  1. 복제된 리포지토리에서 샘플>msgext-action>csharp>TeamsAppManifest로 이동합니다.

  2. Manifest 폴더에 있는 다음 파일로 .zip을 만듭니다.

    • manifest.json
    • icon-outline.png
    • icon-color.png

    메시징 확장 zip 파일이 빨간색으로 강조 표시된 복제된 리포지토리의 스크린샷

  3. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  4. 앱 관리를 선택합니다.

  5. 앱 업로드를 선택합니다.

  6. 사용자 지정 앱을 업로드하는 옵션을 찾습니다. 옵션이 표시되면 사용자 지정 앱 업로드가 사용하도록 설정됩니다.

    스크린샷은 사용자 지정 앱 업로드를 보여 줍니다.

    참고

    사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

  7. 열기를 선택하여 TeamsAppManifest 폴더에 만든 messaging.zip 파일을 업로드합니다.

    메시징 zip 파일을 표시하는 복제된 리포지토리의 스크린샷.

  8. 추가를 선택하세요.

    메시지 확장 앱을 추가하는 앱 세부 정보 대화 상자의 스크린샷.

  9. 열기를 선택하여 개인 scope에서 앱을 엽니다.

    또는 필요한 scope를 검색하여 선택하거나 목록에서 채널, 채팅 또는 모임을 선택한 다음 대화 상자를 이동하여 이동을 선택할 수 있습니다.

    필요한 scope 선택을 위한 scope 선택 대화 상자의 스크린샷.

Teams에서 앱과 상호 작용

  1. 작성 상자 명령 목록에서 카드 만들기 명령을 선택합니다.

    카드 만들기가 빨간색으로 강조 표시된 메시지 작성 상자 오버플로 메뉴의 스크린샷

  2. 모달 팝업 창에 정보를 입력합니다.

    스크린샷은 작업 메시징 확장의 카드 만들기 모델 팝업을 보여줍니다.

  3. 전송을 선택합니다.

    제출 옵션이 빨간색으로 강조 표시된 카드 만들기 모델 팝업 스크린샷.

  4. 오버플로 메뉴에서 추가 옵션(...)을 선택합니다.

  5. 추가 작업> 메시지공유를 선택합니다.

    스크린샷은 메시지 오버플로 메뉴를 보여 줍니다. 메시지 공유 및 기타 작업이 빨간색으로 강조 표시됩니다.

  6. 이미지를 포함하려면 영웅 카드에 이미지 포함 확인란을 선택한 다음 제출을 선택합니다.

    영웅 카드에 이미지 포함 확인란과 제출 옵션이 빨간색으로 강조 표시된 Action Messaging Extension의 스크린샷.

챌린지 완료

이런 생각이 나셨나요?

단계별 가이드를 성공적으로 완료한 후 메시지 확장 출력의 스크린샷.

작업 메시지 확장 앱을 시작하기 위한 자습서를 완료했습니다!

작업 명령

맨 위로 이동

SSO 인증을 사용하여 봇 빌드

Microsoft Teams의 대화형 봇은 고객 서비스와 같이 사용자가 시작한 반복적인 자동화 작업을 수행합니다. 사용자가 SSO(Single Sign-On) 인증 없이 여러 번 로그인해야 합니다. SSO 인증 방법을 사용하면 사용자가 봇에 여러 번 로그인할 필요가 없습니다.


자습서: SSO 인증을 사용하여 봇 빌드

봇은 관련된 대화에 따라 다르게 동작합니다.

  • 채널 및 그룹 채팅 대화에서 봇을 사용하려면 사용자가 봇에 있어야 합니다 @mention .
  • 일대일 대화의 봇에는 @mention. 사용자가 보낸 모든 메시지는 봇으로 라우팅됩니다.

이 단계별 가이드는 SSO 인증을 사용하여 봇을 빌드하는 데 도움이 됩니다. 다음 출력이 표시됩니다.

단계별 가이드를 성공적으로 완료한 후 SSO 인증 출력이 있는 봇의 스크린샷.

봇 빌드를 위한 필수 구성 요소

다음 도구를 설치하고 개발 환경을 설정해야 합니다.

설치 사용...
Microsoft Teams Microsoft Teams는 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 모든 사람들과 한 곳에서 공동 작업할 수 있습니다.
Visual Studio 2022 Visual Studio 2022에 엔터프라이즈 버전을 설치하고 ASP.NET 및 웹 개발 워크로드를 설치할 수 있습니다. 최신 버전을 사용합니다.
Microsoft 365 개발자 계정 앱을 설치할 수 있는 적절한 권한이 있는 Teams 계정에 액세스합니다.
개발자 터널 Teams 앱 기능(대화형 봇, 메시지 확장 및 들어오는 웹후크)에는 인바운드 연결이 필요합니다. 터널을 통해 개발 시스템을 Teams에 연결할 수 있습니다. 개발자 터널은 로컬 호스트를 인터넷에 안전하게 열고 액세스 권한을 가진 사용자를 제어하는 강력한 도구입니다. 개발자 터널은 Visual Studio 2022 버전 17.7.0 이상에서 사용할 수 있습니다.
또는
ngrok 를 터널로 사용하여 개발 시스템을 Teams에 연결할 수도 있습니다. 탭만 포함하는 앱에는 필요하지 않습니다. 이 패키지는 프로젝트 디렉터리 내에 설치됩니다(npm devDependencies사용).

참고

ngrok를 다운로드한 후 등록하고 authtoken을 설치합니다.

Teams 개발 테넌트 설정

테넌트는 Teams에서 채팅하고, 파일을 공유하고, organization 모임을 실행하는 공간 또는 컨테이너와 같습니다. 사용자 지정 앱을 업로드하고 테스트할 수도 있습니다.

사용자 지정 앱 업로드 옵션 확인

앱을 만든 후에는 배포하지 않고 Teams에 앱을 로드해야 합니다. 이 프로세스를 사용자 지정 앱 업로드라고 합니다. 이 옵션을 보려면 Microsoft 365 계정에 로그인하세요.

참고

Teams 로컬 환경에서 앱을 미리 보고 테스트하려면 사용자 지정 앱 업로드가 필요합니다. 앱 업로드를 사용하여 Teams에서 로컬로 앱을 미리 보고 테스트합니다.

테넌트가 이미 있고 관리자 액세스 권한이 있나요? 정말 그렇은지 검사해 봅시다!

Teams에서 사용자 지정 업로드 앱을 확인하려면 다음을 수행합니다.

  1. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드 선택

  4. 사용자 지정 앱 업로드 옵션을 찾습니다. 옵션이 표시되면 사용자 지정 앱 업로드가 사용하도록 설정됩니다.

    Teams 앱, 앱 관리, 앱 업로드 및 사용자 지정 앱 업로드가 빨간색으로 강조 표시된 스크린샷

참고

사용자 지정 앱을 업로드할 수 있는 옵션이 없는 경우 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기

Teams 개발자 계정이 없는 경우 무료로 받을 수 있습니다. Microsoft 365 개발자 프로그램에 참여하세요!

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 표시됩니다.

    Microsoft 365 개발자 프로그램 구독의 스크린샷.

  5. 방금 설정한 새 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

로컬 환경 설정

리포지토리를 복제하려면 다음 단계를 따르세요.

  1. Microsoft-Teams-Samples를 엽니다.

  2. 코드를 선택합니다.

  3. 드롭다운 메뉴에서 GitHub Desktop으로 열기를 선택합니다.

    스크린샷은 로컬에서 리포지토리를 복제하는 옵션을 보여줍니다.

  4. 복제 를 선택합니다.

Microsoft Entra 앱 등록

다음 단계는 Azure Portal에서 봇을 만들고 등록하는 데 도움이 됩니다.

  • Azure 앱을 만들고 등록합니다.
  • 봇의 SSO 인증을 사용하도록 설정하는 클라이언트 암호를 만듭니다.
  • 봇을 배포할 Teams 채널을 추가합니다.
  • dev tunnel(권장) 또는 ngrok를 사용하여 웹 서버의 엔드포인트에 대한 터널을 만듭니다.
  • 만든 개발 터널에 메시징 엔드포인트를 추가합니다.

앱 등록 추가

  1. Azure Portal로 이동합니다.

  2. 앱 등록을 선택합니다.

    스크린샷은 앱 등록을 선택하는 Azure 서비스를 보여줍니다.

  3. + 새 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터의 새 등록 페이지를 보여줍니다.

  4. 앱의 이름을 입력합니다.

  5. 필요에 따라 테넌트 옵션을 선택합니다.

  6. 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터에서 봇을 등록하는 옵션을 보여줍니다.

    앱이 Microsoft Entra ID에 등록되었습니다. 앱 개요 페이지가 나타납니다.

    스크린샷은 앱 등록 개요 페이지를 보여줍니다.

    참고

    나중에 사용할 수 있도록 애플리케이션(클라이언트) ID 및 디렉터리(테넌트) ID 에서 앱 ID를 저장합니다.

터널 만들기

다음 두 가지 방법 중 하나에 따라 터널을 생성합니다.

  1. Visual Studio를 엽니다.

  2. 새 프로젝트 만들기를 선택합니다.

    스크린샷은 새 프로젝트를 만들기 위한 선택 영역을 보여 줍니다.

  3. 검색 상자에 ASP.NET 를 입력합니다. 검색 결과에서 ASP.NET Core 웹앱을 선택합니다.

  4. 다음을 선택합니다.

    스크린샷은 템플릿의 검색 및 선택을 보여줍니다.

  5. 프로젝트 이름을 입력하고 다음을 선택합니다.

    입력할 프로젝트 이름을 보여 주는 스크린샷

  6. 만들기를 선택합니다.

    스크린샷은 프로젝트 추가 정보를 보여줍니다.

    개요 창이 나타납니다.

    스크린샷은 개요 창을 보여줍니다.

  7. 디버그 드롭다운 목록에서 개발자 터널(활성 터널 없음)터널 만들기...를> 선택합니다.

    스크린샷은 개발 터널을 선택하는 드롭다운을 보여줍니다.

    팝업 창이 나타납니다.

  8. 팝업 창에서 다음 세부 정보를 업데이트합니다.

    1. 계정: Microsoft 또는 GitHub 계정을 입력합니다.
    2. 이름: 터널의 이름을 입력합니다.
    3. 터널 유형: 드롭다운 목록에서 임시를 선택합니다.
    4. 액세스: 드롭다운 목록에서 퍼블릭을 선택합니다.

  9. 확인을 선택합니다.

    터널 생성을 위해 업데이트할 세부 정보를 보여주는 스크린샷입니다.

    개발자 터널이 성공적으로 만들어졌음을 보여주는 팝업 창이 나타납니다.

  10. 확인을 선택합니다.

    터널이 생성되었다는 팝업 메시지를 보여주는 스크린샷.

    다음과 같이 디버그 드롭다운 목록에서 생성한 터널을 찾을 수 있습니다.

    스크린샷은 터널이 활성 상태이고 선택되어 있음을 보여줍니다.

  11. F5를 선택하여 디버그 모드에서 응용 프로그램을 실행합니다.

  12. 보안 경고 대화 상자가 나타나면 예를 선택합니다.

    스크린샷은 보안 경고를 수락하는 대화 상자를 보여줍니다.

    팝업 창이 나타납니다.

  13. 계속을 선택합니다.

    스크린샷은 터널의 URL을 보여줍니다.

    개발자 터널 홈페이지가 새 브라우저 창에서 열리고 개발자 터널이 활성 상태입니다.

    브라우저의 개발자 터널 시작 페이지를 보여 주는 스크린샷

  14. Visual Studio로 이동하여 출력 보기 > 를 선택합니다.

  15. 출력 콘솔 드롭다운 메뉴에서 개발자 터널을 선택합니다.

    출력 콘솔에 개발 터널 URL이 표시됩니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

웹 인증 추가

  1. 왼쪽 창의 관리 아래에서 인증을 선택합니다.

  2. 플랫폼 >웹 추가를선택합니다.

    스크린샷은 웹 인증 선택을 보여줍니다.

  3. 정규화된 도메인 이름에 추가 auth-end 하여 앱의 리디렉션 URI를 입력합니다. 예를 들면 https://your-devtunnel-domain/auth-end 또는 https://your-ngrok-domain/auth-end.

  4. 암시적 권한 부여 및 하이브리드 흐름에서 액세스 토큰 및 ID 토큰 확인란을 선택합니다.

  5. 구성을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션을 보여줍니다.

  6. 웹에서 URI 추가를 선택합니다.

  7. Enter .https://token.botframework.com/.auth/web/redirect

  8. 저장을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션을 보여줍니다.

클라이언트 암호 만들기

참고

클라이언트 비밀이 테넌트 전체 정책에 의해 차단됨 오류가 발생하는 경우. 자세한 내용은 테넌트 관리자에게 문의하세요. 대신 인증서를 만들 수 있습니다. 단계별 지침은 앱 등록용 인증서 만들기를 참조하세요.

  1. 왼쪽 창의 관리에서 인증서 & 비밀을 선택합니다.

  2. 클라이언트 암호에서+ 새 클라이언트 암호를 선택합니다.

    스크린샷은 새 클라이언트 암호의 선택을 보여줍니다.

    Add a client secret(클라이언트 암호 추가) 창이 나타납니다.

  3. 설명을 입력합니다.

  4. 추가를 선택하세요.

    스크린샷은 추가할 클라이언트 암호 설명 옵션을 보여줍니다.

  5. 값에서클립보드에 복사를 선택하여 나중에 사용할 수 있도록 클라이언트 암호 값을 저장합니다.

    스크린샷은 클라이언트 암호 ID 값을 복사하여 값을 클립보드에 복사하는 옵션을 보여줍니다.

API 권한 추가

  1. 왼쪽 창에서 API 권한을 선택합니다.

  2. + 권한 추가를 선택합니다.

    스크린샷은 권한 추가를 선택하는 옵션을 보여줍니다.

  3. Microsoft Graph를 선택합니다.

  4. 위임된 권한을 선택합니다.

  5. 사용자>User.Read를 선택합니다.

  6. 사용 권한 추가를 선택합니다.

    스크린샷은 사용 권한을 선택하는 옵션을 보여줍니다.

    참고

    • 앱에 IT 관리자 동의가 부여되지 않은 경우 사용자는 앱을 처음 사용할 때 동의를 제공해야 합니다.
    • 사용자는 Microsoft Entra 앱이 다른 테넌트에 등록된 경우에만 API 권한에 동의해야 합니다.

애플리케이션 ID URI 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. 애플리케이션 ID URI 옆에 있는 추가를 선택합니다.

    스크린샷은 앱에 대한 애플리케이션 ID URI를 추가하는 옵션을 보여줍니다.

  3. 애플리케이션 ID URI를 api://botid-{AppID} 형식으로 업데이트하고 저장을 선택합니다.

    스크린샷은 앱 ID URI를 추가하고 저장하는 옵션을 보여줍니다.

scope 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. + scope 추가를 선택합니다.

    스크린샷은 범위를 추가하기 위한 선택 항목을 보여 줍니다.

  3. 범위 이름으로 access_as_user를 입력합니다.

  4. 누가 동의할 수 있나요?에서관리자 및 사용자를 선택합니다.

  5. 나머지 필드의 값을 다음과 같이 업데이트합니다.

    1. 입력 Teams는 관리 동의 표시 이름으로 사용자 프로필에 액세스할 수 있습니다.

    2. Enter Teams가 관리 동의 설명으로 현재 사용자로 앱의 웹 API를 호출할 수 있도록 허용합니다.

    3. 입력 Teams 사용자 프로필에 액세스하고 사용자동의 표시 이름으로 사용자 대신 요청할 수 있습니다.

    4. Teams 가 사용자와 동일한 권한으로 이 앱의 API를 호출하도록 허용을 사용자 동의 설명과 입력합니다.

  6. 상태가 사용으로 설정되어 있는지 확인합니다.

  7. Add scope를 선택합니다.

    다음 이미지는 필드와 값을 보여 줍니다.

    스크린샷은 Add a scope 필드에 입력된 값을 보여 줍니다.

    참고

    범위 이름은 끝에 추가되는 애플리케이션 ID URI /access_as_user 와 일치해야 합니다.

    스크린샷은 범위의 세부 정보를 보여줍니다.

클라이언트 애플리케이션 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

    승인된 클라이언트 애플리케이션에서 앱의 웹 애플리케이션에 대해 권한을 부여할 애플리케이션을 식별합니다.

  2. + 클라이언트 애플리케이션 추가를 선택합니다.

    스크린샷은 클라이언트 애플리케이션 선택 옵션을 보여줍니다.

  3. Teams 모바일 또는 데스크톱 및 Teams 웹 응용 프로그램을 추가합니다.

    1. Teams 모바일 또는 데스크톱의 경우: 클라이언트 ID를 다음으로 입력합니다.1fec8e78-bce4-4aaf-ab1b-5451cc387264

      스크린샷은 모바일 또는 데스크톱 클라이언트 ID 애플리케이션을 보여줍니다.

    2. Teams 웹의 경우: 클라이언트 ID를 다음으로 입력합니다.5e3ce6c0-2b1f-4285-8d4b-75ee78787346

      스크린샷은 웹 클라이언트 ID 애플리케이션을 보여줍니다.

  4. 승인된 범위 확인란을 선택합니다.

  5. 애플리케이션 추가를 선택합니다.

    스크린샷은 승인된 범위를 선택하고 응용 프로그램을 추가하는 옵션을 보여 줍니다.

    다음 이미지에는 클라이언트 ID가 표시됩니다.

    스크린샷은 클라이언트 애플리케이션의 출력을 보여줍니다.

매니페스트 업데이트

  1. 왼쪽 창에서 매니페스트를 선택합니다.

  2. 받는 사람 2 에 requestedAccessTokenVersion 대한 값을 설정하고 저장을 선택합니다.

    스크린샷은 Azure Portal의 매니페스트 옵션 및 액세스 토큰 세부 정보를 보여줍니다.

봇 만들기

Azure 봇 리소스 만들기

참고

이미 Teams에서 봇을 테스트하고 있는 경우 이 앱과 Teams에서 로그아웃합니다. 이 변경 내용을 보려면 다시 로그인하세요.

  1. 홈으로 이동합니다.

  2. + 리소스 만들기를 선택합니다.

  3. 검색 상자에 Azure Bot을 입력합니다.

  4. Enter 키를 선택합니다.

  5. Azure 봇을 선택합니다.

  6. 만들기를 선택합니다.

    스크린샷은 Azure 봇을 만드는 방법을 보여 줍니다.

  7. 봇 핸들에 봇 이름을 입력합니다.

  8. 드롭다운 목록에서 구독 을 선택합니다.

  9. 드롭다운 목록에서 리소스 그룹을 선택합니다.

    스크린샷은 Azure Portal의 리소스 그룹 및 구독 옵션을 보여 줍니다.

    기존 리소스 그룹이 없는 경우 새 리소스 그룹을 만들 수 있습니다. 새 리소스 그룹을 만들려면 다음 단계를 수행합니다.

    1. 새로 만들기를 선택합니다.
    2. 리소스 이름을 입력하고 확인을 선택합니다.
    3. 새 리소스 그룹 위치 드롭다운 목록에서 위치를 선택합니다.

    스크린샷은 Azure Portal의 새 리소스 그룹 옵션을 보여줍니다.

  10. 가격 책정에서플랜 변경을 선택합니다.

    스크린샷은 Azure Portal의 가격 책정 옵션을 보여줍니다.

  11. FO 무료>선택을 선택합니다.

    스크린샷은 무료 선택 옵션을 보여줍니다.

  12. Microsoft 앱 ID에서 앱 유형을다중 테넌트로 선택합니다.

  13. 만들기 유형에서 기존 앱 등록 사용을 선택합니다.

  14. 앱 ID를 입력합니다.

    참고

    동일한 Microsoft 앱 ID를 사용하여 봇을 두 개 이상 만들 수 없습니다.

  15. 검토 + 만들기를 선택합니다.

    스크린샷은 새 봇을 만드는 방법을 보여 줍니다.

  16. 유효성 검사가 통과되면 만들기를 선택합니다.

    봇을 프로비전하는 데 몇 분 정도 걸립니다.

  17. 리소스로 이동을 선택합니다.

    스크린샷은 Azure Portal의 리소스로 이동 옵션을 보여줍니다.

    Azure 봇을 만들었습니다.

    봇의 출력을 보여 주는 스크린샷

Teams 채널 추가

  1. 왼쪽 창에서 채널을 선택합니다.

  2. 사용 가능한 채널에서Microsoft Teams를 선택합니다.

    스크린샷은 채널의 Teams 선택을 보여줍니다.

  3. 확인란을 선택하여 서비스 약관에 동의합니다.

  4. 동의를 선택합니다.

    스크린샷은 서비스 약관의 동의를 보여줍니다.

  5. 적용을 선택합니다.

    스크린샷은 적용할 메시지로 Microsoft Teams를 보여줍니다.

메시징 엔드포인트 추가

다음 방법 중 하나를 사용하여 메시징 엔드포인트를 추가합니다.

  1. 출력 콘솔에서 개발 터널 URL을 메시징 끝점으로 사용합니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

  2. 왼쪽 창의 설정에서 구성을 선택합니다.

  3. 메 시징 엔드포인트 를 형식으로 업데이트합니다 https://your-devtunnel-domain/api/messages.

    스크린샷은 API를 추가하는 메시징 엔드포인트를 보여줍니다.

  4. 적용을 선택합니다.

    Azure Bot Service에서 봇을 성공적으로 설정했습니다.

    참고

    Application Insights 계측 키에 오류가 표시되면 앱 ID로 업데이트합니다.

OAuth 연결 설정 추가

  1. 왼쪽 창에서 구성을 선택합니다.

  2. OAuth 연결 설정 추가를 선택합니다.

  3. 새 연결 설정에서 다음 세부 정보를 업데이트합니다.

    • 이름: 새 연결 설정의 이름을 입력합니다. 봇 서비스 코드의 설정에서 이름을 사용할 수 있습니다.
    • 서비스 공급자: 드롭다운 목록에서 Azure Active Directory v2를 선택합니다.
    • 클라이언트 ID: Microsoft 앱 ID를 업데이트합니다.
    • 클라이언트 암호: 클라이언트 암호 값을 업데이트합니다.
    • 토큰 교환 URL: 애플리케이션 ID URI를 업데이트합니다.
    • 테넌트 ID: 공통을 입력합니다.
    • 범위: User.Read를 입력합니다.

  4. 저장을 선택합니다.

    OAuth 연결을 설정하기 위해 추가된 값을 보여 주는 스크린샷.

앱 설정 및 매니페스트 파일 설정

  1. 복제된 리포지토리의 appsettings.json 파일로 이동합니다.

    스크린샷은 appsettings json 파일의 위치를 보여줍니다.

  2. appsettings.json 파일을 열고 다음 정보를 업데이트합니다.

    • 봇의 Microsoft 앱 ID로 설정합니다"MicrosoftAppId".
    • 봇의 클라이언트 암호 ID 값으로 설정합니다"MicrosoftAppPassword".
    • OAuth 연결 이름으로 설정합니다 ConnectionName .
    • 다중 테넌트로 설정합니다"MicrosoftAppType".
    • 일반으로 설정합니다"MicrosoftAppTenantId".

    스크린샷은 appsettings json을 보여줍니다.

  3. 복제된 리포지토리의 manifest.json 파일로 이동합니다.

    스크린샷은 매니페스트 json 파일의 선택을 보여줍니다.

  4. manifest.json 파일을 열고 다음 변경 내용을 업데이트합니다.

    • 모든 "{TODO: MicrosoftAppId}" 항목을 Microsoft 앱 ID로 바꿉니다.
    • ngrok 또는 dev tunnel 도메인으로 설정합니다 "<<domain-name>>" .

    스크린샷은 Visual Studio의 매니페스트 파일에 채워진 세부 정보를 보여줍니다.

서비스 빌드 및 실행

  1. Visual Studio를 엽니다.

  2. 파일>로 이동프로젝트/솔루션열기>....

    Visual Studio 파일 메뉴의 스크린샷. 파일 메뉴 아래의 열기와 열기 아래의 프로젝트/솔루션이라는 메뉴 항목이 빨간색으로 강조 표시됩니다.

  3. bot-conversation-sso-quickstart>csharp_dotnetcore 폴더에서 파일을 선택합니다BotConversationSsoQuickstart.sln.

    파일 경로 및 BotSSOCSharp.csproj 파일이 빨간색으로 강조 표시된 프로젝트 파일의 스크린샷

  4. F5를 선택하여 프로젝트를 실행합니다.

  5. 보안 경고 대화 상자가 나타나면 예를 선택합니다.

    예 옵션이 빨간색으로 강조 표시된 보안 경고의 스크린샷

    다음 메시지와 함께 웹 페이지가 열립니다 . 봇이 준비되었습니다!.

    참고

    이 페이지는 localhost URL로 이동할 때만 나타납니다.

    봇이 준비되었습니다를 표시하는 웹 페이지의 스크린샷.

    문제 해결

    패키지를 찾을 수 없음 오류가 나타나면 다음 단계를 수행합니다.

    1. 도구,>NuGet, 패키지 관리자>, 패키지 관리자, 설정으로 이동합니다.
    2. 표시되는 옵션 창에서 NuGet 패키지 관리자>패키지 소스를 선택합니다.
    3. 추가를 선택하세요.
    4. 이름에 를 입력 nuget.org 하고 소스에 를 입력합니다https://api.nuget.org/v3/index.json.
    5. 업데이트 및 확인을 선택합니다.
    6. 프로젝트를 다시 빌드합니다.

Teams에서 봇 업로드

  1. 복제된 리포지토리에서 Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart>csharp_dotnetcore>TeamsApp>appPackage로 이동합니다.

  2. appPackage 폴더에 있는 다음 파일을 사용하여 .zip 파일을 만듭니다.

    • manifest.json
    • outline.png
    • color.png

    Teams Bot zip 폴더가 빨간색으로 강조 표시된 Manifest 폴더의 스크린샷

  3. Microsoft Teams로 이동합니다.

    1. Teams 클라이언트에서 앱을 선택합니다.
    2. 앱 관리를 선택합니다.
    3. 앱 업로드를 선택합니다.
    4. 사용자 지정 앱을 업로드하는 옵션을 찾습니다.

    앱 아이콘, 앱 관리, 사용자 지정 앱 업로드 옵션이 빨간색으로 강조 표시된 Teams 앱의 스크린샷

  4. 열기를 선택하여 매니페스트 폴더에 만든 .zip 파일을 업로드합니다.

    Teams Bot zip 파일을 업로드하는 열기 옵션이 있는 매니페스트 폴더의 스크린샷이 빨간색으로 강조 표시되어 있습니다.

  5. 추가를 선택하여 채팅에 봇을 추가합니다.

    추가 옵션이 강조 표시된 대화 봇의 스크린샷

  6. 열기를 선택합니다.

    열기 옵션이 강조 표시된 scope 선택 대화 상자의 스크린샷입니다.

    봇에 메시지를 보내 상호 작용할 수 있습니다. 봇은 SSO 토큰을 교환하고 사용자 대신 Graph API를 호출합니다. 로그아웃 메시지를 보내지 않는 한 로그인 상태를 유지합니다.

  7. 봇에 메시지를 보냅니다. 대화 봇이 처음으로 동의를 요청합니다.

  8. 데스크톱: 계속을 선택하여 Teams 클라이언트에 봇에 액세스할 수 있는 권한을 부여합니다.

    계속 옵션이 빨간색으로 강조 표시된 추가 권한의 스크린샷

    참고

    이제 봇 앱으로 SSO를 구성했으며 이번이 동의를 제공해야 하는 유일한 시간입니다.

  9. 모바일의 경우: 수락을 선택합니다.

    참고

    이제 모바일에서 봇 앱으로 SSO를 구성했으며 동의를 제공해야 하는 유일한 시간입니다.

    단계별 가이드를 성공적으로 완료한 후의 봇 SSO 출력 스크린샷.

이런 생각이 나셨나요?

단계별 가이드를 성공적으로 완료한 후의 출력 스크린샷입니다.

SSO 인증을 사용하여 봇 빌드를 시작하기 위한 자습서를 완료했습니다.

봇에 대해 SSO 사용

맨 위로 이동

JavaScript를 사용하여 첫 메시지 확장 앱 빌드

JavaScript를 사용하여 첫 번째 Teams 앱으로 Microsoft Teams 앱 개발을 시작합니다.

이 자습서에서는 다음에 대해 알아봅니다.

  • Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)를 사용하여 새 프로젝트를 설정하는 방법입니다.
  • 메시지 확장 앱을 빌드하는 방법입니다.
  • 앱을 배포하는 방법입니다.
자습서: JavaScript를 사용하여 첫 번째 메시지 확장 앱 빌드

이 단계별 가이드는 Visual Studio Code에서 에이전트 도구 키트를 사용하여 메시지 확장 Teams 앱을 빌드하는 데 도움이 됩니다. 이 가이드를 완료하면 다음 출력이 표시됩니다.

스크린샷은 Teams에서 메시지 확장 앱의 최종 출력을 보여줍니다.

필수 구성 요소

앱을 빌드하고 배포하기 위해 다음 도구를 설치해야 합니다.

  설치 사용...
필수    
  Visual Studio Code JavaScript 또는 TypeScript 빌드 환경입니다. 최신 버전을 사용합니다.
  Microsoft 365 에이전트 도구 키트 앱에 대한 프로젝트 스캐폴딩을 만드는 Microsoft Visual Studio Code 확장입니다. 최신 버전을 사용합니다.
  Node.js 백 엔드 JavaScript 런타임 환경입니다. 자세한 내용은 버전 호환성 표Node.js 참조하세요.
  Microsoft Teams 한 곳에서 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 사람들과 공동 작업합니다.
  Microsoft Edge (권장) 또는 Google Chrome 디버깅과 테스트에 필수적인 개발자 도구가 포함된 브라우저입니다.
  Microsoft 365 개발자 계정 사용자 지정 앱을 설치할 수 있는 적절한 권한이 있는 Teams 계정에 액세스합니다.
선택 사항    
  Visual Studio Code 및 Azure CLI용 Azure 도구 저장된 데이터에 액세스하거나 Azure에서 Teams 앱에 대한 클라우드 기반 백 엔드를 배포하는 도구를 Azure합니다.
  Chrome용 React 개발자 도구 또는 Microsoft Edge용 React 개발자 도구 오픈 소스 React JavaScript 라이브러리용 브라우저 DevTools 확장입니다.

개발 환경 준비

필요한 도구를 설치한 후 개발 환경을 설정합니다.

Microsoft 365 에이전트 도구 키트 설치

Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)는 앱에 대한 클라우드 리소스를 프로비전 및 배포하고 Teams 스토어에 게시하는 도구를 사용하여 개발 프로세스를 간소화하는 데 도움이 됩니다.

에이전트 도구 키트를 Visual Studio Code 또는 Microsoft 365 에이전트 도구 키트 CLI(이전의 TeamsFx CLI)라는 명령줄 인터페이스와 함께 사용할 수 있습니다.

  1. Visual Studio Code를 열고 확장(Ctrl+Shift+X 또는 확장 보기>)을 선택합니다.

  2. 검색 상자에 Microsoft 365 에이전트 도구 키트를 입력합니다.

  3. 설치를 선택합니다.

    스크린샷은 에이전트 도구 키트 확장 설치를 보여줍니다.

    Microsoft 365 에이전트 도구 키트 아이콘이 Visual Studio Code 활동 표시줄에 나타납니다.

Visual Studio Code Marketplace에서 에이전트 도구 키트를 설치할 수도 있습니다.

Teams 개발 테넌트 설정

테넌트는 채팅하고, 파일을 공유하고, 모임을 진행하는 Teams의 organization에 대한 공간 또는 컨테이너입니다. 이 공간은 앱을 업로드하고 테스트하는 곳이기도 합니다. 테넌트와 함께 개발할 준비가 되었는지 확인해 보겠습니다.

앱 업로드 옵션 확인

사용자 지정 앱을 만든 후 사용자 지정 앱 업로드 옵션을 사용하여 Teams에 앱을 업로드해야 합니다. Microsoft 365 계정에 로그인하여 이 옵션이 활성화되어 있는지 검사합니다.

다음 단계는 Teams에서 앱을 업로드할 수 있는지 확인하는 데 도움이 됩니다.

  1. Teams 클라이언트에서 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드를 선택합니다.

  4. 사용자 지정 앱을 업로드하는 옵션을 찾습니다. 이 옵션이 표시되면 사용자 지정 앱을 업로드할 수 있습니다.

    Teams에서 사용자 지정 앱을 업로드하는 옵션을 보여 주는 스크린샷

    참고

    사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기(선택 사항)

Teams 개발자 계정이 없는 경우 Microsoft 365 개발자 프로그램에 참가하세요.

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 나타납니다.

    Microsoft 365 개발자 프로그램을 보여 주는 스크린샷

  5. 방금 설정한 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

무료 Azure 계정 가져오기

Azure에서 앱을 호스트하거나 리소스에 액세스하려면 Azure 구독이 있어야 합니다. 시작하기 전에 무료 계정을 만드세요.

메시지 확장 앱에 대한 프로젝트 작업 영역 만들기

이제 첫 번째 메시지 확장 앱을 만들어 보겠습니다.

메시지 확장 기능을 사용하면 단추 및 양식을 통해 웹 서비스와 상호 작용할 수 있습니다. Teams 클라이언트에서 직접 메시지 작성 영역, 명령 상자 또는 메시지를 사용하여 외부 시스템에서 작업을 검색하고 시작할 수 있습니다. 메시지 확장은 사용자와 코드 간에 대화를 제공하기 위해 봇을 사용합니다.

다이어그램은 메시지 확장이 강조 표시된 다양한 유형의 앱 기능을 보여 주는 스크린샷입니다.

Teams 메시지 확장에는 두 가지 유형이 있습니다.

  • 검색 명령: 외부 시스템을 검색하고 결과를 카드 형태의 메시지에 삽입할 수 있습니다.
  • 작업 명령: 사용자에게 모달 팝업을 제공하여 정보를 수집하거나 표시할 수 있습니다. 그런 다음 이들 상호 작용을 처리하고 정보를 Teams로 다시 보낼 수 있습니다.

검색 명령을 사용하여 메시지 확장 앱을 만들어 보겠습니다. 먼저, 메시지 확장 앱을 만들기 위한 새 Teams 프로젝트를 설정합니다.

이 자습서에서는 다음에 대해 알아봅니다.

  1. 에이전트 도구 키트를 사용하여 새 메시지 확장 프로젝트를 설정하는 방법입니다.
  2. 앱 프로젝트의 디렉터리 구조에 관한 정보입니다.

메시지 확장 프로젝트 작업 영역 만들기

전제 조건이 마련되었다면 시작하겠습니다!

참고

표시되는 Visual Studio Code UI는 운영 체제, 도구 키트 버전, 테마 및 환경에 따라 다를 수 있습니다.

  1. Visual Studio Code를 엽니다.

  2. Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 새 에이전트/앱>Teams 앱 만들기를 선택합니다.

    스크린샷은 에이전트 도구 키트 사이드바에서 새 앱을 만드는 옵션을 보여줍니다.

  4. 메시지 확장을 선택합니다.

    스크린샷은 새 Teams 앱을 만드는 옵션을 보여 줍니다.

  5. 사용자 지정 검색 결과를 선택합니다.

    스크린샷은 새 앱의 기능을 선택하는 옵션을 보여줍니다.

  6. 봇으로 시작을 선택합니다.

    스크린샷은 메시지 확장의 아키텍처에 대한 옵션을 보여줍니다.

  7. JavaScript를 선택합니다.

    스크린샷은 프로그래밍 언어 선택 옵션을 보여줍니다.

  8. 기본 폴더를 선택하여 프로젝트 루트 폴더를 기본 위치에 저장합니다.

    스크린샷은 기본 위치 선택을 보여줍니다.

    다음 단계를 통해 기본 위치를 변경할 수도 있습니다.

    1. 찾아보기를 선택합니다.

      스크린샷은 찾아보기 옵션을 보여 줍니다.

    2. 프로젝트 작업 영역의 위치를 선택합니다.

    3. 폴더 선택을 선택합니다.

      프로젝트 작업 영역 폴더의 위치를 선택하는 방법을 보여 주는 스크린샷

  9. 앱에 적합한 이름을 입력합니다. Enter 키를 선택합니다.

    스크린샷은 앱 이름을 입력하는 옵션을 보여줍니다.

    에이전트 도구 키트는 몇 초 안에 앱을 만듭니다.

    스크린샷은 새로 만든 메시지 확장 앱을 보여줍니다.

    앱이 만들어지면 에이전트 도구 키트에 다음 메시지가 표시됩니다.

    스크린샷은 메시지 확장 앱이 만들어졌음을 알리는 대화 상자를 보여줍니다.

메시지 확장 앱 소스 코드 둘러보기

메시지 확장은 봇 프레임워크를 사용하여 대화를 통해 서비스와 상호 작용합니다. 스캐폴딩을 마친 후 탐색기에서 프로젝트 디렉터리와 파일을 봅니다.

스크린샷은 메시지 확장 앱의 파일을 보여줍니다.

폴더/파일 내용
m365agents.yml 기본 프로젝트 파일은 애플리케이션 구성을 설명하고 각 수명 주기 단계에서 실행할 작업 집합을 정의합니다.
m365agents.local.yml 로컬 실행 및 디버깅을 m365agents.yml 활성화하는 작업으로 재정의합니다.
.vscode/ 로컬 디버그용 Visual Studio Code 파일입니다.
appPackage/ Teams 응용 프로그램 매니페스트용 템플릿입니다.
infra/ Azure 리소스를 프로비저닝하기 위한 템플릿입니다.
index.js 애플리케이션 진입점 및 express 처리기입니다.

팁

Teams 내에서 앱을 통합하기 전에 Teams 외부의 봇 및 메시지 확장에 익숙해지세요.

첫 번째 메시지 확장 앱 빌드 및 실행

에이전트 도구 키트를 사용하여 프로젝트 작업 영역을 설정했으면 이제 프로젝트를 빌드할 차례입니다. Microsoft 365 계정에 로그인해야 합니다.

Microsoft 365 계정에 로그인

Microsoft 365 개발자 프로그램에 참가하는 동안 만든 관리자 계정으로 로그인합니다.

  1. Visual Studio Code를 엽니다.

  2. 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  3. 자격 증명을 사용하여 Microsoft 365에 로그인 을 선택합니다. 기본 웹 브라우저가 열리고 로그인할 수 있습니다.

    스크린샷은 Microsoft 365 및 Azure에 로그인하는 위치를 보여줍니다.

  4. 자격 증명을 사용하여 로그인한 후 브라우저를 닫습니다.

  5. Visual Studio Code 내의 에이전트 도구 키트로 돌아갑니다.

사이드바의 계정 섹션에는 Microsoft 365 계정 이름이 표시됩니다. Microsoft 365 계정에 사용자 지정 앱 업로드가 사용하도록 설정된 경우 에이전트 도구 키트에 사용자 지정 앱 업로드 사용이 표시됩니다.

스크린샷은 사용자가 Microsoft 365에 로그인하고 업로드 사용 가능 메시지를 보여줍니다.

이제 앱을 빌드하고 로컬에서 실행할 준비가 되었습니다.

로컬 환경에서 앱 빌드 및 실행

이제 로컬에서 첫 번째 Teams 메시지 확장 앱을 빌드하고 디버그할 수 있습니다.

로컬에서 앱 빌드 및 실행

  1. Visual Studio Code에서 F5 키를 선택하여 디버그 모드에서 응용 프로그램을 실행합니다.

    참고

    Agents Toolkit이 특정 필수 구성 요소를 확인할 수 없는 경우 검사하라는 메시지가 표시됩니다.


    디버거에서 로컬로 앱을 실행할 때 발생하는 상황을 알아봅니다.

    F5 키를 선택하면 Agents Toolkit이 다음 기능을 수행합니다.

    1. 다음 필수 구성 요소를 확인합니다.

      1. Microsoft 365 계정으로 로그인되어 있습니다.
      2. Microsoft 365 계정에 대해 사용자 지정 앱 업로드가 사용하도록 설정되어 있습니다.
      3. 지원되는 Node.js 버전이 설치되어 있습니다.
      4. 봇 앱에 필요한 포트를 사용할 수 있습니다.

    2. npm 패키지 설치

    3. 개발 터널을 시작하여 HTTP 터널을 만듭니다.

    4. Microsoft Entra ID에 앱을 등록하고 앱을 구성합니다.

    5. Bot Framework에 봇 앱을 등록하고 앱을 구성합니다.

    6. Teams 개발자 포털에 앱을 등록하고 앱을 구성합니다.

    7. 로컬에서 호스팅되는 메시지 확장 앱을 시작합니다.

    8. 웹 브라우저에서 Teams를 시작하고 Teams 앱을 업로드합니다.

    스크린샷은 메시지 확장 앱의 디버그 프로세스를 보여줍니다.

    앱을 처음 디버그하면 Teams에서 종속성을 다운로드하고 앱을 빌드합니다. 이 프로세스를 완료하는 데 3-5분 정도 걸릴 수 있습니다.

  2. 빌드가 완료되면 Teams가 브라우저 창에서 열립니다. 메시지가 나타나면 Microsoft 365 계정으로 로그인합니다.

  3. Teams에 메시지 확장 앱을 추가할 수 있는 대화 상자가 열립니다. 추가를 선택하세요.

    Teams에서 사용자 지정 앱을 추가하는 옵션을 보여주는 스크린샷

    Teams가 메시지 확장 앱을 로드합니다.

    스크린샷은 Teams 봇 채팅에서 열려 있는 메시지 확장 앱을 보여줍니다.

    메시지 확장 앱은 사용자와 웹 서비스 간의 통신을 가능하게 하기 위해 봇에 의존하므로 앱은 봇의 채팅 기능에 로드됩니다.

    • 메시지 확장 앱을 만들기 전에 봇 앱을 만든 경우 Teams는 사용자가 만든 봇 앱에 메시지 확장을 로드합니다. 봇 앱의 이전 채팅 메시지가 표시됩니다.
    • 메시지 확장을 먼저 만든 경우 Teams는 Teams에 열려 있는 가장 최근 채팅에서 앱을 로드합니다.

앱 테스트

앱이 처음 로드되면 메시지 확장 앱이 열려 테스트합니다. 이 샘플 앱을 사용하면 소프트웨어 레지스트리에서 오픈 소스 npm 패키지를 검색할 수 있습니다.

검색 쿼리를 실행하는 방법

  1. 메시지 확장의 검색 상자에 오픈 소스 npm 패키지의 이름(예: cli)을 입력합니다. 메시지 확장에 일치하는 항목 목록이 표시됩니다.

    스크린샷은 메시지 확장 앱의 검색 문자열을 보여줍니다.

  2. 목록에서 항목 중 하나를 선택합니다. 앱에서 메시지 작성 영역에 항목이 포함된 적응형 카드를 만들어 채팅 또는 채널에서 보낼 수 있습니다.

    스크린샷은 메시지 작성 영역의 검색 결과를 보여줍니다.

  3. Enter 키를 선택합니다. 메시지 확장 앱은 채팅 또는 채널에서 항목과 함께 적응형 카드를 보냅니다.

    스크린샷은 채팅에서 전송된 검색 결과를 보여줍니다.

메시지 확장 앱을 여는 방법

이전 단계에서 메시지 확장 앱의 검색 기능을 테스트했습니다. 이제 메시지 확장 앱을 여는 다양한 방법을 알아봅니다.

명령 상자에서 앱 열기

  1. 명령 상자에 메시지 확장 앱의 이름을 입력 / 하세요.

    메시지 확장 앱을 호출하는 방법을 보여 주는 스크린샷.

    명령 상자에서 앱이 열리고 이를 사용하여 쿼리를 실행할 수 있습니다.

    참고

    • 명령 상자에서 메시지 확장 앱을 여는 데 사용하는 기능은 / 새 Teams 클라이언트에서만 작동합니다.
    • 클래식 Teams 클라이언트의 명령 상자에서 메시지 확장 앱을 여는 데 사용합니다 @ .

메시지 작성 영역에서 앱 열기

  1. 메시지 작성 영역의 맨 아래에 있는 점 세 개를 선택합니다.

  2. 메시지 확장 앱을 선택합니다.

    스크린샷은 메시지 작성 영역에서 메시지 확장 앱을 여는 방법을 보여줍니다.

    메시지 확장 앱이 검색을 실행하는 옵션과 함께 로드됩니다.


업로드된 사용자 지정 앱에서 앱 열기

  1. 앱>앱 관리를 선택합니다.

  2. 앱 목록에서 앱에 대한 드롭다운을 선택하고 개인 앱을 선택합니다.

    스크린샷은 Teams에서 업로드된 앱을 보여줍니다.

  3. 앱을 사용해 보라고 제안하는 대화 상자가 나타납니다. 확인을 선택하면 대화 상자가 사라집니다. 사용해 보기를 선택합니다.

    스크린샷은 지금 또는 나중에 메시지 확장 앱을 사용해 보라는 메시지를 보여줍니다.

  4. 메시지 확장 앱 목록이 가장 최근의 Teams 채팅에 나타납니다. 목록에서 메시지 확장 앱을 선택합니다.

앱이 로컬로 실행되지 않는 경우 문제를 해결하는 방법 알아보기

Teams에서 앱을 실행하려면 사용자 지정 앱 업로드를 허용하는 Microsoft 365 개발 계정이 있어야 합니다. 필수 구성 요소 섹션에서 사용자 지정 앱 업로드에 대해 자세히 알아볼 수 있습니다.

첫 번째 Teams 앱 배포

에이전트 도구 키트를 사용하여 Azure에 첫 번째 메시지 확장 앱을 배포해 보겠습니다.

Azure 계정에 로그인

Azure 계정에 로그인하여 Microsoft Azure Portal에 액세스하고 앱을 지원하기 위한 새 클라우드 리소스를 프로비전합니다.

  1. Visual Studio Code를 엽니다.

  2. 메시지 확장 앱을 만든 프로젝트 폴더를 엽니다.

  3. 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  4. 자격 증명을 사용하여 Azure에 로그인을 선택합니다. 기본 웹 브라우저가 열리고 로그인할 수 있습니다.

    팁

    AZURE 계정 확장이 설치되어 있고 동일한 계정을 사용하는 경우 이 단계를 건너뛸 수 있습니다.

  5. 메시지가 표시되면 브라우저를 닫고 Visual Studio Code로 돌아갑니다.

사이드바의 계정 섹션에는 사용 가능한 Azure 구독 수가 나열됩니다. 사용 가능한 Azure 구독이 하나 이상 있는지 확인합니다. 그렇지 않은 경우 로그아웃하고 다른 계정을 사용합니다.

Azure에 앱 배포

배포는 두 단계로 구성됩니다. 먼저, 필요한 클라우드 리소스가 생성됩니다(프로비저닝이라고도 함). 그런 다음 앱의 코드가 생성된 클라우드 리소스에 복사됩니다. 이 자습서에서는 메시지 확장 앱을 배포합니다.

프로비전과 배포의 차이점은 무엇인가요?
프로비전 단계에서는 앱에 대한 리소스를 Azure 및 Microsoft 365에 만들지만 리소스에 코드(예: HTML, CSS 또는 JavaScript)는 복사되지 않습니다. 배포 단계에서는 프로비전 단계에서 만든 리소스에 앱의 코드를 복사합니다. 새 리소스를 프로비전하지 않고 여러 번 배포하는 것이 일반적입니다. 프로비전 단계는 완료하는 데 시간이 걸리므로 배포 단계와는 별개입니다.

Visual Studio Code 활동 표시줄에서 Microsoft 365 에이전트 도구 키트 아이콘을 선택합니다.

  1. 프로 비저닝을 선택합니다.

    스크린샷은 에이전트 도구 키트 아래의 클라우드에서 프로비저닝 선택을 보여줍니다.

  2. 구독을 선택합니다.

    스크린샷은 선택할 수 있는 Azure 구독 그룹 옵션을 보여줍니다.

  3. 리소스 그룹을 선택합니다.

    스크린샷은 Azure 리소스에 사용할 구독을 보여줍니다.

    선택할 리소스 그룹이 없는 경우 다음 단계에 따라 새 리소스 그룹을 만들 수 있습니다.

    1. + 새 리소스 그룹을 선택합니다.

      스크린샷은 새 Azure 리소스 그룹을 만드는 옵션을 보여줍니다.

    2. 기본 이름을 선택하거나 리소스 그룹에 적합한 이름을 입력합니다.

      스크린샷은 새 Azure 리소스 그룹의 기본 이름을 보여줍니다.

    3. 리소스 그룹의 위치를 선택합니다.

      스크린샷은 새 Azure 리소스 그룹의 위치에 대한 옵션을 보여줍니다.

  4. Azure에서 리소스를 실행할 때 비용이 발생할 수 있음을 경고하는 대화 상자가 표시됩니다. 프로 비저닝을 선택합니다.

    스크린샷은 Azure 리소스를 프로비저닝하는 동안 비용이 발생할 수 있음을 사용자에게 경고하는 대화 상자를 보여줍니다.

    프로비저닝 프로세스는 Azure 클라우드에 리소스를 만듭니다. 시간이 좀 걸릴 수 있습니다. 몇 분 후 다음 메시지가 표시됩니다.

    스크린샷은 클라우드에서 성공적으로 프로비전된 메시지 확장 앱을 표시하는 알림을 보여줍니다.

    원하는 경우 프로비전된 리소스를 볼 수 있습니다. 이 자습서에서는 리소스를 볼 필요가 없습니다.

    프로비전된 리소스가 환경 아래에 표시됩니다.

    스크린샷은 환경 섹션에서 프로비전되는 리소스를 보여줍니다.

  5. 수명 주기에서 배포를 선택합니다.

    클라우드에 배포되는 앱을 보여 주는 스크린샷.

  6. 개발 환경에 리소스를 배포할지 묻는 대화 상자가 나타납니다. 배포를 선택합니다.

    스크린샷은 Azure에서 앱을 배포하기 위한 확인 대화 상자를 보여줍니다.

    프로비저닝과 마찬가지로 배포에도 다소 시간이 걸립니다. 몇 분 후에 완료 메시지가 표시됩니다.

배포된 앱 실행

프로비전 및 배포 단계가 완료되면 에이전트 도구 키트에서 실행 및 디버그(Ctrl+Shift+D 또는 실행 보기>)로 이동합니다.

  1. 실행 및 디버그 드롭다운 메뉴를 선택합니다.

  2. Teams(Edge)에서 원격 시작을 선택합니다.

  3. ▷ 버튼을 선택합니다.

    스크린샷은 Teams 옵션에서 원격으로 앱 시작을 보여줍니다.

  4. Teams에 배포된 앱을 설치할 수 있는 대화 상자가 열립니다. 추가를 선택하세요.

    배포된 앱을 추가하라는 메시지를 보여주는 스크린샷

    Teams가 가장 최근 채팅에서 메시지 확장 앱을 엽니다.

    스크린샷은 채팅에서 열려 있는 메시지 확장을 보여줍니다.

Azure에 앱을 배포한 경우 발생하는 결과 알아보기

배포하기 전에 앱이 로컬에서 실행됩니다.

  • 백 엔드는 Azure Functions 핵심 도구를 사용하여 실행됩니다.
  • Microsoft Teams에서 응용 프로그램을 로드하는 응용 프로그램 HTTP 엔드포인트는 로컬에서 실행됩니다.

배포는 2단계 프로세스입니다. 활성 Azure 구독에 리소스를 프로비전한 다음 앱의 백 엔드 및 프런트 엔드 코드를 Azure에 배포하거나 업로드합니다.

  • 백 엔드는 구성된 경우 Azure App Service 및 Azure Storage를 비롯한 다양한 Azure 서비스를 사용합니다.
  • 프런트 엔드 앱은 정적 웹 호스팅을 위해 구성된 Azure Storage 계정에 배포됩니다.

축하해요

JavaScript를 사용하여 메시지 확장 앱을 빌드하는 자습서를 완료했습니다!

이런 생각이 나셨나요?

스크린샷은 Teams에서 메시지 확장 앱의 최종 출력을 보여줍니다.

메시지 확장 앱 빌드

맨 위로 이동

C sharp를 사용하여 첫 번째 탭 앱 빌드

탭 기능으로 첫 번째 Teams 앱을 빌드하여 Microsoft Teams 앱 개발을 시작하세요.

이 자습서에서는 다음에 대해 알아봅니다.

  • 새 프로젝트를 설정하는 방법입니다.
  • C# 및 Microsoft Visual Studio 2022를 사용하여 탭 기능이 있는 앱을 빌드하는 방법입니다.
자습서: C를 사용하여 첫 번째 탭 앱 빌드#

이 단계별 가이드는 Microsoft 365 에이전트 도구 키트(이전의 Teams 도구 키트)를 사용하여 탭을 작성하는 데 도움이 됩니다. 이 가이드를 완료하면 다음 출력이 표시됩니다.

스크린샷은 Teams 탭 앱의 최종 출력을 보여줍니다.

앱 빌드를 위한 필수 구성 요소

Teams 앱을 빌드하고 배포하기 위해 설치해야 하는 도구 목록은 다음과 같습니다.

설치 사용...
Microsoft Teams Microsoft Teams는 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 모든 사람과 한 곳에서 공동 작업할 수 있습니다.
Visual Studio 2022
 Visual Studio 2022에 엔터프라이즈 버전을 설치하고 ASP.NET 및 웹 개발 워크로드를 설치할 수 있습니다. 최신 버전을 사용합니다.
Microsoft 365 에이전트 도구 키트 앱에 대한 프로젝트 스캐폴딩을 만드는 Visual Studio 확장입니다. 최신 버전을 사용합니다.

에이전트 도구 키트 설치

에이전트 도구 키트는 앱에 대한 프로젝트 스캐폴딩을 만드는 도구를 사용하여 개발 프로세스를 단순화하는 데 도움이 됩니다. 프로젝트를 빌드할 준비가 된 필요한 파일과 함께 선택한 모든 기능에 필요한 디렉터리 구조를 만듭니다.

최신 Visual Studio 설치 관리자를 다운로드할 수 있습니다. 에이전트 도구 키트는 Visual Studio에서 확장으로 사용할 수 있습니다.

팝업 작업 창에서 Visual Studio 설치 관리자를 연 후:

  1. ASP.NET 및 웹 개발을 선택합니다.

  2. 설치 세부 정보>선택 사항에서 Microsoft Teams 개발 도구를 선택합니다.

  3. 설치를 선택합니다.

    Visual Studio 설치를 보여 주는 스크린샷.

  4. 시작을 선택합니다. Visual Studio 2022 앱 창이 나타납니다.

    스크린샷은 Visual Studio에서 시작을 선택한 모습을 보여 줍니다.

  5. 확장명>확장 관리로 이동합니다.

    스크린샷은 확장 선택 영역을 보여 줍니다.

    확장 관리 창이 표시됩니다.

    스크린샷은 확장 관리를 보여줍니다.

  6. 왼쪽 창에서 설치됨을 선택합니다. Microsoft 365 에이전트 도구 키트 확장을 사용할 수 있습니다.

    스크린샷은 에이전트 도구 키트 선택을 보여줍니다.

Teams 개발 테넌트 설정

테넌트는 채팅하고, 파일을 공유하고, 모임을 진행하는 Teams의 organization을 위한 공간 또는 컨테이너와 같습니다. 이 공간은 사용자 지정 앱을 업로드하고 테스트하는 곳이기도 합니다. 테넌트와 함께 개발할 준비가 되었는지 확인해 보겠습니다.

사용자 지정 앱 업로드 옵션 확인

앱을 만든 후에는 배포하지 않고 Teams에 앱을 로드해야 합니다. 이 프로세스를 사용자 지정 앱 업로드라고 합니다. 이 옵션을 보려면 Microsoft 365 계정에 로그인하세요.

참고

Teams 로컬 환경에서 앱을 미리 보고 테스트하려면 사용자 지정 앱 업로드가 필요합니다. 사용하도록 설정하지 않으면 Teams 로컬 환경에서 앱을 미리 보고 테스트할 수 없습니다.

테넌트 및 관리자 액세스 권한이 이미 있나요? 그렇다면 검사해 봅시다!

Teams에서 사용자 지정 앱을 업로드할 수 있는지 확인합니다.

  1. Microsoft Teams를 열고 앱 아이콘을 선택합니다.

  2. 앱 관리를 선택합니다.

  3. 앱 업로드를 선택합니다.

  4. 사용자 지정 앱 업로드 옵션을 찾습니다. 옵션이 표시되면 사용자 지정 앱 업로드가 사용하도록 설정됩니다.

    그림은 Teams에서 사용자 지정 앱을 업로드하는 옵션을 보여줍니다.

참고

사용자 지정 앱을 업로드하는 옵션을 찾지 못하면 Teams 관리자에게 문의하세요.

무료 Teams 개발자 테넌트 만들기(선택 사항)

Teams 계정이 없는 경우 무료로 받을 수 있습니다. Microsoft 365 개발자 프로그램에 참여하세요!

  1. Microsoft 365 개발자 프로그램으로 이동합니다.

  2. 지금 가입을 선택하고 화면의 지시를 따릅니다.

  3. 시작 화면에서 E5 구독 설정을 선택합니다.

  4. 관리자 계정을 설정합니다. 완료되면 다음 화면이 나타납니다.

    스크린샷은 Microsoft 365 개발자 프로그램에 등록한 후 표시되는 예시를 보여 줍니다.

  5. 설정한 관리자 계정을 사용하여 Teams에 로그인합니다. Teams에 사용자 지정 앱 업로드 옵션이 있는지 확인합니다.

무료 Azure 계정 가져오기

Azure에서 앱을 호스트하거나 리소스에 액세스하려면 Azure 구독이 있어야 합니다. 시작하기 전에 무료 계정을 만드세요.

이제 계정을 설정하기 위한 모든 도구를 사용했습니다. 다음으로, 개발 환경을 설정하고 구축을 시작하겠습니다! 먼저 만들려는 앱을 선택합니다.

C sharp를 사용하여 탭 앱에 대한 프로젝트 작업 영역 만들기

첫 번째 앱을 만들어 Microsoft Teams 앱 개발을 시작합니다. 이 앱은 탭 기능을 사용합니다. 전제 조건이 마련되었다면 시작하겠습니다!

다음 단계는 Visual Studio에서 탭 앱에 대한 프로젝트 작업 영역을 만드는 데 도움이 됩니다.

  1. Visual Studio를 엽니다.

  2. 새 프로젝트를 선택합니다.

    Visual Studio에서 새 프로젝트 선택을 보여 주는 스크린샷

  3. 검색 상자에 Teams를 입력합니다.

  4. 다음으로Microsoft 365 에이전트를 선택합니다.>

    스크린샷은 Teams 선택을 보여줍니다.

  5. 새 프로젝트를 구성하려면 다음 세부 정보를 입력합니다.

  6. 프로젝트 이름에 필수 프로젝트 이름을 입력합니다.

  7. 프로젝트 파일 및 폴더를 저장할 데 필요한 위치를 선택합니다.

  8. 만들기를 선택합니다.

    프로젝트 이름 생성을 보여 주는 스크린샷.

  9. 탭만들기를 선택합니다>.

    스크린샷은 탭 선택을 보여줍니다.

Teams 탭 앱이 몇 초 안에 만들어집니다.

프로젝트 만들기를 보여 주는 스크린샷.

C sharp를 사용하여 첫 번째 탭 앱 빌드 및 실행

에이전트 도구 키트를 사용하여 프로젝트 작업 영역을 설정한 후 탭 앱을 빌드합니다.

Microsoft 365 계정에 로그인

Microsoft 365 계정을 사용하여 Teams에 로그인합니다. Microsoft 365 개발자 프로그램 테넌트를 사용하는 경우 등록하는 동안 설정한 관리자 계정은 Microsoft 365 계정입니다.

  1. 솔루션 탐색기의 솔루션 MyTeamsApp 아래에서 MyTeamsApp을 마우스 오른쪽 단추로 클릭합니다.

  2. Microsoft 365 에이전트 도구 키트> 선택Microsoft 365 계정을 선택합니다.

    스크린샷은 Teams 앱 종속성 선택을 보여줍니다.

  3. Microsoft 365 계정>계속을 선택합니다.

    스크린샷은 M365 계정 선택을 보여줍니다.

Visual Studio에서 로컬로 앱 빌드 및 실행

앱을 로컬로 빌드하고 실행하려면 다음을 수행합니다.

  1. 디버그,>디버깅 시작을 선택하거나 F5 키를 선택합니다.

    스크린샷은 디버깅 작업 시작 선택을 보여줍니다.

    Visual Studio는 디버깅 프로세스를 시작하고 브라우저에서 Teams 웹 클라이언트를 엽니다. 메시지가 표시되면 Microsoft 365 계정으로 로그인합니다.

  2. 추가를 선택하세요.

    Teams에 탭 앱을 추가하는 앱 세부 정보 대화 상자의 스크린샷.

  3. 열기를 선택하여 개인 scope에서 앱을 엽니다.

또는 필요한 scope를 검색하여 선택하거나 목록에서 채널 또는 채팅을 선택한 다음 대화 상자를 이동하여 이동을 선택할 수 있습니다.

스크린샷은 공유 범위 목록이 있는 scope 선택 대화 상자를 표시합니다.

축하합니다. 첫 번째 탭 앱이 Teams에서 실행되고 있습니다.

스크린샷은 Teams 탭 앱의 최종 출력을 보여줍니다.

앱이 로컬로 실행되지 않는 경우 문제를 해결하는 방법을 알아봅니다.

Teams에서 앱을 성공적으로 실행하려면 Teams 계정에서 사용자 지정 앱 업로드를 사용하도록 설정했는지 확인하세요. 필수 구성 요소 섹션에서 사용자 지정 앱 업로드에 대해 자세히 알아볼 수 있습니다.

C#을 사용하여 탭 앱을 성공적으로 만들었습니다. Agents Toolkit이 앱의 디렉터리 구조에 필요한 스캐폴딩을 추가했습니다. 이제 자습서가 완료되었습니다.

탭 만들기

Microsoft 365 에이전트 도구 키트를 사용하여 새 Teams 프로젝트 만들기

맨 위로 이동

탭 및 메시지 확장 앱에 SSO 추가

Microsoft Entra SSO(Single Sign-On)를 사용하면 Teams에서 원활한 사용자 인증을 사용할 수 있습니다.

Microsoft Entra SSO의 주요 측면:

  • 사용자가 처음 로그인한 후 자동으로 로그인할 수 있도록 허용합니다.
  • 사용자가 자격 증명을 다시 입력하지 않고 다른 장치에 로그인할 수 있도록 허용합니다.
  • 로그인한 사용자의 토큰을 가져옵니다.
자습서: 탭 및 메시지 확장 앱에 SSO 추가

이 단계별 가이드는 Microsoft Entra SSO 인증을 사용하도록 설정하는 탭 및 메시지 확장을 만드는 데 도움이 됩니다. 다음 출력이 표시됩니다.

단계별 가이드를 성공적으로 완료한 후 SSO 인증 출력이 있는 탭 및 메시지 확장의 스크린샷.

앱에 SSO를 추가하기 위한 필수 구성 요소

다음 도구를 설치하고 개발 환경을 설정해야 합니다.

# 설치 사용...
1. Microsoft Teams Microsoft Teams는 채팅, 모임 및 통화를 위한 앱을 통해 함께 작업하는 모든 사람들과 한 곳에서 공동 작업할 수 있습니다.
2. Microsoft 365 개발자 계정 앱을 설치할 수 있는 적절한 권한이 있는 Teams 계정에 액세스합니다.
3. .NET Core SDK 로컬 디버깅 및 Azure Functions 앱 배포를 위한 사용자 지정된 바인딩입니다. 최신 버전을 설치하지 않은 경우 휴대용 버전을 설치합니다.
4. Visual Studio 2022 Visual Studio 2022에 엔터프라이즈 버전을 설치하고 ASP.NET 및 웹 개발 워크로드를 설치할 수 있습니다. 최신 버전을 사용합니다.
5. 개발자 터널 Teams 앱 기능(대화형 봇, 메시지 확장 및 들어오는 웹후크)에는 인바운드 연결이 필요합니다. 터널을 통해 개발 시스템을 Teams에 연결할 수 있습니다. 개발자 터널은 로컬 호스트를 인터넷에 안전하게 열고 액세스 권한을 가진 사용자를 제어하는 강력한 도구입니다. 개발자 터널은 Visual Studio 2022 버전 17.7.0 이상에서 사용할 수 있습니다.
또는
ngrok 를 터널로 사용하여 개발 시스템을 Teams에 연결할 수도 있습니다. 탭만 포함하는 앱에는 필요하지 않습니다. 이 패키지는 프로젝트 디렉터리 내에 설치됩니다(npm devDependencies사용).

참고

ngrok를 다운로드한 후 등록하고 authtoken을 설치합니다.

로컬 환경 설정

  1. Microsoft-Teams-Samples를 엽니다.

  2. 코드를 선택합니다.

  3. 드롭다운 메뉴에서 GitHub Desktop으로 열기를 선택합니다.

    스크린샷은 로컬에서 리포지토리를 복제하는 옵션을 보여줍니다.

  4. 복제 를 선택합니다.

Microsoft Entra 앱 등록

다음 단계는 Azure Portal에서 봇을 만들고 등록하는 데 도움이 됩니다.

  • Azure 앱을 만들고 등록합니다.
  • 봇의 SSO 인증을 사용하도록 설정하는 클라이언트 암호를 만듭니다.
  • 봇을 배포할 Teams 채널을 추가합니다.
  • dev tunnel(권장) 또는 ngrok를 사용하여 웹 서버의 엔드포인트에 대한 터널을 만듭니다.
  • 만든 개발 터널에 메시징 엔드포인트를 추가합니다.

앱 등록 추가

  1. Azure Portal로 이동합니다.

  2. 앱 등록을 선택합니다.

    스크린샷은 앱 등록을 선택하는 Azure 서비스를 보여줍니다.

  3. + 새 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터의 새 등록 페이지를 보여줍니다.

  4. 앱의 이름을 입력합니다.

  5. 모든 조직 디렉터리에서 계정을 선택합니다(모든 Microsoft Entra ID 테넌트 - 다중 테넌트).

  6. 등록을 선택합니다.

    스크린샷은 Microsoft Entra 관리 센터에서 봇을 등록하는 옵션을 보여줍니다.

    앱이 Microsoft Entra ID에 등록되었습니다. 앱 개요 페이지가 나타납니다.

    스크린샷은 앱 등록 개요 페이지를 보여줍니다.

    참고

    나중에 사용할 수 있도록 애플리케이션(클라이언트) ID 및 디렉터리(테넌트) ID 에서 앱 ID를 저장합니다.

터널 만들기

터널을 생성하려면 다음 방법 중 하나를 선택합니다.

  1. Visual Studio를 엽니다.

  2. 새 프로젝트 만들기를 선택합니다.

    스크린샷은 새 프로젝트를 만들기 위한 선택 영역을 보여 줍니다.

  3. 검색 상자에 ASP.NET 를 입력합니다. 검색 결과에서 ASP.NET Core 웹앱을 선택합니다.

  4. 다음을 선택합니다.

    스크린샷은 템플릿의 검색 및 선택을 보여줍니다.

  5. 프로젝트 이름을 입력하고 다음을 선택합니다.

    입력할 프로젝트 이름을 보여 주는 스크린샷

  6. 만들기를 선택합니다.

    스크린샷은 프로젝트 추가 정보를 보여줍니다.

    개요 창이 나타납니다.

    스크린샷은 개요 창을 보여줍니다.

  7. 디버그 드롭다운 목록에서 개발자 터널(활성 터널 없음)터널 만들기...를> 선택합니다.

    스크린샷은 개발 터널을 선택하는 드롭다운을 보여줍니다.

    팝업 창이 나타납니다.

  8. 팝업 창에서 다음 세부 정보를 업데이트합니다.

    1. 계정: Microsoft 또는 GitHub 계정을 입력합니다.
    2. 이름: 터널의 이름을 입력합니다.
    3. 터널 유형: 드롭다운 목록에서 임시를 선택합니다.
    4. 액세스: 드롭다운 목록에서 퍼블릭을 선택합니다.

  9. 확인을 선택합니다.

    터널 생성을 위해 업데이트할 세부 정보를 보여주는 스크린샷입니다.

    개발자 터널이 성공적으로 만들어졌음을 보여주는 팝업 창이 나타납니다.

  10. 확인을 선택합니다.

    터널이 생성되었다는 팝업 메시지를 보여주는 스크린샷.

    다음과 같이 디버그 드롭다운 목록에서 생성한 터널을 찾을 수 있습니다.

    스크린샷은 터널이 활성 상태이고 선택되어 있음을 보여줍니다.

  11. F5를 선택하여 디버그 모드에서 응용 프로그램을 실행합니다.

  12. 보안 경고 대화 상자가 나타나면 예를 선택합니다.

    스크린샷은 보안 경고를 수락하는 대화 상자를 보여줍니다.

    팝업 창이 나타납니다.

  13. 계속을 선택합니다.

    스크린샷은 터널의 URL을 보여줍니다.

    개발자 터널 홈페이지가 새 브라우저 창에서 열리고 개발자 터널이 활성 상태입니다.

    브라우저의 개발자 터널 시작 페이지를 보여 주는 스크린샷

  14. Visual Studio로 이동한 다음 출력 보기>를 선택합니다.

  15. 출력 콘솔 드롭다운 메뉴에서 개발자 터널을 선택합니다.

    출력 콘솔에 개발 터널 URL이 표시됩니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

웹 인증 추가

  1. 왼쪽 창의 관리 아래에서 인증을 선택합니다.

  2. 플랫폼 >웹 추가를선택합니다.

    스크린샷은 웹 인증 선택을 보여줍니다.

  3. 정규화된 도메인 이름에 추가 auth-end 하여 앱의 리디렉션 URI를 입력합니다. 예를 들면 https://your-devtunnel-domain/auth-end 또는 https://your-ngrok-domain/auth-end.

  4. 암시적 권한 부여 및 하이브리드 흐름에서 액세스 토큰 및 ID 토큰 확인란을 선택합니다.

  5. 구성을 선택합니다.

    스크린샷에는 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션이 나와 있습니다.

  6. 웹에서 URI 추가를 선택합니다.

  7. Enter .https://token.botframework.com/.auth/web/redirect

  8. 저장을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 암시적 권한 부여 및 하이브리드 흐름을 선택하는 옵션을 보여줍니다.

클라이언트 암호 만들기

참고

클라이언트 비밀이 테넌트 전체 정책에 의해 차단됨 오류가 발생하는 경우. 자세한 내용은 테넌트 관리자에게 문의하세요. 대신 인증서를 만들 수 있습니다. 단계별 지침은 앱 등록용 인증서 만들기를 참조하세요.

  1. 왼쪽 창의 관리에서 인증서 & 비밀을 선택합니다.

  2. 클라이언트 암호에서+ 새 클라이언트 암호를 선택합니다.

    스크린샷은 새 클라이언트 암호의 선택을 보여줍니다.

    Add a client secret(클라이언트 암호 추가) 창이 나타납니다.

  3. 설명을 입력합니다.

  4. 추가를 선택하세요.

    스크린샷은 추가할 클라이언트 암호 설명 옵션을 보여줍니다.

  5. 값에서클립보드에 복사를 선택하여 나중에 사용할 수 있도록 클라이언트 암호 값을 저장합니다.

    스크린샷은 클라이언트 암호 ID 값을 복사하여 값을 클립보드에 복사하는 옵션을 보여줍니다.

API 권한 추가

  1. 왼쪽 창에서 API 권한을 선택합니다.

  2. + 권한 추가를 선택합니다.

    스크린샷에는 권한 추가를 선택하는 옵션이 나와 있습니다.

  3. Microsoft Graph를 선택합니다.

  4. 위임된 권한을 선택합니다.

  5. 사용자>User.Read를 선택합니다.

  6. 사용 권한 추가를 선택합니다.

    스크린샷은 사용 권한을 선택하는 옵션을 보여줍니다.

    참고

    • 앱에 IT 관리자 동의가 부여되지 않은 경우 사용자는 앱을 처음 사용할 때 동의를 제공해야 합니다.
    • 사용자는 Microsoft Entra 앱이 다른 테넌트에 등록된 경우에만 API 권한에 동의해야 합니다.

애플리케이션 ID URI 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. 애플리케이션 ID URI 옆에 있는 추가를 선택합니다.

    스크린샷은 애플리케이션 ID URI를 추가하는 옵션을 보여줍니다.

  3. 애플리케이션 ID URIapi://your-devtunnel-domain/botid-{AppID} 를 또는 api://your-ngrok-domain/botid-{AppID} 형식으로 업데이트하고 저장을 선택합니다.

    스크린샷은 리디렉션 URI를 추가하고 저장하는 옵션을 보여줍니다.

    다음 이미지는 도메인 이름을 보여 줍니다.

    스크린샷은 리디렉션 URI를 보여줍니다.

scope 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

  2. + scope 추가를 선택합니다.

    스크린샷은 범위를 추가하기 위한 선택 항목을 보여 줍니다.

  3. 범위 이름으로 access_as_user를 입력합니다.

  4. 누가 동의할 수 있나요?에서관리자 및 사용자를 선택합니다.

  5. 나머지 필드의 값을 다음과 같이 업데이트합니다.

    • 입력 Teams는 관리 동의 표시 이름으로 사용자 프로필에 액세스할 수 있습니다.

    • Enter Teams가 관리 동의 설명으로 현재 사용자로 앱의 웹 API를 호출할 수 있도록 허용합니다.

    • 입력 Teams 사용자 프로필에 액세스하고 사용자동의 표시 이름으로 사용자 대신 요청할 수 있습니다.

    • Teams 가 사용자와 동일한 권한으로 이 앱의 API를 호출하도록 허용을 사용자 동의 설명과 입력합니다.

  6. 상태가 사용으로 설정되어 있는지 확인합니다.

  7. Add scope를 선택합니다.

    다음 이미지는 필드와 값을 보여 줍니다.

    스크린샷은 Add a scope 필드에 입력된 값을 보여줍니다.

    참고

    범위 이름은 끝에 추가되는 애플리케이션 ID URI /access_as_user 와 일치해야 합니다.

    스크린샷은 범위의 세부 정보를 보여줍니다.

클라이언트 애플리케이션 추가

  1. 왼쪽 창의 관리에서 API 노출을 선택합니다.

    승인된 클라이언트 애플리케이션에서 앱의 웹 애플리케이션에 대해 권한을 부여할 애플리케이션을 식별합니다.

  2. + 클라이언트 애플리케이션 추가를 선택합니다.

    스크린샷은 클라이언트 애플리케이션 선택 옵션을 보여줍니다.

  3. Teams 모바일 또는 데스크톱 및 Teams 웹 응용 프로그램을 추가합니다.

    1. Teams 모바일 또는 데스크톱의 경우: 클라이언트 ID를 다음으로 입력합니다.1fec8e78-bce4-4aaf-ab1b-5451cc387264

      스크린샷은 모바일 또는 데스크톱 클라이언트 ID 애플리케이션을 보여줍니다.

    2. Teams 웹의 경우: 클라이언트 ID를 다음으로 입력합니다.5e3ce6c0-2b1f-4285-8d4b-75ee78787346

      스크린샷은 웹 클라이언트 ID 애플리케이션을 보여줍니다.

  4. 승인된 범위 확인란을 선택합니다.

  5. 애플리케이션 추가를 선택합니다.

    스크린샷은 승인된 범위를 선택하고 응용 프로그램을 추가하는 옵션을 보여 줍니다.

    다음 이미지에는 클라이언트 ID가 표시됩니다.

    스크린샷은 클라이언트 애플리케이션의 출력을 보여줍니다.

매니페스트 업데이트

  1. 왼쪽 창에서 매니페스트를 선택합니다.

  2. 받는 사람 2 에 requestedAccessTokenVersion 대한 값을 설정하고 저장을 선택합니다.

    스크린샷은 Azure Portal의 매니페스트 옵션 및 액세스 토큰 세부 정보를 보여줍니다.

봇 만들기

Azure 봇 리소스 만들기

참고

이미 Teams에서 봇을 테스트하고 있는 경우 이 앱과 Teams에서 로그아웃합니다. 이 변경 내용을 보려면 다시 로그인하세요.

  1. 홈으로 이동합니다.

  2. + 리소스 만들기를 선택합니다.

  3. 검색 상자에 Azure Bot을 입력합니다.

  4. Enter 키를 선택합니다.

  5. Azure 봇을 선택합니다.

  6. 만들기를 선택합니다.

    스크린샷은 Azure 봇을 만드는 방법을 보여 줍니다.

  7. 봇 핸들에 봇 이름을 입력합니다.

  8. 드롭다운 목록에서 구독 을 선택합니다.

  9. 드롭다운 목록에서 리소스 그룹을 선택합니다.

    스크린샷은 Azure Portal의 리소스 그룹 및 구독 옵션을 보여 줍니다.

    기존 리소스 그룹이 없는 경우 새 리소스 그룹을 만들 수 있습니다. 새 리소스 그룹을 만들려면 다음 단계를 수행합니다.

    1. 새로 만들기를 선택합니다.
    2. 리소스 이름을 입력하고 확인을 선택합니다.
    3. 새 리소스 그룹 위치 드롭다운 목록에서 위치를 선택합니다.

    스크린샷은 Azure Portal의 새 리소스 그룹 옵션을 보여줍니다.

  10. 가격 책정에서플랜 변경을 선택합니다.

    스크린샷은 Azure Portal의 가격 책정 옵션을 보여줍니다.

  11. FO 무료>선택을 선택합니다.

    스크린샷은 무료 선택 옵션을 보여줍니다.

  12. Microsoft 앱 ID에서 앱 유형을다중 테넌트로 선택합니다.

  13. 만들기 유형에서 기존 앱 등록 사용을 선택합니다.

  14. 앱 ID를 입력합니다.

    참고

    동일한 Microsoft 앱 ID를 사용하여 봇을 두 개 이상 만들 수 없습니다.

  15. 검토 + 만들기를 선택합니다.

    스크린샷은 새 봇을 만드는 방법을 보여 줍니다.

  16. 유효성 검사가 통과되면 만들기를 선택합니다.

    봇을 프로비전하는 데 몇 분 정도 걸립니다.

  17. 리소스로 이동을 선택합니다.

    스크린샷은 Azure Portal의 리소스로 이동 옵션을 보여줍니다.

    Azure 봇을 만들었습니다.

    봇의 출력을 보여 주는 스크린샷

Teams 채널 추가

  1. 왼쪽 창에서 채널을 선택합니다.

  2. 사용 가능한 채널에서Microsoft Teams를 선택합니다.

    스크린샷은 채널의 Teams 선택을 보여줍니다.

  3. 확인란을 선택하여 서비스 약관에 동의합니다.

  4. 동의를 선택합니다.

    스크린샷은 서비스 약관의 동의를 보여줍니다.

  5. 적용을 선택합니다.

    스크린샷은 적용할 메시지로 Microsoft Teams를 보여줍니다.

메시징 엔드포인트를 추가하려면

  1. 출력 콘솔에서 개발 터널 URL을 메시징 끝점으로 사용합니다.

    스크린샷은 Visual Studio 출력 콘솔의 URL을 보여줍니다.

  2. 왼쪽 창의 설정에서 구성을 선택합니다.

  3. 메 시징 엔드포인트 를 형식으로 업데이트합니다 https://your-devtunnel-domain/api/messages.

    스크린샷은 API를 추가하는 메시징 엔드포인트를 보여줍니다.

  4. 적용을 선택합니다.

    Azure Bot Service에서 봇을 성공적으로 설정했습니다.

    참고

    Application Insights 계측 키에 오류가 표시되면 앱 ID로 업데이트합니다.

OAuth 연결 설정 추가

  1. 왼쪽 창에서 구성을 선택합니다.

  2. OAuth 연결 설정 추가를 선택합니다.

  3. 새 연결 설정에서 다음 세부 정보를 업데이트합니다.

    • 이름: 새 연결 설정의 이름을 입력합니다. 봇 서비스 코드의 설정에서 이름을 사용할 수 있습니다.
    • 서비스 공급자: 드롭다운 목록에서 Azure Active Directory v2를 선택합니다.
    • 클라이언트 ID: Microsoft 앱 ID를 업데이트합니다.
    • 클라이언트 암호: 클라이언트 암호 값을 업데이트합니다.
    • 토큰 교환 URL: 애플리케이션 ID URI를 업데이트합니다.
    • 테넌트 ID: 공통을 입력합니다.
    • 범위: User.Read를 입력합니다.

  4. 저장을 선택합니다.

    OAuth 연결을 설정하기 위해 추가된 값을 보여 주는 스크린샷.

앱 설정 설정

  1. 복제된 리포지토리의 appsettings.json 파일로 이동합니다.

    파일이 빨간색으로 강조 표시된 프로젝트 파일의 스크린샷appsettings.json.

  2. Visual Studio에서 appsettings.json 파일을 엽니다.

  3. 다음 정보를 업데이트합니다.

    • 봇의 Microsoft 앱 ID로 바꿉 "MicrosoftAppId" 니다.
    • 봇의 클라이언트 비밀로 바꾸"MicrosoftAppPassword"세요.
    • ngrok URL로 바꿉 "SiteUrl" 니다.
    • OAuth 연결 설정의 이름으로 바꿉 "ConnectionName" 니다.
    • 앱이 사용되는 테넌트의 테넌트 ID로 바꿉 "TenantId" 니다.
    • 봇의 Microsoft 앱 ID로 바꿉 "ClientId" 니다.
    • 봇의 클라이언트 비밀로 바꾸"AppSecret"세요.
    • 의 형식으로 바꿉 "ApplicationIdURI" 니다.api://*******.ngrok.io/botid-{AppID}

    입력한 값이 빨간색으로 강조 표시된 appsettings.json 파일의 스크린샷.

매니페스트 파일 설정

  1. 복제된 리포지토리의 manifest.json 파일로 이동합니다.

    매니페스트 파일이 빨간색으로 강조 표시된 매니페스트 폴더의 스크린샷

  2. Visual Studio에서 manifest.json 파일을 열고 다음과 같이 변경합니다.

    • ngrok URL로 바꿉 DOMAIN-NAME 니다.

    • 봇의 Microsoft 앱 ID로 바꿉 YOUR-MICROSOFT-APP-ID 니다.

      참고

      시나리오 [YOUR-MICROSOFT-APP-ID][DOMAIN-NAME] 에 따라 여러 번 발생할 수 있습니다.

    • 다음으로 api://*******.ngrok.io/botid-{AppID}바꿉 resource 니다.

      입력한 값이 빨간색으로 강조 표시된 manifest.json 파일의 스크린샷.

서비스 빌드 및 실행

서비스를 빌드하고 실행하려면 Visual Studio 또는 명령줄을 사용합니다.

  1. Visual Studio를 엽니다.

  2. 파일>열기> *프로젝트/솔루션...

    Visual Studio 파일 메뉴의 스크린샷 파일 메뉴 아래의 열기와 열기 아래의 프로젝트/솔루션이라는 메뉴 항목이 빨간색으로 강조 표시됩니다.

  3. csharp 폴더에서 App SSO Sample.csproj 파일을 선택합니다.

    앱 SSO Sample.csproj 파일이 빨간색으로 강조 표시된 프로젝트 파일의 스크린샷.

  4. F5 키를 눌러 프로젝트를 실행합니다.

  5. 다음 대화 상자가 나타나면 예를 선택합니다.

    예 옵션이 빨간색으로 강조 표시된 보안 경고의 스크린샷.

다음 메시지와 함께 웹 페이지가 나타납니다. 봇이 준비되었습니다!

봇이 준비되었습니다.

맨 위로 이동

  • Last updated on