How to load Component in App interface of teams apps

%3CLINGO-SUB%20id%3D%22lingo-sub-1577366%22%20slang%3D%22en-US%22%3EHow%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1577366%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EI%20have%20developed%20one%20task%20module%26nbsp%3B%20in%20Teams%20Apps%20which%20help%20me%20to%20log-in%20the%20user.%20After%20Successful%20logged-in%2C%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EsubmitTask%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3Bmethod%20is%20being%20called%20for%20closing%20task%20module.%20in%20mean%20while%20I%20am%20also%20fetching%26nbsp%3B%20%26nbsp%3Bdata%20from%20Back-end%26nbsp%3B%20to%20display%20App%20interface%20after%20successful%20logged-in.%20but%20data%20is%20updating%20in%20task%20module%20not%20in%20App%20interface.%20Please%20help%20me%20what%20snap%20code%20is%20required%20for%20this%20issue%20in%20ReactJS%20and%20typescript.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1577366%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1578159%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1578159%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754375%22%20target%3D%22_blank%22%3E%40ManikantSingh%3C%2FA%3E%26nbsp%3B-%20Are%20you%20trying%20to%20display%20the%20result%20using%20bot%20or%20tab%20on%20submit%20Could%20you%20please%20explain%20your%20scenario%20in%20more%20detail%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1580112%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1580112%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F590590%22%20target%3D%22_blank%22%3E%40Nikitha-MSFT%3C%2FA%3E%26nbsp%3B%20Thank%20you%20for%20replying.%20Below%20is%20exactly%20requirement%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%26nbsp%3BRequirement%3A-%20Show%20one%20tab%20along%20with%20login%20button%26nbsp%3B%20in%20App%20interface.%20When%20click%20on%20log-in%20button%2Cshow%20one%20task%20module%20for%20user%20log-in%20and%20when%26nbsp%3B%20click%20on%20submit%20on%20user%20log-in%20task%20module%2Cclose%20the%20pop-up%20and%20update%20data%20in%20App%20interface.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EWhen%20log-in%20API%20is%20responding%20session-id%2C%20I%20am%20calling%20another%20API%20to%20get%20data%20using%20session-id%20which%20is%20used%20to%20show%20in%20App%20interface.%20Now%20this%20data%20is%20updating%20in%20user%20log-in%20task%20module%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1586481%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1586481%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754375%22%20target%3D%22_blank%22%3E%40ManikantSingh%3C%2FA%3E%26nbsp%3B-%20Are%20you%20trying%20to%20authenticate%20user%3F%20If%20so%20could%20you%20please%20check%20this%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2Fmicrosoft-teams-sample-auth-node%2Ftree%2Fmaster%2Fsrc%2Fviews%2Ftab%2Fsimple%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Esample%3F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1586714%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1586714%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F590590%22%20target%3D%22_blank%22%3E%40Nikitha-MSFT%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BThank%20you%20for%20replying.%20I%20did%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2Fmsteams-tabs-sso-sample-nodejs%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FOfficeDev%2Fmsteams-tabs-sso-sample-nodejs%3C%2FA%3E%26nbsp%3B%20SSO%20login%20type%20of%20authentication.%20Now%20please%20tell%20me%20how%20to%20generate%20sessionId%20for%20calling%20API%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1588405%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1588405%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754375%22%20target%3D%22_blank%22%3E%40ManikantSingh%3C%2FA%3E%26nbsp%3B-%20To%20call%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fapi%2Fresources%2Fteams-api-overview%3Fview%3Dgraph-rest-beta%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EGraph%20APIs%3C%2FA%3E%20you%20need%20access%20token.%20You%20can%20get%20the%20access%20token%20by%20calling%20following%20method%3A%3C%2FP%3E%0A%3CH3%20id%3D%223-get-an-authentication-token-from-your-client-side-code%22%20class%3D%22heading-anchor%22%20id%3D%22toc-hId-1202742419%22%20id%3D%22toc-hId-1202742419%22%20id%3D%22toc-hId-1202742419%22%20id%3D%22toc-hId-1202742419%22%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Fauthentication%2Fauth-aad-sso%233-get-an-authentication-token-from-your-client-side-code%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EGet%20an%20authentication%20token%20from%20your%20client-side%20code%3C%2FA%3E%3C%2FH3%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Evar%20authTokenRequest%20%3D%20%7B%20successCallback%3A%20function(result)%20%7B%20console.log(%22Success%3A%20%22%20%2B%20result)%3B%20%7D%2C%20failureCallback%3A%20function(error)%20%7B%20console.log(%22Failure%3A%20%22%20%2B%20error)%3B%20%7D%2C%20%7D%3B%20microsoftTeams.authentication.getAuthToken(authTokenRequest)%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3BAlso%2C%20please%20take%20a%20look%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Fauthentication%2Fauth-aad-sso%23asking-for-additional-consent-using-the-auth-api%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EAsking%20for%20additional%20consent%20using%20the%20Auth%20API.%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1600789%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1600789%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F79135%22%20target%3D%22_blank%22%3E%40Wajeed%20Hanif%20Shaik%3C%2FA%3E%26nbsp%3B%20Thank%20you%20for%20replying%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20pass%20session%20Id%20parameter%20in%20API%20called%20to%20identify%20user%60s%20session%20in%20web%20application%20project%3CBR%20%2F%3EFor%20Teams%20Apps%2C%20how%20to%20generate%20this%26nbsp%3B%20sessionId%26nbsp%3B%20to%20integrate%20with%20web%20application%20project%20when%20I%20am%20using%20SSO%20login%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1600795%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20load%20Component%20in%20App%20interface%20of%20teams%20apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1600795%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754375%22%20target%3D%22_blank%22%3E%40ManikantSingh%3C%2FA%3E%26nbsp%3B-%20%3CSPAN%3EIn%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EToken-based%20Authentication%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3Bno%20session%20is%20persisted%20server-side%20(stateless).%26nbsp%3BYou%20can%20pass%20your%20access%20token%20which%20then%20can%20be%20used%20to%20call%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fauth-v2-user%3Fcontext%3Dgraph%252Fapi%252Fbeta%26amp%3Bview%3Dgraph-rest-beta%234-use-the-access-token-to-call-microsoft-graph%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGraph%20APIs%3C%2FA%3E.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

