If you’re writing asynchronous code – especially Javascript or Typescript – I have a story to share. It all started when I needed to initialize the Microsoft Teams JavaScript SDK for use in a web application I’m writing. It’s just a simple call in the browser:
await microsoftTeams.app.initialize();
This is all pretty easy, but the docs say you should only call initialize() once and my app is a bit complex, with multiple web components that are rendered in parallel, and two of them need to use the Teams SDK on page load. So how can I prevent initialize() from being called more than once while isolating code within my web components?
Singleton promises
To prevent the multiple calls, I reached into my bag of geeky developer tricks and made this little function so it would only be called once:
Perhaps you’ve noticed a technology called Markdown that’s been showing up in a lot of web sites and apps lately. This article will explain Markdown and help you get started reading and writing it.
The intent of this article is to teach you what you need to know to use JSON in typical IT, low-code, or JavaScript development scenarios. It’s organized in order from simple to complex; if you don’t need some sections, just skip over them; you can always come back and read them later!
I’ve started using the new Microsoft Teams toolkit, which is a Visual Studio Code extension and generator for Teams applications. One thing I noticed is a little challenge when creating tabs, and that’s due to the requirement to use SSL. The documentation is fine and explains how to trust your local project, but I found it a little painful since the certificates only last 1 month and there’s a different one for each project, so I need repeat the process frequently. Your teammates will need to do that as well.
Here is an alternative approach in which you create your own certificate authority and build certs from that so you can install just one root certificate across all your projects! Each teammate can have their own certs, so you can collaborate as much as you wish and nobody has to go installing certs.
NOTE: Did you know that the Teams Toolkit uses Create React App (CRA) for tabs? Create React App is a toolchain from Facebook (who created React in the first place) it’s very popular and well supported! If you need help, search on “Create React App” and you can find a plethora of helpful articles; this one helped me figure this out!
Step 1: Create and trust a certificate authority (CA)
This step only needs to be done once for as many projects as you wish. It assumes you already have Node.js installed, as required by the Teams Toolkit.
a. Create a safe/private folder somewhere and go there in your favorite command-line tool, and run these commands:
NOTE: 3650 is the number of days your certs will be valid; feel free to change it. You can use --help on mkcert to reveal other options, such as setting an organization name and location (the default org is “Test CA”) and customizing the domain names for your certificate (the default is “localhost,127.0.0.1”).
This will create a new Certificate Authority and a certificate that was issued from it. You should see 4 files:
File
Description
ca.crt
Certificate for your new CA
ca.key
Private key for your new CA
cert.crt
Certificate for use in projects
cert.key
Private key for use in projects
b. Now you need to trust the certificate for your new CA; by doing that any cert you create will be trusted with no additional action on your part.
On Windows
Double click on the ca.crt file and click “Install Certificate”.
Choose Local Machine and click next.
Select “Place all certificates in the following store” and then click the “Browse” button. Choose “Trusted Root Certification Authorities” click “OK” to close the dialog box, and then click “Next”.
Restart all instances of your browser to force it to re-read its trusted roots. If in doubt, reboot your computer.
On Mac
Double click on the ca.crt file, which should be found under /Users/[your-name]/. It will launch Keychain Access app.
Enter your password or use Touch ID when prompted.
The new certificate (in this case, “MyOrg”) should be added. Double-click it.
In a new window, expand the Trust section of the certificate details. Select “Always Trust” for every option.
Close the window. Enter your password or use Touch ID again if you are asked. Now the certificate is trusted.
Restart all instances of your browser to force it to re-read its trusted roots. If in doubt, reboot your computer.
On Linux
There are more steps on Linux as most browsers don’t use the operating system’s certificate store, and a tool called certutil is needed to modify the browsers’ cert?.db files. This article explains how to install your new root certificate on Linux.
Step 2 – Add the certs to your project
This is what you need to do for each project.
a. Create a new folder in your project folder (the same level as the package.json file) called .cert. Copy the cert.crt and cert.key files into this folder.
b. Modify your .env file to tell the local web server to use your cert:
c. Prevent saving the certs to your git repository by adding a line to the .gitignore file.
.cert
Azure Active Directory SSO Tabs
Tabs that implement Azure Active Directory Single Sign-On need to implement more than just a web page; they need to implement a web service to exchange the SSO token for an access token that the app can use to call downstream services such as the Microsoft Graph. This is explained in this blog article, or this one, more clearly than in the documentation.
When yo teams generates an SSO tab, this web service is hosted using the same web server as the page itself.
When the Teams Toolkit generates one, however, it creates a separate web service for the web service so there really are two endpoints that need to be SSL enabled. The web service is in a folder called api-server. To enable SSL here, follow these steps:
2. Immediately above the line app.get('/getGraphAccessToken') in server.ts or server.js, add these lines to allow the cross-origin call from the web page (port 3000) to the web service (port 5000):
const cors = require('cors'); app.use(cors({ origin: process.env.CORS_ORIGIN }));
3. Near the bottom of the same file, replace the line
app.listen(port);
with this code:
const fs = require('fs'); const https = require('https'); var privateKey = fs.readFileSync(process.env.SSL_KEY_FILE ); var certificate = fs.readFileSync(process.env.SSL_CRT_FILE);
Each team member needs to do Step 1 on their computer just once. When a developer starts working on a project they can simply copy their .cert folder into their project and go to work.
Many thanks to my colleague Tomomi Imura for documenting the Mac instructions and providing screen shots.
Do you have ideas on how to do this better, especially in a project team? Please chime in using the comments; thanks!
Microsoft Teams applications almost always need to call the Graph API, yet it’s not as easy as just calling a REST service. Most of the complexity has to do with getting an Azure AD access token, which is required on every Graph call to establish what, if anything, the caller is authorized to do.
Getting the access token requires an understanding of Teams, Azure AD, Graph, and sometimes other components like the SharePoint Framework or Bot Framework, yet each of these is documented separately and each one assumes the reader knows all the others. I literally get questions every day from frustrated developers trying to figure this out! (Yesterday I got 3!) In 2 1/2 years of Teams app development, this by far the most common source of difficulties.
I wrote these articles hoping they’ll assist developers in calling the Graph from Microsoft Teams. They’re also companions for my talk, “Calling Microsoft Graph from your Teams Application”, at the PnP Virtual Conference 2020.
This article will explain the options for building bots for Microsoft Teams which directly call the Microsoft Graph. Two options are considered, however it will be easier to decide because there’s really only one choice per scenario.
Microsoft Teams applications almost always need to call the Graph API, yet it’s not as easy as just calling a REST service. Most of the complexity has to do with getting an Azure AD access token, which is required on every Graph call to establish what, if anything, the caller is authorized to do.
Getting the access token requires an understanding of Teams, Azure AD, Graph, and sometimes other components like the SharePoint Framework or Bot Framework, yet each of these is documented separately and each one assumes the reader knows all the others. I literally get questions every day from frustrated developers trying to figure this out! (Yesterday I got 3!) In 2 1/2 years of Teams app development, this by far the most common source of difficulties.
I wrote these articles hoping they’ll assist developers in calling the Graph from Microsoft Teams. They’re also companions for my talk, “Calling Microsoft Graph from your Teams Application”, at the PnP Virtual Conference 2020.
This article will explain the options for building tabs for Microsoft Teams which directly call the Microsoft Graph. The same methods apply to Task Modules (modal dialog boxes).
Microsoft Teams applications almost always need to call the Graph API, yet it’s not as easy as just calling a REST service. Most of the complexity has to do with getting an Azure AD access token, which is required on every Graph call to establish what, if anything, the caller is authorized to do.
Getting the access token requires an understanding of Teams, Azure AD, Graph, and sometimes other components like the SharePoint Framework or Bot Framework, yet each of these is documented separately and each one assumes the reader knows all the others. I literally get questions every day from frustrated developers trying to figure this out! (Yesterday I got 3!) In 2 1/2 years of Teams app development, this by far the most common source of difficulties.
I wrote these articles hoping they’ll assist developers in calling the Graph from Microsoft Teams. They’re also companions for my talk, “Calling Microsoft Graph from your Teams Application”, at the PnP Virtual Conference 2020.
The first article is intended to explain the basics which anyone should understand before embarking on a Teams project that will call Microsoft Graph. This article is an optional deep dive that will go into more detail, either for the curious or to help in troubleshooting. The articles which follow target specific scenarios, such as calling the Graph from a tab or bot in Teams.
Microsoft Teams applications almost always need to call the Graph API, yet it’s not as easy as just calling a REST service. Most of the complexity has to do with getting an Azure AD access token, which is required on every Graph call to establish what, if anything, the caller is authorized to do.
Getting the access token requires an understanding of Teams, Azure AD, Graph, and sometimes other components like the SharePoint Framework or Bot Framework, yet each of these is documented separately and each one assumes the reader knows all the others. I literally get questions every day from frustrated developers trying to figure this out! (Yesterday I got 3!) In 2 1/2 years of Teams app development, this by far the most common source of difficulties.
I wrote these articles hoping they’ll assist developers in calling the Graph from Microsoft Teams. They’re also companions for my talk, “Calling Microsoft Graph from your Teams Application”, at the PnP Virtual Conference 2020.
This article will explain the basics. If all goes well, you can follow the step-by-step instructions in one of the sample apps and be done with it! Some day, the tooling may be improved to automate some of the steps.
I’m very excited to announce that today is my first day as a Cloud Developer Advocate at Microsoft, focused on Teams and Graph development! I wasn’t even looking, but a friend mentioned it and when I read the job description … well it was just too good of a fit.
Do you find yourself building Bots? Are you excited about integrating Microsoft Graph data into line of business applications? Are you extending Teams with your custom application? Are you spending time with SharePoint or Azure Active Directory? Find yourself excited about the latest Microsoft Graph schemas? … Use tools like curl and OAuth? Spend your free time pouring over the latest research on collaboration software?
Yes, yes, yes to all of the above! Me, pick me! And I’m thrilled that they did!
What is this new job?
The Cloud Advocates team is technically in the Azure organization, ultimately reporting to Scott Guthrie, which is prety exciting in itself. The goal (as well as I understand it on my very first day!) is to help developers succeed in the Microsoft cloud – all developers, from enterprises to partners to startups to students. Recently, the Cloud Advocates team expanded beyond Azure to also include Power Platform, and now Microsoft 365.
In this new role I expect to be:
Creating written content, videos, and samples that help people learn how to develop collaborative apps using Microsoft 365.
Speaking at conferences, meetups, coding boot camps, online forums, Twitter, Stack Overflow, Hacker News, and more.
Collecting and prioritizing product feedback and technical blockers with engineering.
So it’s not that different than what I was already doing, right? But on a larger scale. And some things I was doing on an extracurricular basis will become part of my day job, which is awesome.
I’m extremely thankful, especially in such challenging times, to have such a wonderful opportunity. Many thanks to all my colleagues in the One Commercial Partner Technical Team (OCPTT), and to all the awesome partners I’ve gotten to work with over the last 2 1/2 years. It’s been a lot of fun and I’ve learned so much from you all! I look forward to continuing to work with you as part of my new role.
And to all my friends in the wonderful SharePoint/M365 community – I hope to see more of you all than ever and work together on exciting new developer scenarios. The journey is only beginning!
While the world has been adapting to unprecedented changes due to the novel coronavirus pandemic, I’ve been counting my blessings. My family and I are all OK (so far at least!) and I have a job I love where I was already working from home. I was interviewed for the job using Skype for Business, and now my team works almost entirely using Microsoft Teams.
So at my manager’s suggestion, and in accordance with the internally published company policies on social media, my teammates and I decided to pitch in and share our favorite tips for working from home with Microsoft Teams. These are not official videos from Microsoft; they’re from some Microsoft employees acting as members of the community with a sincere desire to help out.
I made a playlist of our videos and am pleased to share it here. I’ll continue to add to this list over the coming weeks. All videos are short – 2-8 minutes – so if you’re busy but hungry for knowledge, you can just stop by for a snack-sized nugget and when you’ve had enough, put it aside and come back later.