CODEWITHSUNDEEP
javascriptreactjsauthenticationmicrosoft-graph-apimicrosoft-teams
7BitAscii
7BitAscii

Reputation: 27

MS Authentication in React

I'm working on a MS Teams app that uploads a new file to the connected Teams OneDrive through Graph-API, but I'm unable to get the authentication going for my app.

The documentation I have found on the subject doesn't mention react at all, and so I have been unable to get the authentication working (since im very new to javascript and react and need a clear example). If I could simply find a valid authorization token somewhere then I could just hardcode that and it would do the trick.

Otherwise, how do I get the user/app authentication to upload my file to the OneDrive through Graph-API?

Here is my code:

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount() {
    var myHeaders = new Headers();
    myHeaders.append("Content", "text/plain");
    myHeaders.append("Content-Type", "text/plain");
    myHeaders.append("Authorization", "Bearer {token}");

    var raw = "This works";

    var requestOptions = {
      method: 'PUT',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    }

    fetch("https://graph.microsoft.com/v1.0/sites/OpenSesameTest/Shared%20Documents/General/FileB.txt:/", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
  }
  
  render() {  
      return (     
        <form>
          <div>
            <label>Select file to upload</label>
            <input type="file"></input>
          </div>
          <button type="submit">Upload</button>
        </form>     
      );
    }
  }

export default Tab;

My fetch seems to be working correctly, apart from the authentication error it is giving me.

Upvotes: 1

Views: 648

Answers (1)

Ben Stobbs
Ben Stobbs

Reputation: 424

Follow the steps here.

Firstly, you need to register an application and generate a client secret in your Azure Active Directory. Then, you can use the app id and client secret in a POST request to https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token to get an authorization token.

You can then use this token in place of {token} in your code.

If you haven't already, you can register a sandbox Office 365 tenant for testing through the Microsoft 365 Developer Program.

Upvotes: 2

Related Questions