Develop Reference

Getting an authentication token for a Microsoft Custom App

I have been struggling with the same issue for a while now, i'm trying to upload a file to my MS Teams OneDrive through the Graph-API but i dont have the authorization for it.
Reading the documentation to get my Token from Microsoft has so far done nothing for me as i am new to Javascript and React, so im having extreme difficulty getting it to work right. Can anyone give me an example of what the code looks like to get the authorization token that i need to access the Graph-API?
I have registered my Microsoft app and made a client-secret that i need in order to fetch the token.
Thank you in advance!
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));
}
componentDidMount() {
var myHeaders = new Headers();
myHeaders.append("Content", "text/plain");
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Authorization", "Bearer {token}");
var raw = "Fetch my token";
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
}
fetch("https://login.microsoftonline.com/openimstest/oauth2/v2.0/c7094fc6-9d30-429d-bb66-dd389295b426", 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;
P.S.
I know im not actually using teh file input on my page but i want to do it as simple as possible at first, i'll be happy just to succesfully upload a file through the Graph-API at the moment.
Once again thank you!
EDIT:
The the fetch im trying to use in order to get the token:
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: 'GET',
grant_type: 'Unsure where to find my client_credentials',
client_id: 'my client-id',
scope: 'https://graph.microsoft.com/.default',
client_secret: 'my client-secret',
headers: myHeaders,
body: raw,
redirect: 'follow'
}
fetch("https://login.microsoftonline.com/openimstest/oauth2/v2.0/token", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
Im unsure where to find my client_credentials or what to put there. Also there is probably something else wrong with the fetch im trying to use.

Microsoft has made a library specially for getting tokens in single pages apps. It’s called #azure/MSAL-browser They even made a package specially for react. msal-react this page shows a getting started on how to use this in react. This package will handle the token request for you.
No client credentials flow
You can do this using client secret by following the steps below. Before you continue, Note that you should not be be using the client credentials flow on the SPA Reactjs application because there is no way to secure the client secret.
The other answer should had left it with this statement. Let me explain that. The client credentials flow is for application that run server side without user interaction. Anyone using this flow in a client app is using it incorrectly! So I’m my opinion we should not educate people in how it might be possible to misuse an authentication flow.

Have a look at this Single sign-on (SSO) support for tabs.
Follow document for creating app registration and setting up expose an API part.
Add route for all these file in your app. You might use the same route as mention in the app I shared below for folder structure.
<Route exact path="/signin" component={SignInPage} />
<Route exact path="/signin-simple-start" component={SignInSimpleStart} />
<Route exact path="/signin-simple-end" component={SignInSimpleEnd} />
Next have a look at this folder structure-> signin. Here you will see three files
sign-in.tsx -> This file route, you need to give in the manifest. It has the button that starts the authentication flow. Also in this file only, you need to give the route of the page you want to show when authentication is successful.
successCallback: () => {
history.push("/yourPage");
}
sign-in-start.tsx -> Here you need to call the authentication endpoint. So in the app that I shared we have backend with C# and from there we get the URL endpoint on the line 22 and push it in history. What you can do is you can directly create that URL(see below) and assign it to variable result(replacing the code from line 22 to 24 with this).
var result = https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize?client_id=<client_id>&response_type=id_token token&redirect_uri=https://<app-domain>/signin-simple-end&response_mode=fragment&scope=<required-scope>&state=12345&nonce=abcde&login_hint=<user-principal-name>;
document.location.href = result;
sign-in-end.tsx -> In this file we get all the token that we have asked in the last step. So, in order to get access token you need to add this code
if (hashParams["access_token"]) {
localStorage.setItem("auth.result", JSON.stringify({
accessToken: hashParams["access_token"]
}));
}
in useEffect where we are getting other tokens. The above code checks if we get the access_token and set it in localStorage later on you can get it with localStorage.getItem("auth.result").
You might need to do little manipulation on localStorage.getItem("auth.result") in order to get the token.
Above method get us the delegated Graph API permission, so you need to give the delegated permission in your app according to your graph call.

You can do this using client secret by following the steps below.
Before you continue, Note that you should not be be using the client credentials flow on the SPA Reactjs application because there is no way to secure the client secret.
Note that If you have to use client secret there then you should remove the interaction with Graph to the serve side and then secure your app using some other way see - this Tutorial: Call the Microsoft Graph API in a Node.js console app for Nodejs Secured Daemon Service authentication
For getting access token using Client Secret.
Add the required application permission on Azure AD for uploading the file to onedrive. In this case Files.ReadWrite.Al. This permission will require admin approval.
Acquire an access token from Azure AD using the request below in fetch format.
curl --location --request GET 'https://login.microsoftonline.com/tenant-id/oauth2/v2.0/token'
--header 'Content-Type: application/x-www-form-urlencoded'
--data-urlencode 'grant_type=client_credentials'
--data-urlencode 'client_id=client-id'
--data-urlencode 'scope=https://graph.microsoft.com/.default'
--data-urlencode 'client_secret=client-secret'
As I said, client secret will not be secure when used in the Single Page Reactjs application.
The better option is to use auth code flow which will be more secure in your SPA case. Follow this for reactjs Tutorial: Sign in users and call the Microsoft Graph API from a React single-page app (SPA) using auth code flow
This will just require:
Adding Files.ReadWrite as delegated permission on AAD
Signing in with a user that has access to the teams team and authenticating as them.
Call PUT /groups/{group-id}/drive/items/{item-id}/content where the group id is the team id.

How can access google calendar of user and edit it without asking for user permisssion again and again

On my website, I am asking for google calendar access. I can edit the user calendar but, I don't want to ask for user permission, again and again, so once the user authorized and give access to google calendar, I can edit it anytime until the user revokes the access. Should I implement it on the frontend or the backend and how? I checked few answers where they mention we can use a service account but, it is not clear how can I edit or read the individual user's calendar events and how can I remove it once the user revokes access. This question was deleted because code was missing so adding code below.
I tried this so once user login I get access token and I am using it
window.gapi.load("client:auth2", () => {
window.gapi.client.setApiKey("api_key");
window.gapi.client.load("https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest")
.then(() => {
window.gapi.auth.setToken({ access_token: access_token })
window.gapi.client.calendar.events.insert({
"calendarId": "id",
'resource': event
}).then((res) => {
console.log("calendar data res "+JSON.stringify(res))
}).catch(err => console.log("error getting calendar data "+JSON.stringify(err)))
}).catch(err => console.error("Error loading GAPI client for API", err) )
})
but once access token expires how can I get a new access token( I don't want to show login popup to the user again and again. I want to know how can I do it using refresh token on client-side).

You can't get a refresh token on the client-side without exposing your secret key to the public.
You can create an endpoint that accepts oAuth code and return the token, save the refresh token for later. You set up a corn job that checks for expired token and refreshes them.
Every time the user accesses your app, you grab a fresh token from the server and proceed to work normally.
As per Google guidelines. You do POST to https://oauth2.googleapis.com/token. Assuming your server-side stack is in Node.js, you do something like this using an HTTP client like Axios:
const Axios = require('axios');
const Qs = require('querystring');
const GOOGLE_CLIENT_ID = 'abc';
const GOOGLE_CLIENT_SECRET = '123';
let refreshToken = getFromDataBase(); // should be stored in database
Axios.post('https://oauth2.googleapis.com/token', Qs.stringify({
client_id: GOOGLE_CLIENT_ID,
client_secret: GOOGLE_CLIENT_SECRET,
refresh_token: refreshToken,
grant_type: 'refresh_token'
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then(({ data }) => console.log(data.access_token)) // new token that expires in ~1 hour
.catch(console.log)

Firstly, do you (a) want to update the calendar when the user is not logged in, for example in response to an external event? ... OR ... do you (b) only want to update the calendar from within a browser session?
If (a), then you need to ask the user for offline access which will give you a Refresh Token , which you can securely store on a server and use whenever you need to. (Forget all about Service Accounts).
If (b), then you need the following pieces of information :-
When the access token expires, request access again, but add the flag prompt=none. This will give you a fresh Access Token without the user seeing any UX.
Do this in a hidden iframe so that it is happening in the background and is invisible to the user. Your iframe will therefore always have an up to date Access Token which it can share with your app via localStorage or postMessage.

Correct way to implement Github OAuth in client-side application?

I'm adding OAuth into my github clientside application. I have the final auth token being returned successfully, but I feel like I hacked my workflow.
Current Architecture Flow:
1) User clicks href link from component to hit the initial OAUTH route
2) Retrieve token from Github for user identity
3) Github redirects to my server route and my server route sends an additional POST to the /access_token request page with the client_secret, id and code from the above step.
4) Finally I redirect from the above route back to my UI and set a URL parameter in the process
5) In the componentDidMount I strip the final auth token from the window.url and set it in my state
Note: I plan on storing the token in Redux later, but this is the base
level as to what I'm doing.
Actual Code
Server
app.get("/login", async (req, res) => {
// Get the identity token from GitHub origin
return await axios
.post("https://github.com/login/oauth/access_token", {
code: req.query.code,
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET
})
.then(async resp => {
// Little hack to parse out the query params into an object
let data = await url.parse("http://parse.com?" + resp.data, {
parseQueryString: true
}).query;
res.redirect(
url.format({
pathname: Environment.getUrl(),
query: {
token: data.access_token
}
})
);
});
});
UI Authentication Component
export default class GithubAuthentication extends React.Component {
state = {
authToken: "DATA"
};
componentDidMount() {
let currUrl = window.location.href;
this.setState({ authToken: currUrl.split("token=")[1] });
}
render() {
return (
<React.Fragment>
<a href="https://github.com/login/oauth/authorize?client_id=b5cd37110eb31620aad7">
{this.state.authToken ? "Logout" : "Login With Github"}
</a>
<span>{this.state.authToken}</span>
</React.Fragment>
);
}
}
Questions
1) The one thing I wasn't able to figure out was to make the href link a controlled component and actually hit the auth URL with something like SuperAgent or Axios. Instead, I'm forced to use this href link, not sure why.
2) Is this actually a sensible flow for getting the final auth token?