I have developed one task module  in Teams Apps which help me to log-in the user. After Successful logged-in, submitTask method is being called for closing task module. in mean while I am also fetching   data from Back-end  to display App interface after successful logged-in. but data is updating in task module not in App interface. Please help me what snap code is required for this issue in ReactJS and typescript.

7 Replies
Highlighted

@ManikantSingh - Are you trying to display the result using bot or tab on submit Could you please explain your scenario in more detail?

Highlighted

@Nikitha-MSFT  Thank you for replying. Below is exactly requirement

 

 Requirement:- Show one tab along with login button  in App interface. When click on log-in button,show one task module for user log-in and when  click on submit on user log-in task module,close the pop-up and update data in App interface.

 

When log-in API is responding session-id, I am calling another API to get data using session-id which is used to show in App interface. Now this data is updating in user log-in task module 

Highlighted

@ManikantSingh - Are you trying to authenticate user? If so could you please check this sample?

 

Highlighted

@Nikitha-MSFT 

 Thank you for replying. I did https://github.com/OfficeDev/msteams-tabs-sso-sample-nodejs  SSO login type of authentication. Now please tell me how to generate sessionId for calling API

Highlighted

@ManikantSingh - To call Graph APIs you need access token. You can get the access token by calling following method:

Get an authentication token from your client-side code

var authTokenRequest = { successCallback: function(result) { console.log("Success: " + result); }, failureCallback: function(error) { console.log("Failure: " + error); }, }; microsoftTeams.authentication.getAuthToken(authTokenRequest);

 Also, please take a look at Asking for additional consent using the Auth API.

Highlighted

@Wajeed Hanif Shaik  Thank you for replying

 

I pass session Id parameter in API called to identify user`s session in web application project
For Teams Apps, how to generate this  sessionId  to integrate with web application project when I am using SSO login

Highlighted

@ManikantSingh - In Token-based Authentication no session is persisted server-side (stateless). You can pass your access token which then can be used to call Graph APIs.