Add shortcut to Connected App action button in public workspace

I’ve added Discord as a Connected App such that each user can connect to their own Discord account and have their tokens stored in Frappe.

But I can’t help thinking the UI shouldn’t be exposing this much to a non-privileged user.
The only relevant thing for them should be the Connect to Discord action button in the screenshot which I was hoping to add as a shortcut to the Integrations workspace so that there’s only that one click setup.

Best I’ve got was a shortcut to a filtered list of Connected Apps (Screenshot 1). The user still have to click Discord in the list, then click the Connect to Discord button (Screenshot 2)

Is there any way I can improve this? Quite new to Frappe

Screenshot 1
Screenshot from 2023-08-19 01.25.32

Screenshot 2

Hi:

Play with permissions. You will enjoy it :wink:
https://frappeframework.com/docs/user/en/basics/users-and-permissions#user-permissions

From what I understand, User level permissions would not fit my use case I think since I expect to standardise this view for all non-privileged users.

So I went through Role Permission Manager instead to see if I can restrict the view further. But I don’t think they’d let me restrict the view to just the Connect to Discord button.

Read

  • what I have now, read-only access to everything including the client id

Write, Create, Delete

  • non-privileged user shouldn’t be able to create new Connected App anyways for my use case

Submit

  • the Connected App Doctype is not submitable

In fact, I don’t necessarily have to restrict access to the Client ID. It’s more towards they shouldn’t have to see than they shouldn’t be able to see it.

A simple Connect to Discord button without going through nested menus is all they need I think.

So I ended up making a Custom HTML Block in my public workspace that sort of worked but it broke while I was playing around with the styling.

I mimicked the Authorize OAuth Access button in frappe/email/doctype/email_account/email_account.js like so:

<button data-label="Connect%20to%20Discord" id="btnConnectToDiscord" class="btn btn-default ellipsis">
	Connect to Discord
</button>
root_element.querySelector("#btnConnectToDiscord").onclick= function (e) {
    frappe.call({
        method: "frappe.client.get",
        args: {
            doctype: "Connected App",
            name: "7dee5d4d3b",
        },
        callback(r) {
            if(r.message) {
                const connected_app = r.message;
                delete connected_app.openid_configuration
                delete connected_app.introspection_uri
                connected_app.__last_sync_on = "2023-08-19T15:44:03.247Z"
                frappe.call({
                	method: "initiate_web_application_flow",
                	doc: connected_app,
                	callback: function (r) {
                		window.open(r.message, "_blank");
                	},
                });
            }
        }
    });
}

I keep getting this error now when I click the button. Unsure what’s causing this error. Already cleared entry for my test user in the Token Cache as well but no difference.

Not sure what I’m missing

Screenshot from 2023-08-20 00.18.17

Hi @Zyten :

I’ve refeer to user permission. This kind of permission let’s define wich documents can be accessed by one particular user.

So, this user only can access to this connected app document (from anywhere: listview, filters, etc…)

Anyway, I can’t help much on connected app, I’ve just used for mail account OAuth flow, tried your scenario but i get the same error.

I ended up getting it to work! It was an issue with my code after all.

Updated code:

root_element.querySelector("#btnConnectToDiscord").onclick = async function (e) {
    let connected_app =  await frappe.db.get_doc("Connected App", "7dee5d4d3b");
    frappe.call({
    	method: "initiate_web_application_flow",
    	doc: connected_app,
    	callback: function (r) {
    		window.open(r.message, "_blank");
    	},
    });
}

My end goal was to add a Connect to Discord button under the Integrations workspace so this sort of resolves my issue already without needing to tweak permissions. Thank you for your time~

3 Likes

Very interesting. :+1:

1 Like