Regarding question 2, from a security standpoint, it is better to keep access token on server-side and never send the token to client-side.
I couldn't find good written resources, so I'd like to share this video which sums up how to deal with access token clearly.
https://www.youtube.com/watch?v=CHzERullHe8&list=PL78z2Z3ZApYcKb-GDQt6ikdN2EDqmKJrT&index=12&t=419s
Take away from the video
We still don't have a good way to securely store the token on the browser
By storing the access token on the server-side and using session cookie, you can minimize the risk of access token being compromised.
To actually implement this flow, you can use cookie-session to generate session. You can also use github-passport to simplify the implementation.
https://github.com/expressjs/cookie-session
https://github.com/jaredhanson/passport-github

1) I think you should reorganize your app so that you can use a component instead of an href link. You would know whether you're authenticated or not based on the value on the state property. This value can be passed as prop to your component which is where you would put the logic of authenticated ? "Logout" : "Login" or anything else.
2) the flow is OK but you have to make sure you do server side validation of the token since it's easy to just flip the switch on the UI and the pretend you're authenticated very easily.

Creating a YouTube playlist with React using Google's API

I would like to create a YouTube playlist on a users account, but I have struggled to authenticate a POST to the YouTube v3 api.
I'll start by showing how far I have got with this problem.
YouTube API Documentation
The Youtube API Documentation provides details on creating a playlist, and has a working example in the API Explorer
I entered the following code into the request body:
{
"snippet":
{
"title":"Test Playlist"
}
}
This successfully created a playlist on my YouTube account with the same title. So from this I could tell that, a title was required within the body and it would require OAuth 2.0 authentication (an error is displayed if it is not enabled) using one the scopes: youtube, youtube.force-ssl, youtubepartner.
First attempt in react
The First thing I tried was similar to this:
fetch('/youtube/v3/playlists', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer' + api.youtube,
},
body: JSON.stringify({
"snippet":
{
"title":"Test"
}
})
}).then(response => response.json()).then(data => {
console.log(data)
})
api.youtube contains my YouTube api key.
Most of the formatting for this came from another API I have in the same program for getting data from spotify which works.
The response I got from this would say "Login failed" or "Authentication Error" (something along those lines)
Anyway, this is relevant because I know that my first hurdle is getting authentication.
Authentication
The YouTube API Documentation contains a guide titled Implementing OAuth 2.0 Authorization I followed the guide for client side web apps.
The first thing I noticed is that they are using a library, I found this on npm under googleapis and installed it.
When I tried to call this in React using
const {google} = require('googleapis');
I won't get deep into the error but react said "Can't convert undefined to object" and found an issue which said that googleapis is intended for server side not client side, I tried building the react app and putting it on herokuapp but got the same error. Someone else suggested using gapi-client on npm which is a node wrapper for googleapis.
The next thing I did was try the example on the npm page, which is very similar to the google example for configuring the client object. I have it so the import part and function are at the top of my app.js and then the gapi.load part activates after a button is pressed (this could be useless info but w/e)
import gapi from 'gapi-client';
//On load, called to load the auth2 library and API client library.
gapi.load('client:auth2', initClient);
function initClient() {
gapi.client.init({
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
clientId: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/drive.metadata.readonly'
}).then(function () {
// do stuff with loaded APIs
console.log('it worked');
});
}
I copied my client ID in from the API Console and this is the exact response I got:
FireFox
Loading failed for the with source
“https://apis.google.com//scs/apps-static//js/k=oz.gapi.en.WcpMzqgmJZU.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNsTS1p4dx0iMhlrwEpiaXw4iMjOg/cb=gapi.loaded_0”.
Chrome
GET
https://apis.google.com//scs/apps-static//js/k=oz.gapi.en.WcpMzqgmJZU.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNsTS1p4dx0iMhlrwEpiaXw4iMjOg/cb=gapi.loaded_0
net::ERR_ABORTED 404
That's about as far as I got and I'm not sure what to do from here, so any help is much appreciated. I hope this didn't get too convoluted but I've tried to convey my problem as clearly as possible.

