Code Monkey home page Code Monkey logo

msteams-meetings-template's Introduction

page_type languages products description urlFragment
sample
typescript
office-teams
ms-graph
Microsoft Teams Meeting Link Template
msteams-meetings-template

Microsoft Teams Meeting Link Template

Welcome to the embeddable Microsoft Teams meeting link creator. With it, developers can provide an easy way, from within their solution, for users to create Teams meeting links and share them with participants.

Screenshot of the solution

The template provides an easy interface where users can:

  1. Sign in using their work or school account
  2. Create a Teams meeting link
  3. Copy the meeting information to share with others

Integrating this template allows you to enable scheduling directly from your platform, bringing the power of Microsoft Teams' online meetings to your users.

Contents

File/folder Description
src Sample source code
public Static assets
deploy Deployment template and scripts
.gitignore Define what to ignore at commit time
CONTRIBUTING.md Guidelines for contributing to the sample
README.md This README file
LICENSE The license for the sample

Prerequisites

This is a single page web app and requires only static web hosting to deploy the service.

We recommend hosting on your own app platform or service, creating an Azure storage account, or integrating the code directly into your own experience.

Setup

Register an Azure AD application

You'll need to register an app through the following process:

  1. Sign in to the Azure portal using either a work or school account or a personal Microsoft account.

  2. If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the Azure AD tenant that you want.

  3. Select New registration.

  4. When the Register an application page appears, enter your application's registration information:

    • Name - Enter a meaningful application name that will be displayed to users of the app.
    • Supported account types - Select which accounts you would like your application to support.
  5. When finished, select Register.

  6. Azure AD assigns a unique application (client) ID to your app, and you're taken to your application's Overview page.

    Copy the Application Id. This is the unique identifier for your app.

  7. Under Manage on the left-hand pane, click Authentication.

  8. CLick Add a platform and select Web.

  9. Under Redirect URIs, enter the following URIs:

    • http://localhost:3000/

    On the same page, under Implicit grant, make sure that both Access tokens and ID tokens checkboxes are checked.

    Click Save to save your changes.

  10. Under Manage on the left-hand pane, click API permissions and then Add a permission. Select Microsoft Graph and then Delegated permissions. Add the following permissions:

    • OnlineMeetings.ReadWrite (Read and create user's online meetings) permission.

Update the configuration

Change the following values in the msalApp.ts file:

  • clientId - Set this to the Application (client) ID of the AAD application that you registered

Available Scripts

In the project directory, you can run:

yarn install

Installs all the dependencies for the app.

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Frequently Asked Questions

Does the meeting scheduler need to have a Teams?

Meeting schedulers need to have a Microsoft Teams license. They need to be able to authenticate into the experience using the Microsoft account given to them by their school or work. Teams IT administrators also need to grant the scheduler with the ability to schedule meetings through Teams policies.

Do you need Teams to join the meeting?

If anonymous join has been enabled within the scheduler’s Teams tenant, users do not need a license to join a meeting. Meetings created through this application respect all Teams policies, settings and options applied by the scheduler and their IT administrator. Teams meetings can be joined over the web or any Teams client.

Where can I learn more about the Teams meeting experience?

Users

Admins

Do meetings that I schedule through this integration appear in my Outlook or Teams calendars?

No, meetings scheduled through the app do not appear in the scheduler’s Outlook or Teams calendar.

If you're a developer integrating this sample, you can create events that appear on the user's calendar using the Create calendar event API. You may find this example request helpful.

When will my Teams meeting expire?

Meetings scheduled through the application are regular meetings and following normal Teams meeting expiration timelines based on the date you enter when you create the meeting.

Feedback

Thoughts? Questions? Ideas? Share them with us on Teams UserVoice!

Please report bugs and other code issues here.

Legal notice

Please read the license terms applicable to this template here. In addition to these terms, by using this template you agree to the following:

  • You are responsible for complying with applicable privacy and security regulations related to use, collection and handling of any personal data by your app. This includes complying with all internal privacy and security policies of your organization if your app is developed to be sideloaded internally within your organization.

  • Microsoft will have no access to data collected through your app. Microsoft will not be responsible for any data related incidents or data subject requests.

  • Any trademarks or registered trademarks of Microsoft in the United States and/or other countries and logos included in this repository are the property of Microsoft, and the license for this project does not grant you rights to use any Microsoft names, logos or trademarks outside of this repository. Microsoft’s general trademark guidelines can be found here

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

msteams-meetings-template's People

Contributors

aosolis avatar beauzeaux avatar dependabot[bot] avatar joshmilo avatar microsoft-github-operations[bot] avatar microsoftopensource avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

msteams-meetings-template's Issues

Create meeting failed: Error: Request failed with status code 400

Hello, I've been stuck when creating a meeting using the app. Whenever I create a meeting, it will always says "Oops! Your meeting wasn't created successfully.". And when i open the console, it says "Create meeting failed: Error: Request failed with status code 400". I followed the instruction, still no luck. Any suggestion what I've been doing wrong?

Not playing nicely with Microsoft Edge Legacy or IE11

One of our lecturers was having troubles adding a Teams meeting link to Moodle (using Atto). The iframe was loading blank.
image

In the console there's an error "Object doesn't support this action" which highlights a line of code in translate.ts
image

And in yui_combo
image

It would be good to get this working, as Moodle is still officially supporting IE11 (<= M3.9)
thanks

Access scheduled time of meeting

Hello,
currently, only the Meeting URL can be retrieved from the App. Is it possible to retrieve the scheduled date of the meeting as well? We are using this as part of a Moodle plugin and would like to add the scheduled date to the Moodle calendar.
Kind regards

Access meeting information after it is scheduled

Hi there,
Can I retrieve meeting ID of the meetings which are scheduled by this tool?

I want to add some additional features for the meetings that are scheduled by this tool.
For that purpose, I want to access the meeting information by Graph API.

As far as I understand, this tool creates a meeting by using create onlineMeeting API.
If I know the ID which is returned by this API, I may call Get API and retrieve good amount of information.

However, I don't see that information is included in embedded link, or I do not know how to reverse lookup from meeting URL to ID. And I don't think Graph API does not provide a method to 'list' all meetings.

I wonder if you are saving ID somewhere so that I can access it and call graph API further based on that ID.

Finally, thank you for providing this tool. This tool looks really handy as far as I tried on Canvas.

apis for teams meetings

we use angular and nodejs. Not familier with react. is there a place where i can see the REST apis required to create the meeting? could not find that part of code in the sample as i am not familiar with react

Authentication tenant needs to be configured

I run yarn startand go to http://localhost:3000/. I click the Login button. I am asked for my username and password and the 2 factor (authenticatior app). After this it returns to the login page an nothing happens.
If I click the second time only the 2nd factor is asked but still nothing happens. Interestingliy the checkbox Remember for 14 days is unchecked again.

My system:

  • Mac OS 10.15.6
  • node 14.12.0
  • yarn 1.22.5
  • Microsoft Edge 85.0.564.68

xml config file for LMS

If I wanna make a LTI integration for a LMS, it asks for an XML configuration file url... does anyone have such file?

Thanks.

yarn build fails after fresh yarn install

Ran into the following error when trying to build from scratch:

yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Failed to compile.

/siteroot/src/RootReducer.ts
TypeScript error in /siteroot/src/RootReducer.ts(9,27):
Namespace '"/siteroot/node_modules/@types/history/index".History' has no exported member 'PoorMansUnknown'.  TS2694

     7 | export interface AppState {
     8 |   meeting: MeetingState;
  >  9 |   router: History<History.PoorMansUnknown>;
       |                           ^
    10 | }
    11 | 
    12 | export function createRootReducer(history: History) {


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I think it's related to this commit DefinitelyTyped/DefinitelyTyped@cc251bd#diff-dcca2fdd8c0717a0e2e771661ec424a8a81899b5d35ec0d33afd7c588ccd1778 where they removed PoorMansUnknown.

As a work around I installed @types/[email protected] , but the interface should probably be updated to work with the new version.

Error authenticating with resource

Hi there,

I was trying to get this up and running and ran into this issue. I followed the readme. Made sure I have the OnlineMeetings.ReadWrite permission selected. Yet when I try to create a room, I get this error on the POST to https://graph.microsoft.com/beta/me/onlineMeetings:

{
  "error": {
    "code": "AuthenticationError",
    "message": "Error authenticating with resource",
    "innerError": {
      "request-id": "<redacted>",
      "date": "2020-04-07T21:48:45"
    }
  }
}

Have any ideas what I have missed in setting this up?

Tried changing the endpoint from https://graph.microsoft.com/beta/me/onlineMeetings to https://graph.microsoft.com/v1.0/me/onlineMeetings and still no love.

Thanks in advance!
-bfcoder

Integrate with Canvas LMS

Hi everyone,
I'm trying to integrate Teams with Canvas LMS, I already registered it in Azure but I need help to do the integration with the Canvas.

Thanks.

Yarn install fails

Yarn install fails with

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=8.10". Got "6.17.1"

This seems to be fixed if you use:
yarn install --ignore-engines

Failed to compile related to react-intl

Hi,

I've been unable to yarn install with latest commit:

Failed to compile
./node_modules/react-intl/node_modules/intl-messageformat/lib/formatters.js
Attempted import error: 'convertNumberSkeletonToNumberFormatOptions' is not exported from 'intl-messageformat-parser'.

Tried to solve it with newer react-intl version but receive additional errors (I'm a newbie in react).

Best!
LUIS

Create online meeting with API

I am trying to create online meeting using graph API and msteam-meeting-template. But when signing-in with outlook 365 user the meeting create is failed. Please help me out with how to Sign-in with multiple personal account and create online meeting with MS teams.

Latest master fails to compile

The latest master (ce09f99) fails to compile (on yarn start)

Failed to compile.

/Users/macbookpro/VC/msteams-meetings-template/src/RootReducer.ts
TypeScript error in /Users/macbookpro/VC/msteams-meetings-template/src/RootReducer.ts(9,27):
Namespace '"/Users/macbookpro/VC/msteams-meetings-template/node_modules/@types/history/index".History' has no exported member 'PoorMansUnknown'.  TS2694

     7 | export interface AppState {
     8 |   meeting: MeetingState;
  >  9 |   router: History<History.PoorMansUnknown>;
       |                           ^
    10 | }
    11 |
    12 | export function createRootReducer(history: History) {

My system:

  • Mac OS 10.15.6
  • node 14.12.0
  • yarn 1.22.5

Yarn install fails

Yarn install fails with

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=8.10". Got "6.17.1"

This seems to be fixed if you use:
yarn install --ignore-engines

Login issue in ms teams react build

I already do the yarn build and deployed the build files on my server. Also already added the ms teams URI on Azure AD. The problem is login is never-ending. When I inspected the app, these are the errors I've got:

Login failed: ClientAuthError: User cancelled the flow.
at t [as constructor] (AuthError.ts:26:9)
at new t (ClientAuthError.ts:108:9)
at Function.t.createUserCancelledError (ClientAuthError.ts:174:16)
at WindowUtils.ts:46:44

Hoping for the quick help. Thank you so much!

no citation option on chat texts

I haven't seen the citation option on the chats and/or other sections of MS Teams app

is that normal?

skype has it // is a quite common action in most apps, and it is quite useful also

Deployment Documentation

Hi

It's unclear to me how to deploy this.

Do I upload as a custom app in Teams? Because that's not working for me with the manifest.json.

Do I use the azuredeploy.json somehow?

How do I ultimately make this work in Teams?

Using webpack 5

In translate.ts is this line of code:

const sku = process?.env?.REACT_APP_SKU ?? 'edu';

and I'm trying to upgrade to webpack 5 locally (we have a copy of this code since we had to customize it for Blackboard).

process is a Node variable, so how does this work in a React app that runs in the browser?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.