Integração do Google One Tap com Meteor

Estou integrando um aplicativo Meteor com o One Tap do Google . Tentar usar o Meteor loginWithGooglepara fazer o usuário salvar nas contas do Meteor (embutido no Meteor.js). A complexidade disso é que

A biblioteca One-Tap não se destina a autorizar o usuário (ou seja, produzir token de acesso), apenas para autenticar o usuário

Assim, o que tive que fazer é autenticar o usuário usando Google Api, ou gapirecuperar o necessário access_tokene id_token. Suportes para esta postagem .

O que tenho até agora é o seguinte:

HTML

<div data-prompt_parent_id="g_id_onload" style={{ position: "absolute", top: "5em", right: "1em" }} id="g_id_onload"></div>

LADO CLENT

google.accounts.id.initialize({
  prompt_parent_id: "g_id_onload",
  client_id: "42424242-example42.apps.googleusercontent.com",
  auto_select: false,
  callback: handleCredentialResponse
});

const handleCredentialResponse = async oneTapResponse => {
  // see the SERVER SIDE code, which is where validation of One Tap response happens
  Meteor.call("verifyOneTap", oneTapResponse.credential, oneTapResponse.clientId, (error, result) => {
    if (error) {
      console.log(error);
    }
    if (result) {
      // Initialize the JavaScript client library.
      gapi.load("auth2", function() {
        // Ready. Make a call to gapi.auth2.init or some other API 
        gapi.auth2.authorize(
          {
            client_id: oneTapResponse.clientId,
            scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
            response_type: "code token id_token",
            prompt: "none",
            // this is the actual email address of user, [email protected], passed back from the server where we validated the One Tap event...
            login_hint: result.email
          },
          function(result, error) {
            if (error) {
              // An error happened.
              console.log(error);
              return;
            }
            //these are the authentication tokens taht are so difficult to capture...
            let theAccessToken = result.access_token;
            let theIdToken = result.id_token;

            //*********************************
            //this is the part that doesn't work
            //trying to get it to create the account without another Google prompt...
            Meteor.loginWithGoogle({ accessToken: theAccessToken, idToken: theIdToken, prompt: "none" }, function(err, res) {
              if (err) {
                console.log(err)
              }
            });
            //*********************************
          }
        );
      });
    }
  });
};

google.accounts.id.prompt(notification => {
  //this just tells you when things go wrong...
  console.log(notification);
});

LADO DO SERVIDOR

const { OAuth2Client } = require("google-auth-library");
const clientOA2 = new OAuth2Client("42424242-example42.apps.googleusercontent.com");

// the token and clientId are returned from One Tap in an object, are credential (token) and clientId (clientId)
verifyOneTap: async (token, clientId) => {
  const ticket = await clientOA2.verifyIdToken({
    idToken: token,
    audience: clientId // Specify the CLIENT_ID of the app that accesses the backend
    // Or, if multiple clients access the backend:
    //[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
  });
  const payload = await ticket.getPayload();

  //perform validation here so you don't get hacked...

  return payload;
  // If request specified a G Suite domain:
  // const domain = payload['hd'];
}

Tentei escrever isso de maneiras diferentes no cliente / servidor, bem como considerei maneiras de contornar isso e apenas se inscrever com Accounts.createUser do Meteor , mas não é o ideal. O que há de errado com o [options]que estou passando loginWithGoogle? Eu pensaria accessTokene idTokenbastasse ...

O que acontece é que, no login, ele me conecta por meio do primeiro estágio do Google One Tap, mas as opções que eu coloquei Meteor.loginWithGooglenão estão sendo reconhecidas de alguma forma:

isso funciona (primeira etapa do fluxo de uma etapa) =>

mas então ele pede o login novamente: |

A documentação sobre loginWithGoogleafirma que o formato é normalmente:

Meteor.loginWith<ExternalService>([options], [callback])

e com relação a loginWithGoogle:

as opções também podem incluir parâmetros URI adicionais do Google

Parâmetros URI adicionais do Google

Obrigatório : client_id, nonce, response_type, redirect_uri, scope

Opcional : access_type, display, hd, include_granted_scopes, login_hint, prompt

Infelizmente, ele claramente não está reconhecendo algo no [options]que estou passando, caso contrário, ele salvaria o usuário no MongoDB, o que não está fazendo.

Ok, encontrei uma resposta - estou trabalhando em algo mais limpo, mas esta é a correção atual - obrigado Jimmy knoot e methodx por alguma inspiração.

Nota: todo o resto é igual à pergunta original acima.

CLIENTE

// this is the callback from the Google One Tap `google.accounts.id.initialize` (see original Stack Overflow question above)
const handleCredentialResponse = async oneTapResponse => {
  // see the SERVER SIDE code, which is where validation of One Tap response happens
  Meteor.call("verifyOneTap", oneTapResponse.credential, oneTapResponse.clientId, (error, result) => {
    if (error) {
      console.log(error);
    }
    if (result) {
      // Initialize the JavaScript client library.
      gapi.load("auth2", function() {
        // Ready. Make a call to gapi.auth2.init or some other API 
        gapi.auth2.authorize(
          {
            client_id: oneTapResponse.clientId,
            scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
            response_type: "code token id_token",
            prompt: "none",
            // this is the actual email address of user, [email protected], passed back from the server where we validated the One Tap event...
            login_hint: result.email
          },
          function(tokens, error) {
            if (error) {
              // An error happened.
              console.log(error);
              return;
            }
            //gapi returns tokens including accessToken and idToken...
            Meteor.call("createOneTapUser", result, tokens, (error, stampedLoginToken) => {
              if (error) {
                console.log(error);
              }
              //this logs in with the token created earlier...should do whatever your normal google login functionality does...
            //*********************************
            // this is where you skip the Google login popup :) 
              Meteor.loginWithToken(stampedLoginToken);
            });
            //*********************************
          }
        );
      });
    }
  });
};

SERVIDOR

createOneTapUser: async (userDetails, accessDetails) => {
  //just including details here for what part of a user object would look like from Meteor.loginWithGoogle > note especially resume > loginTokens
  let oneTapUserObj = {
    services: {
      google: {
        accessToken: accessDetails.access_token,
        idToken: accessDetails.id_token,
        scope: ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile", "openid"], // yours may be different...
        expiresAt: accessDetails.expires_at,
        id: userDetails.sub,
        email: userDetails.email,
        verified_email: userDetails.email_verified,
        name: userDetails.name,
        given_name: userDetails.given_name,
        family_name: userDetails.family_name,
        picture: userDetails.picture,
        locale: "en"
      },
      resume: {
        loginTokens: []
      }
    } //...whatever your user object normally looks like.
  };
  //manually inserting the user
  Meteor.users.insert(oneTapUserObj);

  let newOneTapUser = await Meteor.users.findOne({ "profile.email": userDetails.email });
  // generates the login token that goes under user > services > resume > loginTokens...
  let stampedLoginToken = Accounts._generateStampedLoginToken();
  Accounts._insertLoginToken(newOneTapUser._id, stampedLoginToken);

  //sets the social media image from the google account...you'll need to build your own...
  userDetails.picture ? scrapeSocialMediaImage(newOneTapUser._id, userDetails.picture) : console.log("Google One Tap user " + newOneTapUser._id + " has no profile picture...");

  return stampedLoginToken.token;
}