Javascript to Hive KeyChain - how to ask to grant posting authority?

I've had such great help here over the last couple of weeks, and because doing anything in Javascript seems to take me many hours, I'm asking for the community's help once again.

Now I'm asking for just a bit more help, I want to create two new Javascript functions, similar to the one below:

  1. Ask the Hive user to grant my server's account name posting authority.
  2. Initiate a Hive or HBD payment from the Hive user to an address I pass in.

image.png

Backstory so far

Once again I'm going to say that I plan to produce simple, clear reference code which will show how to get Hive Keychain in the browser talking nicely to a Python Flask server back end.

I've got authentication working and that happens via a short piece of browser Javascript and a back end Python script

The bit in the browser looks like this:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function hiveKeychainSign(){
    const keychain = window.hive_keychain;
    let name = document.querySelector("#acc_name").value;
    if (!name) {
        // need a name
        console.log('need a name');
        return
    }
    const signedMessageObj = { type: 'login', address: name, page: window.location.href };
    const messageObj = { signed_message: signedMessageObj, timestamp: parseInt(new Date().getTime() / 1000, 10) };
    keychain.requestSignBuffer(name, JSON.stringify(messageObj), 'Posting', response => {
    if (!response.success) { return; }
    //Successfully logged in
    console.log(response);
    //We added stuff here
    axios.post("/podcaster/login", response).then((res) => {
        console.log(res)
        let data = res.data;
        //You'd probably want to give the url back in as a json.
        //Whatever you send back will be save in data. Here' i'm assuming the format
        //data = {podcaster : "https://google.com"}
        window.location.href = `${data.podcaster}`;
    }).catch((err) => {
        //Deal with any error here
    })
    });
};
</script>

and that's called from HTML (I'm spelling this out in complete detail in order to help others). Here's a big gotcha here that caught me out for a while: notice that this button is in its own form. That form does not have an action field so it doesn't submit the page back to the web server. This is vital because you want the Javascript to run on this page before the server is involved!

At the end of the Javascript above, you'll see the axios.post call which is how the results are sent back to the server, after the Keychain signing event happens.

    <form>
        <button class="btn btn-outline-info" id="Check Keychain" name="check-keychain" onClick="hiveKeychainSign()">KeyChain Login</button>
    </form>

Now I'm asking for just a bit more help, I want to create new scripts, similar to the one above:

  1. Ask the Hive user to grant my server's account name posting authority.
  2. Initiate a Hive or HBD payment from the Hive user to an address I pass in.

I've tried this but I get messed up with Javascript syntax. Eventually I'd probably get it right, but I'd be hugely grateful if someone made this easy for me and I'll pay it forward by documenting all this in one easy place.


brianoflondon hive footer.png