I have a express server listening on http://localhost:3000/ how to open a edge window/tab from tauri and then return to tauri with the access token from azure?
#how to open a edge window/tab and then return to tauri app?
wintry oasis
someone said that I can use https://tauri.localhost/ on producton and http:/localhost:3000/ on dev but I need assistance with returning from an edge window/tab after authentication, usually I get cannot resolve localhost
wintry oasis
as a tauri memeber said here a user would like to authorize the app from their default browser and not with a window popup/redirect in my app hence I try to open the default browser, authorize ms account and then return to the app... isnt it possible?
quick oasis
You have a sample of this here:
https://github.com/FabianLars/tauri-plugin-oauth
wintry oasis
could I open a default browser with shell::open and have it open localhost:3000 and then include in the index.html a js script that somehow send message to my app?
wintry oasis
You have a sample of this here:
https://github.com/FabianLars/tauri-plugin-oauth
thank you will take a look in this
wintry oasis
You have a sample of this here:
https://github.com/FabianLars/tauri-plugin-oauth
can I use it as a tauri plugin or is it not ready yet (as the readme says?)
quick oasis
can I use it as a tauri plugin or is it not ready yet (as the readme says?)
We might ask @leaden carbon directly, but it looks like it's working.
There are still some todo comments to make it more robust, I think it's mainly a starting point for people in your situation
Ultimately this will be either builtin or a core plugin at some point
wintry oasis
ty for your suggestion I think this is the way!
in the example it uses use tauri_plugin_oath::start and in the cargo.toml i dont see it there how to set tauri_plugin_oath and use it?
tauri-plugin-oauth = { git = "https://github.com/FabianLars/tauri-plugin-oauth", branch = "main" } ?
did a misspell but again now I get
Updating git repository `https://github.com/FabianLars/tauri-plugin-oauth`
error: no matching package found
searched package name: `tauri_plugin_oauth`
perhaps you meant: tauri-plugin-oauth
location searched: https://github.com/FabianLars/tauri-plugin-oauth?branch=main
required by package `smooth_chat_heat v0.0.4 (C:\Users\tseko\testNPM\SmoothChatHeat\src-tauri)`
what gives?
ok now it worked gonna see if I can make this work!
ty
leaden carbon
can I use it as a tauri plugin or is it not ready yet (as the readme says?)
it is ready. It's also used in some production apps as far as i know. the wip mention is mostly about 2 things:
- no docs or examples
- i don't know how good of an idea it is to use a plain tcp listener and not some http server framework with all the http quirks. So far i didn't see any issues though
oh and 3) i'm not sure if i like everything about the current api, but i don't have any ideas to improve it rn either
wintry oasis
@leaden carbon can you show me an example? I have hard time trying to uses the plugin with ms account
maybe we can hop in a voice/share screen and help me if you got some time?
wintry oasis
here is the code that works, I would like to integrate to that tauri-apps with the tauri-plugin-oauth and I am clueless....
leaden carbon
sorry i was in a meeting. lemme take a look at how ms oauth works real quick. i mainly focused on google so far
leaden carbon
so the thing here is, the oauth plugin is actually quite simple in design. it's basically just a really small localhost server which you use as your redirect url (it also injects a bit js to get # url fragments in case that's where the token hides)
So this means that your frontend code should stay mostly the same:
0) Set http://localhost as your redirect uri in MS settings. If it requires you to add a port, set more than one url with ports of your choice (in case one port is already taken on the user's system)
- When you're ready to auth, you start the plugin either in rust like the repo example shows, or by invoking
start(invoke("plugin:oauth|start")). Using the latter you must first register an event handler for the"oauth://url"(and maybe"oauth://invalid-url") event which is where the built-in start command emits the resulting url to.
Either way, the start command, or rust function will give you the port it actually listens to -> this will be the actual redirect which you typically need to specify in the redirect. - open the auth page using tauri's
shell.openapi for example, make sure the parameters include all the stuff needed, including the current redirect_uri - wait for the user to auth and check the oauth://url event
- the plugin's server should shut down automatically at this point.
wintry oasis
thank you for this! I may not be able to manage it still (I am a newly finished dev school) will come back with more questions propably!
leaden carbon
yeah i'm trying to understand microsoft's docs on all this stuff right now and not having a great time 😅
wintry oasis
how to register a event handler for oauth://url and invalid-url? total noob here....
I am officially dizzy 😵
leaden carbon
how to register a event handler for `oauth://url` and invalid-url? total noob he...
import { listen } from '@tauri-apps/api/event'
const unlisten = await listen('oauth://url', event => { console.log(event) };
``` (switch to Promise.then if you can't use async/await)in the example the input is a window? how would I go about invoking start_server with a window?
leaden carbon
i don't get the question tbh
wintry oasis
in the example start_server (window:window) it accepts a window type, do I just do invoke('start_server',{'window: http://localhost:3000'});
leaden carbon
in the example start_server (window:window) it accepts a window type, do I just ...
tauri will inject the Window arg for you
wintry oasis
oh ok! so just invoke('start_server'); then;
leaden carbon
yea
wintry oasis
ok cool I am getting the hang of it slowly
where do I declare url?
or just
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
use tauri::{command, Window};
use tauri_plugin_oauth::start;
#[command]
async fn start_server(window: Window) -> Result<u16, String> {
start(move |url| {
url = "http://localhost:3000";
// Because of the unprotected localhost port, you must verify the URL here.
// Preferebly send back only the token, or nothing at all if you can handle everything else in Rust.
let _ = window.emit("redirect_uri", url);
})
.map_err(|err| err.to_string())
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![start_server])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
you do not declare an url at all. It will always be localhost
and ideally the plugin is responsible for the port selection (this is the u16 the command returns)
wintry oasis
thank you, sorry for the noobiness...
leaden carbon
no need to apologise mate, everbody has to start somewhere, or doesn't know something 🤷
wintry oasis
how to make the second work like the first?
const { invoke } = window.__TAURI__.tauri;
import { listen } from '@tauri-apps/api/event';
is it const {event} = api.__TAURI__.event;?
leaden carbon
const {listen} = window.__TAURI__.event;
leaden carbon
whoops, should actually open my eyes for once 👀
window not api - edited the message above
wintry oasis
okeik
wintry oasis
ok back at it, in the example by ms it runs node server.js how to make it run with npm run tauri dev?
leaden carbon
that's when you call invoke. the command above will start the server
wintry oasis
I am lost, the start_server will start a server and return a port, then how will I open the browser with the authentication page:
so with the server.js it start the browser with the index.html in the app folder
as you see server js starts the index.html that is the auth flow
wintry oasis
in other words how do I open the web browser to index.html in app?
leaden carbon
where you would just call tauri's shell.open to open the user's browser which then does the auth stuf without some kind of index.html stuff
leaden carbon
no wiat
looking at the index.html file, this belongs into your tauri app
then the actual auth will happen in the browser (the example uses a popup window?)
wintry oasis
yeah
I can use redirect also
the ms examples are some old some new some use web some use SPA some use PWA some use desktop some use server etc
its a bit of a mess
I choose web (server at localhost:port)
my for example uses these:
wintry oasis
I use this: https://github.com/Azure-Samples/ms-identity-javascript-v2 maybe its the wrong example for using tauri-plugin-oauth
leaden carbon
That one mixed together with the electron docs (https://learn.microsoft.com/de-de/azure/active-directory/develop/tutorial-v2-nodejs-desktop) should give a rough picture of the flow i think?
is Microsoft's auth flow this different from everything else or why are the docs and examples so freaking confusing
wintry oasis
so I just have to migrate from electron to tauri? is it only needed to change the shell from require('electron') to const {open} = window.__TAURI__.shell
and the code that invokes open?
what does tauri-plugin-oauth role here?
leaden carbon
so I just have to migrate from electron to tauri? is it only needed to change th...
well, no. all the electron stuff doesn't work. but the ideas should apply in tauri apps too. it's only about the theory here.
leaden carbon
what does tauri-plugin-oauth role here?
again, the plugin's only responsibility is to the get token back from the auth page, meaning that it is the redirect_uri
everything else has nothing to do with the plugin
and that's also why i can't really help you with the code, because i simply have no idea how to implement it
wintry oasis
ok, lets make a change of route. can you assist me with gdrive implementation as you are more familiar with it and I will try implementing ms account later in the dev process
are there some examples that work with gdrive? I could first try to understand those and see if I can make it work