Google Login question

I have set a google login which is on a lightbox.
What code do I need to close the lightbox after a successful login from Google?
And how do I transfer the received data from Google to the member list?

Only code what i have is this in iFrame here:

<!doctype html>
<html>
<head>
  <meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">

 

<script>

</script>

</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
 
 var profile = googleUser.getBasicProfile();

let userId = profile.getId();

let fullName = profile.getName();

let firstName = profile.getGivenName();

let lastName = profile.getFamilyName();

let userEmail = profile.getEmail();

let idToken = googleUser.getAuthResponse().id_token;

window.parent.postMessage({userId: (userId), idToken: (idToken),fullName: (fullName), firstName: (firstName), lastName: (lastName),userEmail: (userEmail)}, "*");

//here we auto sign out the user as we have already posted their info to the page code, remove this part of the code if you want the user to remain signed into google on your page

var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut();

    }//end of googleSignIn

   function onFailure(error) {
      console.log(error);
    }

//custom google button

    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

Can one give me the code, unfortunately I do not know myself so well.

Could you solve this issue already?

How to close a lightbox…

import wixWindow from 'wix-window';

wixWindow.lightbox.close();

Where i put this code in combination with google login when successful?

@michaelstrauss307 To be continued, if still not solved…

@russian-dima Not solved. Very nice when you can put full code :slight_smile:

@michaelstrauss307 I am not sure if the HTML-Component-way is a SECURE-ONE.
How secure is a HTML-Component? I don’t know.

If i would be you, i wouldn’t code projects with sensitive data in html-components. Your Oauth-Authentification in my eyes is a very sensitive function.

You better use the back-end and Secret-Key-Manager to manage your project.

Here an example for you…

DafĂĽr habe ich einen gut bei dir :wink: bedanken kannst du dich jeder Zeit auf meiner Seite.

BACK-END: ( OAuth.jsw )

import crypto from 'crypto';
import wixFetch from 'wix-fetch';
import { google } from 'googleapis';
import {GoogleAuth} from 'google-auth-library';
import { getSecret } from 'wix-secrets-backend';
import wixUsersBackend from 'wix-users-backend';

//Die Wix-Site fordert eine Autorisierungs-URL an.
export async function getAuthUrl() {
    console.log(GoogleAuth)

 // generate a random state variable...
 const state = crypto.randomBytes(16).toString('hex')
 // defining scopes where to get data from...
 const scope = [
 'https://www.googleapis.com/auth/userinfo.email',
 'https://www.googleapis.com/auth/userinfo.profile'
 ];
 
 // create a connection to google's authentication services
 const tokenData = {
        clientID: "client-ID-here",
        clientKEY: await getSecret("SECRET-ID/KEY-here"),
        redirectURL: "REDIRECT-URL-HERE"
 }

 const authConnection = new google.auth.OAuth2(
        tokenData.clientID,
        tokenData.clientKEY,
        tokenData.redirectURL
 )

 const authUrl = await authConnection.generateAuthUrl({
        access_type: 'offline', // 'online' (default) or 'offline' (gets refresh_token)
        prompt: 'consent',
        scope: scope,
        state: state
 });
 
 const userInfo = await wixFetch.fetch(`https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=${authUrl}`, { "method": "get" })
 
 return {authUrl, scope, userInfo}; 
 
}

FRONT-END:

import wixLocation from 'wix-location';
import {getAuthUrl} from 'backend/OAuth.jsw';

$w.onReady(function () {
    $w('#btnSignInToGoogle').onClick((event) => {
 //Der Nutzer klickt auf ---> Google anmelden
      googleSignin();
 });
})

async function googleSignin() {
 let RESULT = await getAuthUrl(); console.log(RESULT)
 
 const URL = RESULT.authUrl; console.log("Authentication-URL: ", URL)
 //const STATE = RESULT.state; console.log(STATE)
 const scope = RESULT.scope; console.log("Scope: ", scope)

  setTimeout(()=>{
 //wixLocation.to(URL)
 },150);
 
}

Den Rest des Weges musst du alleine gehen. Es ist noch nicht ganz fertig!

You will have to modify it with your own LOG-IN-ACCESS-DATA.
I am sure, you will be able to bring this one to work.

Good luck!

Of course you even can store Client-ID and Key in your Secret-Manager.

1 Like