Search code examples
javascriptmicrosoft-teamsmicrosoft-graph-teamsmicrosoft-identity-platformmicrosoft-identity-web

How to authenticate user using Microsoft Share To Teams Button?

As described in this microsoft offcial doc, I have added share to teams button on my html page, but in pop-up that gets opened it gives error as

https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams#:~:text=pop%2Dup%20experience%3A-,Embed%20a%20Share%20to%20Teams%20button,js%20script%20on%20your%20webpage.&text=Add%20a%20HTML%20element%20on,in%20the%20data%2Dhref%20attribute.&text=Alternatively%2C%20if%20you%20want%20a,icon%2Dpx%2Dsize%20attribute

enter image description here.

So how to authenticate the user, do we have to call another API for this or anything....

When I searched I found out about Graph API, but don't know is this what I need or how to use it.

I have created this simple html page.

enter image description here

HTML Code

<html>
<head>
    <title>Hello Teams</title>
    <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
    </head>
    <body>
        <h1>Share to Teams</h1>
        <p>Please click on this icon below</p>
        <span
        class="teams-share-button"
        data-icon-px-size="64"
        data-href="https://learn.microsoft.com/en-us/graph/teams-concept-overview"
         data-preview="false"
        data-msg-text="Hello Avengers"
        data-assign-title="Demo Share"
        data-assign-instr="Demo Default Assignment Instructions"></span>
    
    </body>
    </html>
Solution

  • When I opened share to teams button html file in incognito window I am able to repro your issue.

    I have raised a bug for this issue and concerned team is working on it.

    Alternatively you can use below code and Please go through this.

    <div class="teams-share-button" data-href="https://learn.microsoft.com">
<a target="ms-teams-share-popup" onclick="window.open('https://teams.microsoft.com/share?href=https%3A%2F%2Flearn.microsoft.com&amp;referrer=learn.microsoft.com', 'ms-teams-share-popup', 'width=700,height=600'); return false" href="https://teams.microsoft.com/share?href=https%3A%2F%2Flearn.microsoft.com&amp;referrer=learn.microsoft.com">
<img alt="Share to Microsoft Teams" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...Zz4=" width="32" height="32">
</a>
</div>