Google App

This public repository hosts the app home page for the ePages integration with Google Smart Shopping.

Features

Explains the Smart Shopping integration

For the OAuth app verification the app homepage needs to fulfil the following requirements:

• Explain the app features
• Explain how the app uses the user's data
• Link to the privacy policy
• Use the ePages branding

See support.google.com for details.

Hosts legal documents

In the OAuth consent screen configuration we need to provide links to the app's privacy policy and the terms of use.

• https://google-app.epages.com/#/privacy-notice
• https://google-app.epages.com/#/terms-of-use

Proxies the OAuth flow

It is important to Google that the user can trust the redirect URI where the authorization server redirects the browser to after the API consent. So, the redirect URL needs to be on the same domain like from where they started. Since the authorized redirect URIs need to be allow-listed, this cannot under the shop domain. So, we have the app homepage as intermediary step in the OAuth flow.

1. Instead of contacting the autorization server directly from the shop administration, we are sending the parameters which we would normally send there to the app homepage. The app homepage then provides a "Sign in with Google" button using those parameters.

2. After clicking on that button, you will be send to Google's authorization server.
3. Once the API consent has been given, the authorization server will redirect you back to the app homepage.

4. After a countdown of three seconds, there will be an automatic redirect to a redirect microservice.
5. That microservice will eventually dispatch the request to the ePages installation where the tokens get generated. The dispatching is happening with the help of the scope request parameter.

Localizes content

Our Google app supports German, English, Spanish, and Dutch. We determine which language to use based on the user's browser language.

Prepares token generation

As a bonus feature, you can use the app homepage to help you manually generate access tokens. If you add only the ?client_id=xxxx parameter to the homepage, the "Sign in with Google" button will be rendered with the default parameters and scopes required for the Google Smart Shopping app. Instead of redirecting you back to a shop, the app homepage will render a cURL snippet which you can run in your terminal for manual token generation.

• App Homepage / Sandbox Client ID
• App Homepage / Production Client ID

Development

Dependencies

To work on the Google app homepage, you need to have the current LTS version of NodeJS installed on your laptop.

Start app

To start the development server, clone the repository, install the dependencies, and then call the start task.

$ git clone [email protected]:ePages-de/google-app.git
$ cd google-app
$ npm install
$ npm start

Then, the app will be accessible at http://localhost:3000 .

Localization

The app homepage uses i18next for the internationalization. The translation keys are defined in src/locales. They can be used in JSX code like this:

import i18n from 'i18next';

{ i18n.t('views.homepage.navbar.concept.label') }

Resource links

In JavaScript code islands in JSX, you can use process.env.PUBLIC_URL to reference the base URL of the app homepage.

<img src={process.env.PUBLIC_URL + '/img/Epages_Logo.png'} style={{ maxWidth: '200px' }} />

Linting

Run the fix task for cleaning up the import sort order etc.

npm run fix

Run the lint task for finding code style issues before doing a pull request.

npm run lint

Testing

OAuth start

The Google login button only appears on the homepage if the OAuth request parameters are provided. For testing, you can call the app homepage with the client ID of our sandbox OAuth app:

http://localhost:3000?client_id=746318976034-e9r0hta4db0d21e56d7eh1nhi8n4kj4d.apps.googleusercontent.com

OAuth end

The OAuth end page is rendered if the homepage was called with the OAuth response parameters.

For testing the redirection page, you can open this URL in a browser:

http://localhost:3000?state=eyJzeXN0ZW1SZWRpcmVjdFVyaSI6Imh0dHBzOi8vc2hvcHMuZXhhbXBsZS1yZXNlbGxlci5jb20iLCJzaG9wUmVkaXJlY3RVcmkiOiJodHRwczovL3Nob3AuZXhhbXBsZS5jb20ifQ%3D%3D&code=xxxxx&scope=email%20https://www.googleapis.com/auth/content%20https://www.googleapis.com/auth/siteverification%20https://www.googleapis.com/auth/adwords%20openid%20https://www.googleapis.com/auth/userinfo.email&authuser=1&prompt=consent

For testing the cURL snippet generation, you can call the app homepage with this example request:

http://localhost:3000/?code=xxxx&scope=https://www.googleapis.com/auth/content%20https://www.googleapis.com/auth/siteverification%20https://www.googleapis.com/auth/adwords

Deployment

Publish to GitHub Pages

Every commit in the repository triggeres the "Build & deploy" action defined in gh-pages.yaml.

If you want to trigger the deployment to GitHub Pages manually, you could do so by calling the deploy task.

npm run deploy

Compile release files

If you want to deploy the homepage somewhere else, you can compile the release files with the build task and then copy the /build directory there.

$ npm ci
$ npm run build
$ ls -l build
-rw-rw-r-- 1 jdoe jdoe 1109 Nov 12 17:55 asset-manifest.json
-rw-rw-r-- 1 jdoe jdoe 3870 Nov 12 17:55 favicon.ico
drwxrwxr-x 3 jdoe jdoe 4096 Nov 12 17:55 img
-rw-rw-r-- 1 jdoe jdoe 2249 Nov 12 17:55 index.html
drwxrwxr-x 2 jdoe jdoe 4096 Nov 12 17:55 legal-content
-rw-rw-r-- 1 jdoe jdoe   67 Nov 12 17:55 robots.txt
drwxrwxr-x 5 jdoe jdoe 4096 Nov 12 17:55 static

Copyright

© ePages GmbH 2021. All rights reserved.