Demo - Code a bot for Microsoft Teams that supports SSO

Key Takeaways

in the last video you saw how we created a microsoft teams app and configured it to serve up a bot that's going to implement sso so that we can obtain an access token for microsoft graph so what i'm going to do is i'm in the server folder we're going to create a new folder here called sso bot and in this we're going to create a new file here a new folder in this called helpers so inside the helpers file folder i'm going to create a new file here called sso oauth helper.ts and in this i'm going to go ahead and just paste in a bunch of code now let me explain what this code is doing the sso auth helper class contains the following two methods it contains a method here called should process exchange token this determines if the activity sign in slash token exchange should be processed by this caller that's defined right here in this value that we're importing in as you can see on line six above token exchange operation name is really just a constant that is part of the bot builder package and that's that refers to the actual activity uh called sign in slash token exchange um if this does exist if this is if this is present for this activity it calls the other method exchange token that you see here so what does exchange token do well this attempts to retrieve an access token from the bot's oauth connection configuration in the bot framework registration this is done by specifying the connection name that we've specified and that is done if you scroll down a little bit here we can see the connection string that we have listed right here on the token exchange request now if this fails then the bot isn't able to exchange the token so the bot notifies the sender that the precondition failed and the bot then uses this to prompt the user to consent to the sign in prompt and we're going to see that when we actually run this the first time now the next thing is i need to add another helper for obtaining data from microsoft graph so i'm going to create a new file here called the ms graph helper dot ts and i'm going to go ahead and paste in some code into this this code after initializing the graph client by setting the access token that we can see right here that's using all the requests the helper class includes two methods to retrieve the currently signed in user get his details or her details and the most recent emails that that person has received by submitting the request using the graph client and returning those values back so within the sso bot folder i'm going to create a new folder here for dialogs these are going to hold all the dialogues and prompts that are going to be used by our bot so the first one is going to be a logout dialogue.ts this is going to serve as the base dialog for our bot all the other dialogues are going to inherit from this one ultimately so we're going to paste some code in here let me explain what this does what this dialog does is it checks it it performs a check for the text log out so you can see here we have this interrupt method so when the dialog begins or when it continues it's going to call our interrupt function so what that does is that's going to then grab the contents out of the message it's going to strip everything out of it and it's going to look for just the text of logout and lowercase or uppercase so it's going to pull that out if it finds that string what it's going to do is it's going to sign out the user out of the session and cancel any pending dialogues as you see here so send an activity it says that you've been signed out and then it cancels all dialogs otherwise it just returns a null value and that's where if we don't get a result then we continue on with the existing dialog request that we have now the next dialog i'm going to create here is called the main dialog so this is going to serve as the base dialog for our bot this dialog is going to inherit from the log out dialog that you see here it's going to inherit from the logout dialog and serve as the main router for our bot so inside of the constructor for this one it adds two dialogues to the bot the first dialog that it's adding that you see here is the sso auth prompt and we're going to build that in just a minute this is going to add extra logic to implement the s implement single sign-on for the oauth prompt that is the dialogue that is included out of the box with the bot framework the other one that it's going to add is a waterfall dialogue and this area adds a series of dialogues and steps to implement the user experience once the user has completed the sso process by signing into notice the last line in our constructor scroll down a little bit here notice the last line in our constructor is going to set the dialog the default dialog to our waterfall that's the primary user experience of our bot that is you know provided the user is actually signed in and then i want you to also take notice of another method here called display microsoft graph data step this has been added to the waterfall dialog so this this one that you see here if i scroll up and look at the waterfall dialog you can see that after the prompt that's where this step is being added this step is going to use the access token that was obtained from the bot framework support for oauth to support requests to microsoft graph so now let's implement the prompt dialog that's going to wrap the bot framework provided oauth prompt class so that we can add support to it so in this dialogues folder i'm going to add a new file here called sso oauth prompt.ts and in this file i need to implement just a single method on the base oauth prompt class this so we're inheriting from the base oauth prompt and we're implementing just the continue dialog method this method is first going to check to see if the bot has previously exchanged the id token but it's been provided by microsoft teams and saved it to the bot's cache if it has it's going to stop the current dialog otherwise the bot will prompt the user asking them to sign in and complete any step up authentication requirements for example if they have to go through a multi-factor authentication at this point i can't implement the main part of our bot the dialog bot class i can implement the main part of our bot the dialog bot class so i'm going to create a new file here inside of our bot called dialog bot this is the main dial the main bot class that we're going to use this serves as the base for our bot so let me go ahead and place some code in let's explain what's going on notice the constructor of the dialog box class accepts the instance of a main dialog that our bot's going to pass into it so when the bot receives a message it's going to run main dialog now the last step in creating our bot is to implement the bot itself so i'm going to add a new file here to our sso bot folder called sso bot.ts and we'll paste some code in here now notice the constructor of the sso bot it extends the dialog bot that i just created and it creates an instance of the main dialog and passes that into the base class recall the base class dialog bot that accepts a dialogue in its constructor so this is how our dialogs are being loaded into the bot the two other events that you see here in this class or the two other methods in this class handle teams sign in token exchange and handle teams sign in verify state these handle when two different invoke activities of type sign in token exchange and sign and verify state are received by our bot the handler for the sign in token exchange activity uses the helper we previously created to process the token that is received if it should be processed the token should only be processed once while the response is sent to every microsoft team's instance where the user is signed in there could be multiple but it should only be processed one time