How to setup OAuth2 connection to Google Identity API within an Electron app safely with redirectUri pointing to localhost? - node.js

The context:
I'm trying to develop a desktop app with ElectronJS which needs access to Google APIs. As such, I want my users to be able to connect to their Google account via OAuth2.
As I use Electron, I have no safe way to store a "client-secret" and must use the "mobile app" method.
The problem:
Google keeps rejecting my redirect_uri:
The doc I followed:
The official npm "google-auth-library" package mentions the following regarding OAuth authentication for Electron apps ("OAuth2 with Installed Apps (Electron)" section) :
If you're authenticating with OAuth2 from an installed application (like Electron), you may not want to embed your client_secret inside of the application sources. To work around this restriction, you can choose the iOS application type when creating your OAuth2 credentials in the Google Developers console
As doing so gave me the previously mentionned Error 400, I looked into Google Identity documentation and saw this regarding localhost redirection:
Note that support for the loopback IP address redirect option on mobile apps is DEPRECATED.
My question:
At this point, I suspect that this is the reason Google is responding Error 400 to my requests (but I admit it could be my fault. I just don't understand what I do wrong as I feel like I follow the documentation strictly.)
If so, what are the possible ways to solve the issue ? Knowing that I have strictly 0 budget for this project and so I cannot afford to redirect to a domain I would buy or afford a server acting as proxy between my app and Google APIs.
(The code, if useful)
I use the "complete OAuth2 example" from google-auth-library except I changed the OAuth2Client constructor call to this, following the doc's recommandations:
const oAuth2Client = new OAuth2Client({
clientId: "<the clientID of my project from Google API Console>",
redirectUri: "http://127.0.0.1:3000"
})
In despair, I've tried a whole lot of different URL formats, but nothing works.
Thanks in advance for your help.

OAUTH BEHAVIOUR
An OpenID Connect desktop app uses PKCE without a client secret. According to RFC8252 it then receives the login response on either a loopback URL or via a private URI scheme notification.
The loopback option is fine for a desktop app but should not be used for a mobile app. Conversely, claimed HTTPS redirect URLs work for mobile apps but not desktop apps.
TROUBLESHOOTING YOUR PROBLEM
It is not clear whether your problem is caused by using a loopback URL or something else. To troubleshoot, you can use a couple of demo Electron apps of mine:
Loopback example
Private URI Scheme example
In both cases, edit the desktop.config.json file in the root folder. Replace my AWS Cognito values with your Google values. Then run npm start. See if that gets you any further, and post any follow up questions.

Related

I'm getting a redirect_uri_mismatch when deploying my Node.js app to Heroku using Google OAuth2

I'm tasked with making a server using Node.js which will read emails from a Google account and parse the content from those emails into data we can store in a database. I'm using Google's googleapis package (v103.0.0) in NPM to authenticate/authorize with whichever account we'd like to use.
The issue comes when we try to switch accounts and have the user re-auth. During development on a local machine, the Auth process works as expected:
The client requests an Auth URL.
The server generates a new Auth URL and sends it back to the client.
The client redirects to that URL and the Google Consent Screen is shown.
The client is asked to choose between logged-in Google accounts.
The client authorizes the application and is redirected back to the server with a code.
The server uses the code to generate/save a token, which allows it to use the Gmail API.
However, after deploying to Heroku, the Google Consent Screen no longer allows the user to select an account. Instead, at step 3, it shows this message. In just about every other question related to this error, there's always additional information below the error code/message, but nothing's there for me. I made sure: (1) the domain I'm using in Heroku is verified on the Google Cloud Console, and (2) the redirect_uri within the Node.js application is passing the correct domain to the Auth URL, even while in production.
I can't provide the URL for privacy reasons, but let me know if there's any source code or Cloud Console info I should include.
It didn't take long after posting this question, but I realized I was using an incorrect OAuth 2.0 Client ID type. I was attempting to use "Desktop" when I should've been using "Web application" instead. Take a look at this image to see the difference.
When you select "Web application", you're given some new options: Authorized JavaScript origins, and Authorized redirect URIs. This is where you need to fill out the allowed URIs. Here's a sample of what that should look like.

Options for integrating DocuSign into an SPA

I'm working on a submission for a conference. I'd like to integrate DocuSign with Alfresco's Angular based developer framework and specifically the Alfresco Content App.
In order to keep things simple, I'd like to think about workflows that could be done 100% from the browser without any backend code of my own.
I suspect I could create a "Sign this document now" type action for any document found in the Alfresco UI. That could initiate an OAuth flow that would not require any backend services of my own.
I think I would need to put my integrator key into the SPA. This would then be visible to anyone using the app. From reading through docs, I'm unclear if it is OK to "leak" this key?
Are there other use cases I can implement in an SPA without adding backend services of my own? Things like, sending a doc out to be signed by one or more people? Or embedding a signing experience in the Angular UI?
I have seen the following series on the DocuSign blog:
https://www.docusign.com/blog/dsdev-building-single-page-applications-with-docusign-and-cors-part-1/
Having read through that and also the REST API documentation, I'm still unclear if it is even possible to implement something like this without any support from my own backend service.
I also have not found any place online where I can reach out to a developer evangelist from DocuSign to discuss my options. I believe DocuSign developers monitor SO, so figured this was the next best thing.
Great question. Browsers implement the Same Origin Policy. So, as I wrote in the blog series (see all three of my posts listed below), you will need a CORS gateway to make API calls from your Angular program running in the browser itself to the DocuSign system.
The good news is that creating a private CORS gateway isn't hard. See part 2 of the series:
Part 1. Introduction
Part 2. Building a private CORS gateway
Part 3. An example React SPA
Authentication
Your app will need an access token when it makes API calls to DocuSign. There are multiple techniques available to give your app the access token it needs:
Your app can, by itself, authenticate the user with DocuSign. In this case, because of the security issues--as you mentioned in your question--you do not use the OAuth Authorization Code Grant flow. Instead, you use the OAuth Implict Grant flow, which is designed for this use case. This flow is demonstrated in part 3 of the blog series.
You can implement the OAuth Authorization Code Grant flow in your server, and then create a private API between your server and your browser app to obtain the access token.
A private API
As an alternative to using CORS, you can just implement your own private versions of the DocuSign API methods on your server. Then your browser app would send a private_send_envelope request to your server. Your server would manage the access token, send the request to DocuSign, and relay the response back to your browser app.
This pattern is the same as your question about implementing a backend service. It will work fine but is not as elegant as implementing everything within your browser app. Depending on your immediate and future API needs by your SPA, this might be a good idea or not.
CORS support is the key
Until DocuSign has CORS support you'll need to build something on the backend. Either a CORS gateway (which only involves configuration, not software) or a private API gateway.
Please ask your DocuSign sales or technical contact to add your information to the internal DocuSign proposal for CORS support, PORTFOLIO-1100. This will help raise the priority of CORS support. Thanks.
Specific answers
Regarding:
I think I would need to put my integrator key into the SPA. This would then be visible to anyone using the app. From reading through docs, I'm unclear if it is OK to "leak" this key?
Answer: It is okay to add your integrator key (IK) to your browser app if and only if the IK is set for Implicit Grant usage (check the "Mobile App" checkbox on the IK's property sheet).
Having read through that and also the REST API documentation, I'm still unclear if it is even possible to implement something like this without any support from my own backend service.
Answer: at this time you will either need to implement a private CORS gateway or implement backend software.

When registering an app on Azure Active Direct, what "redirect URI" or "Sign-on URL" should I use?

Might seem a silly question, but Microsoft's documentation isn't very beginner friendly, I think. It uses as examples "http://localhost:31544" for the sign-on url and "http://MyFirstAADApp" for the redirect URI, but although I understand what a local host is I can't figure out what exactly the numbers on it are and how I define them for my application, and absolutely zero clue of what the redirect URI is supposed to do for a native application and how should I define a URI for my own.
To be more clear on what kind of app I'm trying to add, I merely want to acess the Office 365 management API tools and get some data from it, so I imagine a native app would fulfill my needs for now. Registering the app on Azure AD is required to do so according to Microsoft's documentation.
So expanding on the title, how to define an URI for my native app is what I would mainly like to know. Some further clarification on what exactly is the purpose of this URI as well as to how to use and/or define a localhost URL for an Web app would also be much appreciated.
I know this is ancient, but I don't see a satisfying answer here, and maybe someone will come across this and find it useful. To answer the question asked, unless you're going to work outside of the default MSAL handling of the server responses, and I don't expect you would from your description, I'd just go ahead and use the default:
https://login.microsoftonline.com/common/oauth2/nativeclient
When you go into the Azure AD portal, go to your application and, from the Overview, select the "Set RedirectURL" option, you'll add a platform and select the "Mobile and Desktop Applications" and you'll be provided with the choice of 3 URLs to choose from. My understanding is this is just there for custom handling of authorization tokens and is telling MS where to send those tokens. The MSAL library functions seem to use this link as well, so they're probably handling this in the backend.
I agree with the OP though, the MS docs are severely lacking for newcomers and I wasn't able to find an end-to-end description of what needs to happen to get, in my case, a desktop application to send email through Office365 using 2FA. I would forge ahead as best I could until I hit the next error, then explore that, sort it, then slam into the next one. Rinse and repeat. This was made extra tedious as I had to go through a 3rd party IT group to get the 2FA access codes every time I wanted to test.
Best of luck, hope this helps someone!
how to define an URI for my native app is what I would mainly like to
know.
You should provide a Redirect URI that is unique to your application as it will return to this URI when authentication is complete.
In your application, you will need to add a class level variables that are required for the authentication flow, include ClientId and Redirect URI.
Here is the diagram:
Native application makes a request to the authorization endpoint in Azure AD, this request includes the Application IP ,Redirect URI and application ID URI for the web api.
After user signed in, Azure AD issues an authorization code response back to the client application's redirect URI. After that, the client application stops browser interaction and extracts the authorization code from the response.
Then the client app use this code to sends a request to Azure AD's token endpoint. upon successful validation, Azure AD returns two tokens.
Over HTTPS, the client app uses the returned JWT access token to add the JWT string with a “Bearer” designation in the Authorization header of the request to the web API. The web API then validates the JWT token, and if validation is successful, returns the desired resource.
More information about it, please refer to this article.
For native you can set redirect to be equal to the Application ID URI, which now defaults to look like //app:{ApplicationId}
Redirect uri be starts with SSL URL, so select your project, enable SSL URL and use this auto generated SSL URL (for example : https://localhost:port#) as redirect uri , same to be updated in the azure app registration as additional redirect URIs

How to obtain access tokens from google

How to obtain oauth access tokens from google if i have only registered app and no server to redirect (as a "redirect_uri" parameter)?
I'm guessing that when you say you have no server, that your app is a native app. eg a desktop app or an embedded app. If so, you can generate tokens using the OAUth playground. See How do I authorise an app (web or installed) without user intervention? (canonical ?) for details.
You can use https://www.example.com/oauth2callback as your redirect uri.
Yes you can get an access token without a server. We've made it fairly easy. See the docs
On android it is fairly easy
https://developers.google.com/identity/sign-in/android/additional-scopes
https://developers.google.com/identity/sign-in/ios/
https://developers.google.com/identity/sign-in/ios/additional-scopes
Web
https://developers.google.com/identity/sign-in/web/incremental-auth
You can just change the scopes you need.

Create system oauth for API based on my service

I would like to develop a system that can help any developer to create an application based to my API.
My problem is authentication.
I have see (for example) as work google with your services; I would like create an system of oauth (private) such as google (concept) that an developer, after sign to my portal, get APP ID and APP SECRET.
When developer self create these credentials, can use for call API based to https.
My API are developed by nodejs and express system.
I say which way is more stable for create an system robust for this scenario.
Thanks for any support. Any idea is appreciate
You can try http://passportjs.org/, it can work as a middleware with express.

Resources