So I was able to authorize the YouTube API and create a playlist.
I have a backend hosted on localhost:8888 (doesn't matter just not what react is hosted on).
here is sample code for what I put in the server.js file (for the backend)
var express = require('express');
var app = express();
var passport = require('passport');
app.use(passport.initialize());
var YoutubeV3Strategy = require('passport-youtube-v3').Strategy;
passport.use(new YoutubeV3Strategy({
clientID: YOUR_CLIENT_ID,
clientSecret: YOUR_CLIENT_SECRET,
callbackURL: 'http://localhost:8888/redirect',
scope: ['https://www.googleapis.com/auth/youtube']
},
function (accessToken, refreshToken, profile, cb) {
var user = {
accessToken: accessToken,
refreshToken: refreshToken
};
return cb(null, user)
}
));
passport.serializeUser(function(user, cb) {
cb(null, user);
});
passport.deserializeUser(function(obj, cb) {
cb(null, obj);
});
app.get('/authenticate', passport.authenticate('youtube'))
app.get('/redirect', passport.authenticate('youtube', { failureRedirect: '/login' }),
function(req, res) {
res.redirect('http://localhost:3000' + '?access_token=' + req.user.accessToken)
})
app.listen(8888)
This is using Passport.js to do oauth for me, lots of documentation can be found on the site.
In react I have it so a button will open localhost:8888/authenticate and then that will redirect back to my application. If you are using this you need to make sure that on your google API credentials you have the javascript origin as http://localhost:8888 and the redirect URI as http://localhost:8888/redirect and the correct scope and application type.
This is the function I use in my app.js (react) to make the POST
getAPIdata() {
let parsed = queryString.parse(window.location.search);
let accessToken = parsed.access_token
fetch('https://www.googleapis.com/youtube/v3/playlists?part=snippet', {
method: 'POST',
headers: {
'Content-type': 'application/json',
'Authorization': 'Bearer ' + accessToken,
},
body: JSON.stringify({
'snippet':
{
'title':this.state.inputTitle
}
})
}).then(response => response.json()).then(data => {
console.log(data)
window.alert('https://www.youtube.com/playlist?list=' + data.id)
})
}
I was actually mostly correct with the first attempt I just had the authorization incorrect.
Here's a couple sources that helped me make my solution:
Passport.js oauth tutorial
Googles OAuth 2.0 Playground
Passport.js Documentation
Passport.js facebook oauth example
Hopefully this is helpful to someone, You can use the same code i used in server.js to authenticate most services by just changing the strategy.
A live version of my application can be found here. In the console it shows the response from the POST request, this should help if you have any issues. I know the alert is bad ui but this wasn't the intended use.
Thanks for reading :)

