So definieren Sie die Variable Google bei Verwendung der Javascript-API von Google One Tap
Ich folge dieser Dokumentation Google One Tap-Anmeldung , um Google One Tap-Anmeldung in meiner Reaktions-App zu implementieren.
Ich habe meiner JSX-Komponente den folgenden Code hinzugefügt und die Google-Eingabeaufforderung zur Anmeldung gestartet:
const handleCredentialResponse = response => {
console.log('response', response);
};
return (
<Fragment>
<div
id="g_id_onload"
data-auto_select = 'false'
data-client_id={clientId}
data-callback={(e) => handleCredentialResponse(e)}>
</div>
</Fragment>
);
Das Problem, mit dem ich konfrontiert bin, ist, dass die Rückruffunktion nicht ausgelöst wird. Nachdem ich nach einer Lösung gesucht hatte, stieß ich auf diese SO-Frage . Wo das OP die ähnliche Frage gestellt und die JavaScript-API-Syntax verwendet hat, um Google One Tap anstelle von HTML-Code anzuzeigen. Um der obigen Frage zu folgen, habe ich diese Dokumentation gelesen. Verwenden Sie die One Tap JavaScript-API . Aber ich kann nicht verstehen, woher die Variable Google kommt?
Beispielcode:
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
}
Wenn mir jemand sagen könnte, dass dies mein Problem lösen könnte, dass eine Rückruffunktion nicht ausgelöst wird. Vielen Dank!
Antworten
Ich habe eine Lösung mit Hilfe von Kommentiert von Nilesh Patel und diesem Paket gefunden reagieren-google-one-tap-Login .
Wenn ich den Quellcode im obigen Paket überprüfe, finde ich heraus, dass ich muss
ersetzen:
google.accounts.id.initialize({
client_id: CLIENT_ID,
callback: data => handleCredentialResponse(data),
state_cookie_domain: 'https://example.com',
});
mit
window.google.accounts.id.initialize({
client_id: CLIENT_ID,
callback: data => handleCredentialResponse(data),
state_cookie_domain: 'https://example.com',
});