Password type field in gmail card service

Question

Right now, in gmail appscript we don't have any option to add a password type field.

Gmail Card Service for add-on has a very good ability to show any thing in it. We can integrate with any app which has basic REST api. We need authentication for that which commonly need password type field.

Any work around to show password type field?

Answer 1

Looks like you are authorizing a non google service . Please refer to Authorizing custom google services .

Answer 2

As of now, there is no support for password field in Gmail add-on.

But we can build a hack for it. I hope password is needed only in registration forms. So, we can build a registration form using HTML and that can be served through authorization action.

CardService.newAuthorizationAction().setAuthorizationUrl(loginUrl)

Here, host registration HTML in a web server and pass this URL as "loginUrl" in the above snippet. We have to supply AuthorizationAction for the signup/register button. So, when the user clicks on this button, a new popup page is launched, the user will give the username, password, etc... onsubmit, we can encode all the form data and pass it to the parent Gmail add-on by redirecting it to a script redirection URL which you can generate an add-on. Once the redirection to the script URL comes, there will be a callback in our add-on code from there you can get the form fields which were encoded from registration HTML page.

function generateNewStateToken(callbackName, payload) {
        return ScriptApp.newStateToken()
        .withMethod(callbackName)
        .withArgument("payload", JSON.stringify(payload))
        .withTimeout(3600)
        .createToken();
    }

function getRedirectURI() {
    return "https://script.google.com/macros/d/" + ScriptApp.getScriptId() + "/usercallback";
  }

var state = generateNewStateToken("registerCallback", {"signup": true});
var reg_url = <reg_url> + "?redirect_uri=" + getRedirectURI() + "&state=" + state;

function registerCallback(cbResp) {
 // to access payload which passed in state token: cbResp.parameter.payload;

// in the html serialize all the form fields or data which you want to pass to plugin as query params like: <redirect_uri>?form_data=<encoded_data>&state=<state>

//Note: here the registration HTML page should parse the URL to get the state & redirect_uri from URL.

// to access form_data: cbResp.parameter.form_data

}

I hope this will help you. This is how we are doing the signup/signin flow now.