Passing parameters to the server (oAuth callback in Stripe Connect)

I am setting up Stripe Connect as explained here (Standalone Account). I handle the authorization and the retrieval of the access_token on my node server.
The user can visit the link MY_SERVER_URI/authorize and will be redirected to a pre-defined stripe AUTHORIZE_URI:
app.get("/authorize", function(req, res) {
// Redirect to Stripe /oauth/authorize endpoint
res.redirect(AUTHORIZE_URI + "?" + qs.stringify({
response_type: "code",
scope: "read_write",
client_id: CLIENT_ID
}));
});
After the user authorizes Stripe Connect, he or she will be redirected to a pre-defined REDIRECT_URI, which in this case equals to MY_SERVER_URI/oauth/callback, where the following script is executed:
app.get("/oauth/callback", function(req, res) {
var code = req.query.code;
// Make /oauth/token endpoint POST request
request.post({
url: TOKEN_URI,
form: {
grant_type: "authorization_code",
client_id: CLIENT_ID,
code: code,
client_secret: API_KEY
}
}, function(err, r, body) {
var accessToken = JSON.parse(body).access_token;
// Do something with your accessToken
// For demo"s sake, output in response:
res.send({ "Your Token": accessToken });
});
});
Now everything here works fine and the application is able to get the accessToken. However, this accessToken needs to be saved and matched with the user who is granting the access from the client side.
My question therefore boils down to, how can I either pass a client-side parameter (like the client-side userId) in the oauth/callback GET request, or process the server handling on the client side (e.g. a $http GET request instead of visiting the uri)? I guess that the later is not the recommended option.
I made two attempts:
I tried to pass a parameter using a dynamic REDIRECT_URI, but the
problem is that Stripe requires that alle urls need to be specified
first (resulting that no parameters can be passed in the redirect
url).
I tried to access the MY_STRIPE_URI/authorize with a $http GET request, but this gave me the obvious error No 'Access-Control-Allow-Origin' header is present on the requested resource
What can be done?

You have to pass your user id as "state" parameter and Stripe will return it on the callback. The only way I found to avoid session

Generally your scenario is as follows:
Make request to some route on your server and store the user's id there: req.session.user = {id: '...'}
From that route redirect the user to the third party authorization URL
In the route where you receive the access token, store it in the session as well: req.session.user.access_token = '...'
Use that access token for subsequent requests to the Stripe's API
Note:
Don't try to hack the authorization_code OAuth flow
You may find Grant easier to use for that type of OAuth flow, Stripe is supported
Relevant comment